Espace Client & Tableau de Bord (`client-alta.alta-voce.tech`)

Documentation auto-générée

Référence Frontend auto-générée : Voir la référence des composants Vue 3 générée automatiquement dans docs/fr/altacall/client-alta-frontend.md.

1. Rôle d'Architecture & Rendu Web

L'application client-alta est l'interface web officielle fournie aux entreprises partenaires d'Alta Voce. Conçue sous la forme d'une Single Page Application (SPA) haut de gamme et réactive développée en Vue 3, elle permet aux superviseurs et gestionnaires de parcs d'appels d'administrer leurs ressources à distance.

Ses objectifs majeurs sont :

Visualisation en temps réel (BI) : Restitution graphique de la performance vocale et des durées de traitement d'appels par groupe d'agents.
Surveillance technique (Diagnostics) : Centralisation des alertes matérielles et logicielles issues des terminaux clients de bureau.
Pilotage opérationnel : Gestion des agents, attribution groupée de labels de compétences, et commande de tests A/B de validation acoustique.

2. Structure Détaillée du Code Source (Vue 3)

L'architecture interne respecte les standards professionnels de l'écosystème Vue.js :

graph TD
    A[main.js : Point d'entrée] --> B[App.vue : Layout Racine]
    B --> C[router.js : Vue Router 4]
    B --> D[store.js : Vuex 4 State]
    B --> E[http.js : Client Axios]
    C --> F[Vues / Pages]
    D --> G[Persistance Locale : vuex-persist]
    E --> H[REST API : admin-alta]

2.1. Initialisation de l'Application (`src/main.js`)

Le point d'entrée de l'application initialise et injecte les plugins fondamentaux dans l'instance Vue :

Montage du routeur et du store : Enregistrement de Vue Router et du store Vuex.
Internationalisation (i18n) : Configuration du moteur de traduction vue-i18n (via createI18n). Il gère le basculement dynamique de la langue (Français/Anglais) en chargeant les catalogues compilés de traduction originellement issus de fichiers .po via easygettext.
Monitoring d'erreurs client : Initialisation du SDK Sentry configuré via les variables d'environnement pour capturer en temps réel les exceptions Javascript côté client et les remonter aux équipes DevOps.

Le routeur définit la hiérarchie des pages et implémente des mécanismes de sécurité d'accès :

Structure Imbriquée (Nested Routes) : Un layout de tableau de bord parent (views/dashboard/Base.vue) contient un composant <router-view> qui rend dynamiquement les sous-pages associées au groupe d'agents sélectionné (/dashboard/group/:id/...).
Gardes de Sécurité (beforeEach) : Analyse de la métadonnée requiresAuth définie sur les routes. Si l'état d'authentification du store Vuex est faux ou si le token d'accès est absent, le routeur intercepte la navigation et redirige immédiatement l'utilisateur vers la page de connexion /login.
Sections principales du routeur :
- /dashboard/group/:group? — Tableau de bord BI principal avec sous-routes : users, machines, issues, abtests, labels, outdated-machines
- /onboarding — Assistant de configuration initiale de l'organisation
- /organization — Paramètres de l'organisation, comptes et gestion des groupes
- /help — Centre d'aide, FAQ, explorateur API et guides de configuration
- /downloads — Téléchargements des versions logicielles
- /account — Paramètres du profil utilisateur connecté
- /feedback — Soumission de retours utilisateurs

2.3. Gestion d'État Centralisée (`src/store.js`)

L'état global de l'application est administré avec Vuex 4, garantissant la réactivité des composants lors du changement de groupe de travail ou de profil :

Structure du State :
- user : Profil de l'utilisateur connecté (ID, nom, email, rôle).
- auth.accessToken : Token d'API Laravel Sanctum actif (token opaque, pas un JWT).
- organization & groups : Structure cliente rattachée au compte connecté et liste des départements.
- selectedGroup / selectedGroupId : Département sélectionné par le superviseur dans l'interface pour filtrer les affichages.
Persistance Locale (vuex-persist) : Un middleware sauvegarde automatiquement le state (token, groupe actif, profil utilisateur) via une couche de stockage chiffrée AES personnalisée (basée sur crypto-js), empêchant le stockage en clair des tokens sensibles dans le localStorage.

2.4. Couche Réseau d'API (`src/http.js`)

Toutes les requêtes AJAX sortantes vers le serveur backend Laravel sont enveloppées par un client Axios configuré :

Intercepteur de Requête : Avant chaque envoi, l'intercepteur lit le token actif depuis le store Vuex (auth.accessToken) et l'injecte automatiquement dans les en-têtes HTTP (Authorization: Bearer <token>). Il gère également le rafraîchissement proactif du token lorsque celui-ci approche de son expiration.
Intercepteur de Réponse (Erreurs 401) : Si le serveur renvoie un code HTTP 401 Unauthorized (indiquant que la session a expiré côté serveur), l'intercepteur tente un rafraîchissement automatique du token si l'utilisateur était actif dans les 5 dernières minutes ; sinon, il efface les données de session du store Vuex et redirige l'agent vers /login.

2.5. Tableaux de Données Réactifs (`src/tables.js`)

Fichier utilitaire regroupant les définitions de colonnes, filtres, tris et formatages de données réactifs. Il assure une interface homogène pour l'affichage des listes de télémétrie, des machines, des anomalies et des résumés d'appels.

3. Parcours Utilisateurs Clés & Interactions

L'interface propose des workflows optimisés pour les gestionnaires d'équipes d'appels :

3.1. Workflow d'Onboarding de l'Organisation (`/onboarding`)

Lors de sa première connexion, un nouvel administrateur d'organisation est guidé à travers un entonnoir de configuration :

Validation Juridique : Signature électronique des CGU et formulaires de consentement RGPD concernant le traitement de télémétrie.
Création du Premier Groupe : Saisie du nom de la première équipe opérationnelle (ex: "Équipe Support").
Provisionnement des Clés : Génération de la première licence logicielle à déployer sur les terminaux de bureau.

3.2. Tableau de Bord Décisionnel

Affiche sous forme de graphiques élégants les indicateurs clés de performance (KPI) issus de users_summaries :

Suivi Vocale : Histogrammes montrant la médiane de hauteur vocale (Pitch) avant et après traitement pour évaluer l'effet apaisant sur les clients.
Taux de Télémétrie : Volume quotidien de paquets collectés, aidant à valider que l'application de bureau tourne bien sur tous les postes configurés.

3.3. Gestion Massive des Agents (Actions Groupées)

Dans la vue /dashboard/group/:id/users, l'interface propose une grille d'administration des comptes agents :

Chaque ligne d'agent dispose d'une case à cocher (Checkbox).
Une barre d'action groupée apparaît au bas de l'écran en cas de sélections multiples.
Action Métier : Permet aux superviseurs d'attribuer ou de retirer des labels (ex: basculer 50 agents d'un coup vers le label "Test A/B - Phase 1"), évitant ainsi d'avoir à modifier les comptes un par un.

3.4. Gestion des Anomalies de Parc

La vue /issues liste en temps réel les incidents matériels et logiciels détectés sur le parc de machines (liée aux données de machines_issues). Un badge de couleur indique le niveau de criticité de l'anomalie :

Critique (Rouge) : Conflit d'instances multiples concurrentes dans une même session Windows (MULTI_INSTANCES_SAMESESSION) ou crash du moteur audio (AUDIO_SETUP_FAILED).
Moyenne (Orange) : Microphone physique perdu ou déconnecté en cours d'appel (AUDIO_DEVICE_LOST).
Basse (Bleu) : Postes de travail exécutant des versions obsolètes logicielles.

4. Démarrage Local du Frontend

Placez-vous dans le dossier de l'application cliente :
```
cd client-alta.alta-voce.tech/client-alta
```
Installez les dépendances requises :
```
npm install
```

Copiez le fichier d'environnement et configurez l'URL cible de votre backend Laravel local :

cp .env.example .env
# Assurez-vous d'avoir dans .env : VUE_APP_API_URL=http://localhost:8000/

Lancez le serveur de développement local :
```
npm run dev
```
Ouvrez votre navigateur sur l'adresse retournée (généralement http://localhost:5173).