1. Connexion & session

Se connecter

1. Ouvrez l’application dans votre navigateur.
2. Saisissez votre email et votre mot de passe.
3. Cliquez sur le bouton de connexion.
4. Après authentification, la société active et l’exercice sont chargés.

Se déconnecter

Utilisez l’action Déconnexion dans la barre supérieure. Cela invalide la session côté serveur.

Mot de passe oublié / changement

Pour changer votre mot de passe une fois connecté : Paramètres → Mot de passe.

2. Interface générale

Conventions d’écran

• Tableaux avec filtres, recherche et actions par ligne
• Boutons + Nouveau / Ajouter pour créer
• Statuts affichés sous forme de pastilles (Brouillon, Validé, Payée…)
• Exports PDF / Excel / Impression selon l’écran

3. Multi-sociétés

L’application gère plusieurs entités du groupe. Chaque document, écriture et stock est isolé par société.

Changer de société

1. Cliquez sur le sélecteur Société active en haut.
2. Choisissez la société autorisée pour votre compte.
3. Attendez le rechargement des données.

Les utilisateurs SUPER_ADMIN peuvent accéder à toutes les sociétés. Les autres utilisateurs ne voient que les sociétés qui leur sont attribuées.

Création / édition des sociétés : menu Paramètres → Sociétés.

4. Rôles & permissions

Modules de permission

Gestion : Paramètres → Utilisateurs & privilèges (réservé au SUPER_ADMIN). Le profil, les infos société et le mot de passe restent accessibles à tout utilisateur connecté.

5. Accueil & tableaux de bord

Accueil /

Vue de pilotage : indicateurs OHADA/SYSCOHADA, alertes de workflows (factures ouvertes, validations en attente, etc.) et raccourcis vers les écrans clés.

Tableau de bord financier /tresorerie/dashboard-daf

Vision DAF consolidée de la trésorerie et de la santé financière de la société active.

6. Comptabilité générale

7. Tiers

Balances âgées

Analyse de l’ancienneté des créances (clients) et dettes (fournisseurs) par tranches d’âge. Utile pour le recouvrement et le pilotage trésorerie.

8. Cycle achats

8.1 Commandes fournisseurs

1. Ouvrez Achats & ventes → Commandes fournisseurs.
2. Créez un Nouveau bon : fournisseur, lignes articles, quantités, prix.
3. Enregistrez en Brouillon puis validez si nécessaire.

Statuts fréquents : Brouillon Validé Réception partielle Réception totale Facturé Clôturé Annulé

8.2 Réceptions fournisseurs

• Réception depuis une commande (totale ou partielle)
• Ou BR manuel
• Validation de réception → entrée en stock SYSCOHADA
• PDF / Impression disponibles

8.3 Factures fournisseurs

1. Créez une facture depuis une réception ou manuellement.
2. À l’enregistrement, la facture est en général Comptabilisée avec écriture automatique.
3. Lancez le paiement (« Oui, payer maintenant ») ou passez par Règlements fournisseurs.

Statuts paiement : Impayée Partiellement payée Payée

8.4 Avoirs fournisseurs

Notes de crédit fournisseur pour retours, rabais ou corrections.

9. Cycle ventes

9.1 Devis

1. Créez un devis client avec les lignes de produits / services.
2. Soumettez puis validez (ou rejetez).
3. Utilisez Transformer en BC pour générer la commande client.

Statuts : Brouillon Soumis Validé Rejeté Transformé en BC

9.2 Commandes clients

• Soumettre → Valider / Rejeter
• Livrer : génère un bon de livraison
• Facturer : crée la facture client

9.3 Livraisons clients

Création depuis commande ou manuelle. Après validation : sortie de stock et possibilité de facturer.

9.4 Factures clients

Facture comptabilisée avec écriture automatique, puis Valider l’encaissement ou passer par Règlements clients.

9.5 Avoirs clients

Avoirs de vente pour retours, remises ou annulations partielles.

10. Stocks

Articles

Catalogue produits / services : référence, libellé, comptes associés, suivi de stock, quantités.

Tarifs fournisseurs

Définissez les prix d’achat par fournisseur pour faciliter les commandes.

Mouvements de stock

Traçabilité des entrées, sorties et ajustements (souvent automatiques).

Valorisation

Valorisation selon la méthode CMUPACE (coût moyen pondéré).

11. Trésorerie

Prévisions

Anticipation J+30 / J+60 / J+90. Vous pouvez générer des prévisions à partir des factures ouvertes ou ajouter des lignes manuelles.

Règlements clients

1. Choisissez le client et la (les) facture(s) à encaisser.
2. Indiquez le mode (espèces, virement, chèque, OM, MoMo…), le compte de trésorerie et le montant.
3. Enregistrez : écriture + lettrage (lettré / partiellement lettré).

Règlements fournisseurs

Même logique en décaissement : payer une facture ou le solde restant.

Rapprochement bancaire

• Créer un rapprochement sur un compte banque / caisse
• Importer un relevé
• Comparer solde relevé vs solde comptable
• Analyser les écarts (Rapproché / Écart à analyser)

12. Contrôle de gestion

13. Déclarations & états

États financiers

Bilan et compte de résultat périodiques (mois, trimestre, semestre, exercice) pour la société active.

Déclaration TVA

Synthèse TVA collectée / déductible. Préparez la déclaration, enregistrez, exportez en PDF ou Excel.

Immobilisations

• Ajouter un actif (valeur, durée, compte…)
• Générer les dotations aux amortissements

14. VAN & outils

Validations VAN

Demandes provenant des systèmes RH, Logistique ou BTP. Pour chaque demande :

• Valider → génère les écritures comptables associées
• Rejeter → refuse le flux

Statuts : PENDING VALIDATED REJECTED

Import de données

Import Excel des référentiels :

• Clients
• Fournisseurs
• Produits
• Plan comptable

Modes : Ajouter (append) ou Remplacer. Téléchargez d’abord le modèle, remplissez-le, puis lancez l’import.

Sauvegarde / restauration

Menu VAN & intégrations → Sauvegarde / restauration (/outils/sauvegarde).

Procédure de sauvegarde (JSON applicatif)

1. Connectez-vous avec un compte autorisé (permissions intégrations ou paramètres).
2. Vérifiez la société active si vous travaillez en multi-sociétés.
3. Ouvrez Sauvegarde / restauration.
4. Contrôlez les compteurs affichés (clients, fournisseurs, écritures, factures).
5. Cliquez sur Télécharger la sauvegarde.
6. Conservez le fichier van-compta-backup-AAAA-MM-JJ.json hors du poste (disque externe, cloud sécurisé).

Procédure de restauration (JSON applicatif)

1. Ouvrez Sauvegarde / restauration.
2. Cliquez sur Restaurer un fichier.
3. Sélectionnez un fichier .json de sauvegarde VAN valide.
4. Attendez le message de confirmation « Restauration terminée ».
5. Rechargez la page si nécessaire et contrôlez quelques écrans clés (clients, factures, écritures).

En production, cette sauvegarde JSON est un complément : la sauvegarde de référence reste le dump MySQL + le dossier uploads/ (voir document d’exploitation).

15. Paramètres

Hub Paramètres

• Mon profil — identité utilisateur
• Informations société — raison sociale, RCCM, NIU, adresse, devise, exercice, logo…
• Mot de passe — changement sécurisé
• Utilisateurs & privilèges — SUPER_ADMIN uniquement

Devises

Taux de change (référentiel BEAC) et convertisseur.

Consolidation

Vue groupe : détection des transactions intra-groupe, éliminations, validation et saisie manuelle si besoin.

16. Bonnes pratiques

1. Toujours vérifier la société active avant de saisir.
2. Respecter l’ordre des workflows (ne pas facturer sans réception / livraison si le processus l’impose).
3. Équilibrer chaque écriture manuelle (Débit = Crédit).
4. Clôturer les mois une fois les contrôles terminés.
5. Utiliser les règlements pour le lettrage plutôt que des OD « brutes ».
6. Exporter / sauvegarder avant une restauration ou un import « Remplacer ».
7. Limiter les comptes SUPER_ADMIN ; attribuer des permissions précises aux assistants.
8. Changer immédiatement tout mot de passe par défaut.

17. FAQ

1. Stack technique

Navigateur (React CRA :3000)
        │  HTTPS + cookies (withCredentials)
        ▼
API Express (:4000)  ── /api/* ──► Controllers / Services / Modules
        │
        ▼
MySQL 8  (van_comptabilite)
        ▲
uploads/ (médias privés via /api/media ou /uploads signés)

2. Structure du dépôt

comptable-ohadas/
├── package.json                 # Frontend CRA
├── .env / .env.example
├── public/                      # PWA, assets
├── src/                         # Frontend React
│   ├── app/                     # providers, router
│   ├── components/              # écrans métier
│   ├── modules/                 # workspaces UI
│   ├── context/                 # Auth, notifications
│   ├── services/                # apiClient, auth, sync, domain
│   └── shared/config/           # menu, pageRegistry
├── backend/
│   ├── package.json
│   ├── .env / .env.example
│   └── src/
│       ├── server.js            # bootstrap + listen
│       ├── app.js               # Express pipeline
│       ├── bootstrap/           # schéma, OHADA, validate prod
│       ├── config/              # database, jwt
│       ├── routes/api/          # REST + permissions
│       ├── controllers/
│       ├── models/              # Sequelize (~49)
│       ├── middlewares/
│       ├── services/            # posting, stock, media, auth
│       ├── modules/             # achats, ventes, trésorerie…
│       ├── utils/               # companyScope, cookies, upload
│       └── seeders/
├── guide/                       # Guide utilisateur HTML
└── architecture/                # Ce document

Une version courte existe aussi dans docs/architecture.md.

3. Frontend

Entrée & routage

• src/index.js → providers → router
• src/app/router.jsx : /login + routes protégées
• Routes métier : src/shared/config/pageRegistry.js
• Menu : src/shared/config/menuSections.js

Couche services

4. Backend

Pipeline Express

backend/src/server.js charge l’env, valide la prod, authentifie Sequelize, synchronise le schéma (alter: false), bootstrap OHADA, puis écoute 0.0.0.0:PORT.

backend/src/app.js enchaîne : security headers → rate limit → cookies → CORS credentials → JSON → CSRF Origin → morgan → routes médias → /api → errorHandler.

Montage des routes

backend/src/routes/api/index.js : helper mount(path, permissions, router) = auth + requireAnyPermission.

Middlewares clés

5. Authentification & sessions

Services : backend/src/services/authToken.service.js, backend/src/utils/authCookies.js, backend/src/controllers/authController.js.

6. Multi-société (tenant)

1. JWT / cookies authentifient l’utilisateur.
2. Société demandée via X-Company-Id (sinon JWT / société par défaut).
3. canUseCompany : SUPER_ADMIN libre ; sinon société autorisée / groupe.
4. req.companyId propage le scope à tous les contrôleurs.
5. Helpers scopedWhere, findByPkInCompany, assertBelongsToCompany empêchent l’IDOR.

7. Médias & uploads

• Plus de express.static public sur /uploads.
• Accès : GET /uploads/:subdir/:filename et GET /api/media/....
• Autorisation : signature HMAC ?exp=&sig= ou session JWT.
• Sous-dossiers whitelist : products, companies.
• Upload : JPEG / PNG / WebP, max 2 Mo, magic bytes, noms aléatoires.
• Fichiers : services/mediaAccess.service.js, utils/uploadSecurity.js, middlewares/secureImageUpload.js.

8. Intégrations VAN

Préfixe /api/integrations/van (vanIntegrations.routes.js).

• M2M : header X-API-Key = VAN_INTEGRATION_API_KEY
• Optionnel : X-Van-Timestamp + X-Van-Signature (HMAC-SHA256, skew 5 min)
• Ingestion : RH, logistique, BTP
• Validation humaine : endpoints pending avec JWT + permission integrations / accounting

9. Modèle de données (Sequelize)

Index : backend/src/models/index.js — tables underscored + timestamps.

10. Comptabilité automatique

11. Variables d’environnement

Frontend (racine)

Backend

En production, le démarrage est refusé si secrets faibles ou CORS * (bootstrap/validateProductionEnv.js).

12. Contrôles de sécurité

1. Cookies httpOnly + CORS credentials + contrôle Origin/Referer
2. JWT court + refresh opaque hashé + rotation + anti-reuse
3. Révocation via tokenVersion
4. Rate limiting login / refresh / API
5. Permissions granulaires par module
6. Scoping companyId anti-IDOR
7. Headers sécurité (+ HSTS en prod)
8. Médias non publics (signature ou session)
9. Uploads whitelist + magic bytes
10. Intégrations : clé + HMAC optionnel timing-safe
11. Validation env production
12. Audit log sur opérations sensibles
13. Mots de passe bcrypt + politique de complexité

13. Diagramme de cas d’utilisation

Acteurs principaux et cas d’utilisation métier de VAN Comptabilité. Les inclusions (include) représentent des prérequis techniques (authentification, choix de société).

Vue globale

flowchart TB
  subgraph Acteurs
    SA((SUPER_ADMIN))
    AD((ADMIN / Comptable))
    AS((Assistant))
    DAF((DAF / Direction))
    SYS((Systèmes VAN
RH / Logistique / BTP))
  end

  subgraph Authentification
    UC_LOGIN[Se connecter]
    UC_LOGOUT[Se déconnecter]
    UC_PWD[Changer mot de passe]
    UC_CO[Changer de société]
  end

  subgraph Comptabilite
    UC_PC[Gérer plan comptable]
    UC_ECR[Saisir écritures]
    UC_LIV[Consulter livres / balance]
    UC_CLO[Clôturer une période]
  end

  subgraph Achats
    UC_BC[Créer commande fournisseur]
    UC_BR[Réceptionner marchandises]
    UC_FA[Facturer un achat]
    UC_PA[Payer un fournisseur]
  end

  subgraph Ventes
    UC_DV[Émettre un devis]
    UC_BCV[Valider commande client]
    UC_BL[Livrer un client]
    UC_FV[Facturer une vente]
    UC_ENC[Encaisser un client]
  end

  subgraph Stocks
    UC_ART[Gérer articles]
    UC_MOV[Consulter mouvements]
    UC_VAL[Valoriser stocks CMUPACE]
  end

  subgraph Tresorerie
    UC_PREV[Prévoir trésorerie]
    UC_RAP[Rapprocher banque]
  end

  subgraph Pilotage
    UC_KPI[Consulter tableaux de bord]
    UC_TVA[Préparer déclaration TVA]
    UC_EF[Consulter états financiers]
    UC_BUD[Suivre budget / projets]
  end

  subgraph Administration
    UC_USER[Gérer utilisateurs et permissions]
    UC_SOC[Gérer sociétés]
    UC_IMP[Importer données Excel]
    UC_BAK[Sauvegarder / restaurer]
  end

  subgraph Integrations
    UC_ING[Injecter flux RH / Logistique / BTP]
    UC_VALV[Valider ou rejeter demandes VAN]
  end

  SA --> UC_USER
  SA --> UC_SOC
  SA --> UC_LOGIN
  AD --> UC_LOGIN
  AD --> UC_PC
  AD --> UC_ECR
  AD --> UC_BC
  AD --> UC_BR
  AD --> UC_FA
  AD --> UC_PA
  AD --> UC_DV
  AD --> UC_BCV
  AD --> UC_BL
  AD --> UC_FV
  AD --> UC_ENC
  AD --> UC_ART
  AD --> UC_RAP
  AD --> UC_TVA
  AD --> UC_VALV
  AD --> UC_IMP
  AS --> UC_LOGIN
  AS --> UC_BC
  AS --> UC_BR
  AS --> UC_DV
  AS --> UC_LIV
  DAF --> UC_LOGIN
  DAF --> UC_KPI
  DAF --> UC_PREV
  DAF --> UC_EF
  DAF --> UC_BUD
  DAF --> UC_CLO
  SYS --> UC_ING

  UC_BC -.->|include| UC_LOGIN
  UC_FA -.->|include| UC_BR
  UC_PA -.->|include| UC_FA
  UC_FV -.->|include| UC_BL
  UC_ENC -.->|include| UC_FV
  UC_VALV -.->|include| UC_LOGIN
  UC_ING -.->|API key| SYS
        

Cycle achats (zoom)

flowchart LR
  Comptable((Comptable))
  UC1([Créer BC fournisseur])
  UC2([Valider réception BR])
  UC3([Comptabiliser facture achat])
  UC4([Enregistrer règlement])
  UC5([Générer écriture SYSCOHADA])
  UC6([Mettre à jour stock])

  Comptable --> UC1
  Comptable --> UC2
  Comptable --> UC3
  Comptable --> UC4
  UC2 -->|include| UC6
  UC3 -->|include| UC5
  UC4 -->|include| UC5
  UC2 --> UC3
  UC3 --> UC4
        

Cycle ventes (zoom)

flowchart LR
  Commercial((Commercial / Comptable))
  V1([Créer devis])
  V2([Transformer en BC])
  V3([Livrer BL])
  V4([Facturer client])
  V5([Encaisser])
  V6([Sortie stock])
  V7([Écritures VTE / BNQ])

  Commercial --> V1
  Commercial --> V2
  Commercial --> V3
  Commercial --> V4
  Commercial --> V5
  V1 --> V2 --> V3 --> V4 --> V5
  V3 -->|include| V6
  V4 -->|include| V7
  V5 -->|include| V7
        

14. Diagramme de classes

Classes dérivées des modèles Sequelize (backend/src/models/). Attributs essentiels uniquement ; toutes les entités métier portent un companyId (multi-tenant).

Diagramme de classes général

Vue d’ensemble du domaine : société, utilisateurs, référentiels, cycles achats / ventes, stocks, écritures et trésorerie.

classDiagram
  direction TB

  class Company {
    +id
    +name
    +currency
    +companyId scope
  }
  class User {
    +email
    +role
    +permissions
    +tokenVersion
  }
  class Account {
    +number
    +name
    +classCode
  }
  class Journal {
    +code
    +name
  }
  class Client {
    +code
    +name
  }
  class Supplier {
    +code
    +name
  }
  class Product {
    +sku
    +trackStock
    +stockQuantity
  }
  class PurchaseOrder {
    +number
    +status
  }
  class GoodsReceipt {
    +number
    +status
  }
  class PurchaseInvoice {
    +number
    +status
    +totalAmount
  }
  class SalesQuote {
    +number
    +status
  }
  class SalesOrder {
    +number
    +status
  }
  class DeliveryNote {
    +number
    +status
  }
  class SalesInvoice {
    +number
    +status
    +totalAmount
  }
  class StockMovement {
    +quantity
    +unitCost
    +sourceType
  }
  class AccountingEntry {
    +number
    +sourceType
    +sourceId
  }
  class EntryLine {
    +debit
    +credit
  }
  class Payment {
    +amount
    +method
  }
  class PaymentAllocation {
    +allocatedAmount
  }
  class BankAccount {
    +code
    +name
  }

  Company "1" --> "*" User : emploie
  Company "1" --> "*" Account
  Company "1" --> "*" Journal
  Company "1" --> "*" Client
  Company "1" --> "*" Supplier
  Company "1" --> "*" Product
  Company "1" --> "*" BankAccount

  Supplier "1" --> "*" PurchaseOrder
  PurchaseOrder "1" --> "*" GoodsReceipt
  GoodsReceipt "1" --> "*" PurchaseInvoice
  Product "1" --> "*" StockMovement
  GoodsReceipt ..> StockMovement : génère IN

  Client "1" --> "*" SalesQuote
  SalesQuote "1" --> "0..1" SalesOrder
  SalesOrder "1" --> "*" DeliveryNote
  DeliveryNote "1" --> "*" SalesInvoice
  DeliveryNote ..> StockMovement : génère OUT

  Journal "1" --> "*" AccountingEntry
  AccountingEntry "1" --> "*" EntryLine
  EntryLine --> Account
  PurchaseInvoice ..> AccountingEntry : poste ACH
  SalesInvoice ..> AccountingEntry : poste VTE
  Payment ..> AccountingEntry : poste BNQ

  BankAccount "1" --> "*" Payment
  Payment "1" --> "*" PaymentAllocation
  PaymentAllocation --> PurchaseInvoice : lettrage
  PaymentAllocation --> SalesInvoice : lettrage
        

Identité & multi-société

classDiagram
  class Company {
    +id
    +name
    +rccm
    +niu
    +currency
    +parentCompanyId
  }
  class User {
    +id
    +email
    +passwordHash
    +role
    +permissions
    +tokenVersion
    +companyId
  }
  class RefreshToken {
    +id
    +tokenHash
    +expiresAt
    +revokedAt
    +userId
  }
  class AuditLog {
    +id
    +action
    +entity
    +payload
    +userId
    +companyId
  }
  Company "1" --> "*" User : emploie
  User "1" --> "*" RefreshToken : sessions
  Company "1" --> "*" Company : filiales
  User --> AuditLog : produit
  Company --> AuditLog : scope
        

Référentiel comptable & écritures

classDiagram
  class Account {
    +code
    +label
    +class
    +type
    +companyId
  }
  class Journal {
    +code
    +label
    +type
    +companyId
  }
  class FiscalYear {
    +year
    +status
    +companyId
  }
  class AccountingPeriod {
    +month
    +status
    +fiscalYearId
  }
  class AccountingEntry {
    +number
    +date
    +label
    +sourceType
    +sourceId
    +journalId
    +companyId
  }
  class EntryLine {
    +debit
    +credit
    +accountId
    +entryId
  }
  Company "1" --> "*" Account : possède
  Company "1" --> "*" Journal : possède
  Company "1" --> "*" FiscalYear : possède
  FiscalYear "1" --> "*" AccountingPeriod
  Journal "1" --> "*" AccountingEntry
  AccountingEntry "1" --> "*" EntryLine
  EntryLine --> Account
  note for AccountingEntry "Idempotence ensureEntry(sourceType, sourceId)"
        

Achats & stocks

classDiagram
  class Supplier {
    +code
    +name
    +collectiveAccountId
  }
  class Product {
    +sku
    +name
    +trackStock
    +stockQty
    +cmp
  }
  class PurchaseOrder {
    +number
    +status
    +supplierId
  }
  class PurchaseOrderLine {
    +qty
    +unitPrice
    +productId
  }
  class GoodsReceipt {
    +number
    +status
    +purchaseOrderId
  }
  class GoodsReceiptLine {
    +qtyReceived
    +productId
  }
  class PurchaseInvoice {
    +number
    +status
    +goodsReceiptId
    +totalTTC
  }
  class PurchaseInvoiceLine {
    +qty
    +amount
  }
  class StockMovement {
    +type
    +qty
    +unitCost
    +productId
    +sourceType
  }
  Supplier "1" --> "*" PurchaseOrder
  PurchaseOrder "1" --> "*" PurchaseOrderLine
  PurchaseOrder "1" --> "*" GoodsReceipt
  GoodsReceipt "1" --> "*" GoodsReceiptLine
  GoodsReceipt "1" --> "*" PurchaseInvoice
  PurchaseInvoice "1" --> "*" PurchaseInvoiceLine
  Product "1" --> "*" PurchaseOrderLine
  Product "1" --> "*" StockMovement
  GoodsReceipt --> StockMovement : génère IN
        

Ventes & trésorerie

classDiagram
  class Client {
    +code
    +name
    +collectiveAccountId
  }
  class SalesQuote {
    +number
    +status
    +clientId
  }
  class SalesOrder {
    +number
    +status
    +salesQuoteId
  }
  class DeliveryNote {
    +number
    +status
    +salesOrderId
  }
  class SalesInvoice {
    +number
    +status
    +totalTTC
  }
  class Payment {
    +number
    +amount
    +method
    +direction
    +bankAccountId
  }
  class PaymentAllocation {
    +amount
    +invoiceId
    +paymentId
  }
  class BankAccount {
    +code
    +label
    +type
  }
  class PurchaseInvoice {
    +number
    +status
    +totalTTC
  }
  Client "1" --> "*" SalesQuote
  SalesQuote "1" --> "0..1" SalesOrder
  SalesOrder "1" --> "*" DeliveryNote
  DeliveryNote "1" --> "*" SalesInvoice
  Client "1" --> "*" SalesInvoice
  Payment "1" --> "*" PaymentAllocation
  PaymentAllocation --> SalesInvoice : lettrage vente
  PaymentAllocation --> PurchaseInvoice : lettrage achat
  BankAccount "1" --> "*" Payment
        

Couches applicatives (backend)

classDiagram
  class Router {
    +mount(path, permissions)
  }
  class AuthMiddleware {
    +verifyJWT()
    +resolveCompany()
  }
  class Controller {
    +create()
    +update()
    +remove()
  }
  class DomainService {
    +postPurchaseInvoice()
    +applyGoodsReceiptStock()
    +postPayment()
  }
  class SequelizeModel {
    +findAll()
    +create()
  }
  Router --> AuthMiddleware : protège
  Router --> Controller : délègue
  Controller --> DomainService : métier
  DomainService --> SequelizeModel : persiste
  AuthMiddleware --> SequelizeModel : User / Company
        

15. Diagrammes de séquence

Login

sequenceDiagram
  participant U as Utilisateur
  participant F as React
  participant A as API /auth
  participant DB as MySQL
  U->>F: email + password
  F->>A: POST /auth/login
  A->>DB: User + bcrypt
  A->>DB: RefreshToken.create
  A-->>F: Set-Cookie van_at / van_rt
  F->>A: GET /auth/me
  A-->>F: user + société
        

Si Mermaid ne charge pas hors-ligne, le flux est décrit dans le tableau Auth ci-dessus.

Achats : BC → BR → facture → règlement

sequenceDiagram
  participant F as Frontend
  participant API as Controllers
  participant Stock as stockPosting
  participant Acc as accountingPosting
  participant DB as MySQL
  F->>API: POST purchase-orders
  API->>DB: PO APPROVED
  F->>API: POST goods-receipts
  API->>Stock: applyGoodsReceiptStock
  Stock->>DB: StockMovement IN
  Stock->>Acc: écriture stock 311/603
  F->>API: POST purchase-invoices
  API->>Acc: postPurchaseInvoice
  Acc->>DB: Entry ACH 601/445/401
  F->>API: POST payments
  API->>Acc: postPayment
  Acc->>DB: Entry BNQ 401/521
  API->>DB: invoice PAID / PARTIAL
        

Accès média

sequenceDiagram
  participant C as Client
  participant API as serveMedia
  participant S as mediaAccess
  participant FS as uploads/
  C->>API: GET /api/media/... ?exp&sig
  API->>S: whitelist + vérif
  alt Signature HMAC OK
    S-->>API: autorisé
  else Session JWT OK
    S-->>API: autorisé
  else
    API-->>C: 401
  end
  API->>FS: resolveSafeLocalPath
  API-->>C: fichier + nosniff
        

16. Déploiement

Diagramme de déploiement (production)

Vue des nœuds physiques / logiques, artefacts déployés et protocoles. Les cookies d’auth (van_at / van_rt) transitent en HTTPS entre le navigateur et l’API.

flowchart TB
  subgraph Clients["Nœud : Postes utilisateurs"]
    BR["« device » Navigateur
Chrome / Firefox / Safari"]
  end

  subgraph Edge["Nœud : Frontière Internet / TLS"]
    DNS["DNS
api.vancomptabilite.com"]
    PX["« device » Reverse proxy
Nginx / Caddy
TLS 1.2+"]
  end

  subgraph AppTier["Nœud : Serveur applicatif"]
    WEB["« artifact » Frontend SPA
build/ React CRA
fichiers statiques"]
    API["« artifact » API Node.js
van-comptabilite-backend
Express :4000
PM2 / systemd"]
    UP["« artifact » Stockage médias
uploads/products
uploads/companies"]
  end

  subgraph DataTier["Nœud : Serveur de données"]
    DB[("« database » MySQL 8
van_comptabilite")]
  end

  subgraph Ext["Nœuds externes VAN"]
    RH["RH"]
    LOG["Logistique"]
    BTP["BTP"]
  end

  BR -->|HTTPS| DNS
  DNS --> PX
  PX -->|static HTTPS| WEB
  PX -->|/api HTTPS| API
  WEB -.->|Axios cookies
withCredentials| API
  API -->|TCP 3306| DB
  API --- UP
  RH -->|X-API-Key HTTPS| API
  LOG -->|X-API-Key HTTPS| API
  BTP -->|X-API-Key HTTPS| API
        

Diagramme de déploiement (développement local)

flowchart LR
  subgraph DevMachine["Nœud : Machine développeur"]
    B["Navigateur :3000"]
    F["« artifact » yarn start
react-scripts"]
    A["« artifact » npm run dev
Express :4000"]
    M[("MySQL local
:3306")]
    U["uploads/"]
  end

  B --> F
  F -->|http://localhost:4000/api
cookies| A
  A --> M
  A --- U
        

Artefacts & responsabilités

VAN Comptabilité — Document d’architecture technique — React · Express · Sequelize · MySQL · OHADA / SYSCOHADA — réalisé par DOWHILE SARL.