OIA Client

Application web de gestion de communication et de marketing digital développée avec React, TypeScript et Vite.

📋 Description

OIA (Outils d'Intelligence Artificielle) est une plateforme complète de gestion de communication qui permet de :

• Gérer les emails (boîte mail, synchronisation, factures)
• Créer et gérer des templates d'emails et de posts pour réseaux sociaux
• Effectuer du publipostage (mailing et réseaux sociaux)
• Gérer les interactions sociales
• Créer et gérer des devis
• Consulter les analytics
• Gérer les abonnements et paramètres

🚀 Technologies

Frontend

• React 19 - Bibliothèque UI
• TypeScript - Typage statique
• Vite - Build tool et dev server
• Tailwind CSS - Framework CSS
• Redux Toolkit - Gestion d'état
• React Router - Routage
• React Hook Form - Gestion de formulaires
• Axios - Client HTTP
• i18next - Internationalisation

UI Components

• Radix UI - Composants accessibles
• Framer Motion - Animations
• Lucide React - Icônes
• React Big Calendar - Calendrier
• MDX Editor - Éditeur markdown
• React Quill - Éditeur de texte riche

Autres

• Stripe - Paiements
• Socket.io - Communication temps réel
• date-fns - Manipulation de dates
• JWT Decode - Authentification

📦 Installation

Prérequis

• Node.js 22 ou supérieur
• npm ou yarn

Étapes d'installation

1. Cloner le dépôt :

git clone <repository-url>
cd oia-client

2. Installer les dépendances :

npm install

3. Configurer les variables d'environnement : Créer un fichier .env à la racine du projet avec les variables nécessaires.

4. Lancer le serveur de développement :

npm run dev

L'application sera accessible sur http://localhost:5173 (ou le port configuré par Vite).

🛠️ Scripts disponibles

• npm run dev - Lance le serveur de développement avec HMR
• npm run build - Compile l'application pour la production
• npm run preview - Prévisualise la build de production
• npm run lint - Exécute ESLint pour vérifier le code

🐳 Déploiement avec Docker

Build et exécution

1. Construire l'image Docker :

docker build -t oia-client .

2. Lancer avec Docker Compose :

docker-compose up -d

L'application sera accessible sur http://localhost:4173.

Structure Docker

Le Dockerfile utilise un build multi-stage :

• Stage 1 (deps) : Installation des dépendances
• Stage 2 (builder) : Compilation de l'application
• Stage 3 (prod) : Serveur Nginx pour servir l'application

📁 Structure du projet

oia-client/
├── src/
│   ├── components/          # Composants React
│   │   ├── Abonnement/      # Gestion des abonnements
│   │   ├── admin/           # Administration
│   │   ├── back-office/     # Back-office
│   │   ├── create-template/ # Création de templates
│   │   ├── devis/           # Gestion des devis
│   │   ├── email-inbox/     # Boîte mail
│   │   ├── email-inbox-v2/  # Boîte mail v2
│   │   ├── form-builder/    # Constructeur de formulaires
│   │   ├── mailing/         # Publipostage
│   │   ├── paiements/       # Paiements
│   │   ├── rag/             # RAG / base de connaissances
│   │   ├── social-media/    # Réseaux sociaux
│   │   ├── whatsapp/        # WhatsApp
│   │   └── ...
│   ├── pages/               # Pages de l'application
│   ├── common/              # Composants UI partagés
│   ├── hooks/               # Hooks personnalisés
│   ├── redux/               # Store Redux et slices
│   ├── services/            # Services API
│   ├── providers/           # Providers React
│   ├── contexts/            # Contextes React
│   ├── router/              # Configuration des routes
│   ├── i18n/                # Internationalisation
│   ├── observability/       # Observabilité / monitoring
│   ├── configs/             # Configurations & traductions
│   ├── constants/           # Constantes
│   ├── entity/              # Entités métier
│   ├── types/               # Types TypeScript
│   ├── utils/               # Utilitaires
│   ├── assets/              # Assets source
│   └── tutorial/            # Tutoriels / onboarding
├── public/                  # Assets statiques
├── scripts/                 # Scripts utilitaires
├── docs/                    # Documentation
├── Dockerfile               # Configuration Docker
├── docker-compose.yaml      # Configuration Docker Compose
└── nginx.conf               # Configuration Nginx

🔐 Authentification

L'application utilise JWT pour l'authentification. Les routes sont protégées via le composant ProtectedRoute.

🌐 Internationalisation

L'application supporte plusieurs langues via i18next. Les traductions sont stockées dans src/configs/translations/.

📝 Fonctionnalités principales

Communication

• Boîte mail : Gestion et synchronisation des emails
• Messages réseaux : Gestion des interactions sur les réseaux sociaux
• Templates : Création et gestion de templates d'emails et de posts
• Mailing : Publipostage d'emails
• Publipostage : Publication sur les réseaux sociaux

Gestion

• Devis : Création et gestion de devis (avec support audio, photo, import de fichiers)
• Analytics : Tableaux de bord et statistiques
• Paramètres : Configuration de l'application
• Abonnements : Gestion des abonnements (intégration Stripe)

🔧 Configuration

Vite

Le serveur de développement est configuré pour accepter les connexions depuis plusieurs hosts (voir vite.config.ts).

Production (cache navigateur et SPA)

Après un déploiement, un index.html mis en cache alors que les chunks JS ont changé peut provoquer des erreurs de chargement de modules. Recommandations :

• Ne pas servir index.html avec un cache long : Cache-Control: no-cache ou max-age=0, must-revalidate.
• Autoriser un cache long pour les assets hashés (/assets/*.js, etc.).
• Vérifier la configuration Nginx / CDN / CloudFront en conséquence.
• Côté client, en cas d’erreur de chunk, l’app peut recharger avec un paramètre d’URL _oia_v= pour forcer un nouvel index.html ; il est retiré de la barre d’adresse après chargement (voir src/observability/reloadWithCacheBust.ts).
• Le client envoie uniquement les erreurs (level: "error") vers POST …/api/logs — voir docs/API_CLIENT_LOGS.md pour le contrat détaillé (entrée / sortie).

ESLint

La configuration ESLint utilise TypeScript ESLint avec des règles recommandées. Pour activer des règles plus strictes, voir la configuration dans eslint.config.js.

📄 Licence

Tous droits réservés — Quark Développement.

👥 Équipe

[À définir]