diff --git a/CONFIGURATION.md b/CONFIGURATION.md new file mode 100644 index 0000000..22b961c --- /dev/null +++ b/CONFIGURATION.md @@ -0,0 +1,396 @@ +# Documentation de Configuration - Formation Manager Itinova + +**Version:** 7a737c05 +**Date:** 24 novembre 2025 +**Auteur:** Manus AI + +--- + +## Vue d'ensemble + +Ce document détaille toutes les variables de configuration et les paramètres nécessaires pour personnaliser et sécuriser votre installation de Formation Manager Itinova. + +--- + +## Variables d'environnement + +Toutes les variables d'environnement doivent être définies dans le fichier `.env` à la racine du projet. Ce fichier ne doit **jamais** être commité dans le dépôt Git pour des raisons de sécurité. + +### Base de données + +#### DATABASE_URL + +**Type:** String (URL de connexion) +**Requis:** Oui +**Format:** `mysql://utilisateur:motdepasse@hote:port/nombase` + +La chaîne de connexion complète à votre base de données MySQL ou TiDB. Cette URL contient toutes les informations nécessaires pour établir la connexion : utilisateur, mot de passe, hôte, port et nom de la base de données. + +**Exemple:** +``` +DATABASE_URL=mysql://formation_user:SecureP@ssw0rd@localhost:3306/formation_manager +``` + +**Recommandations de sécurité:** +- Utilisez un mot de passe fort d'au moins 16 caractères +- Créez un utilisateur dédié avec uniquement les permissions nécessaires +- Si possible, utilisez une connexion SSL/TLS (ajoutez `?ssl=true` à la fin de l'URL) +- Pour TiDB Cloud, utilisez toujours SSL et les certificats fournis + +--- + +### Authentification et sécurité + +#### JWT_SECRET + +**Type:** String (clé secrète) +**Requis:** Oui +**Longueur minimale:** 32 caractères (64 recommandés) + +La clé secrète utilisée pour signer les tokens JWT (JSON Web Tokens) qui gèrent les sessions utilisateur. Cette clé est critique pour la sécurité de votre application. + +**Génération d'une clé sécurisée:** +```bash +openssl rand -hex 32 +``` + +**Exemple:** +``` +JWT_SECRET=a3f8b2c9d1e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0 +``` + +**Important:** Ne réutilisez jamais la même clé entre différents environnements (développement, staging, production). + +#### OAUTH_SERVER_URL + +**Type:** URL +**Requis:** Oui +**Valeur par défaut:** `https://api.manus.im` + +L'URL du serveur OAuth Manus utilisé pour l'authentification des utilisateurs. Cette valeur ne doit généralement pas être modifiée sauf si vous utilisez une instance Manus personnalisée. + +#### VITE_OAUTH_PORTAL_URL + +**Type:** URL +**Requis:** Oui +**Valeur par défaut:** `https://auth.manus.im` + +L'URL du portail de connexion Manus où les utilisateurs sont redirigés pour s'authentifier. Cette URL est utilisée côté client (frontend). + +--- + +### Identité du propriétaire + +#### OWNER_OPEN_ID + +**Type:** String +**Requis:** Oui + +L'identifiant OpenID unique du propriétaire de l'application. Cet utilisateur aura automatiquement le rôle `admin` lors de sa première connexion et recevra les notifications système. + +**Comment obtenir votre Open ID:** +1. Connectez-vous à votre compte Manus +2. Accédez à votre profil utilisateur +3. Copiez votre Open ID depuis les paramètres du compte + +#### OWNER_NAME + +**Type:** String +**Requis:** Oui + +Le nom complet du propriétaire de l'application, utilisé dans les notifications et les logs système. + +**Exemple:** +``` +OWNER_OPEN_ID=usr_abc123def456 +OWNER_NAME=Olivier Pareige +``` + +--- + +### Configuration de l'application + +#### VITE_APP_ID + +**Type:** String +**Requis:** Oui + +L'identifiant unique de votre application Manus. Cette valeur est fournie lors de la création de votre application sur la plateforme Manus. + +#### VITE_APP_TITLE + +**Type:** String +**Requis:** Non +**Valeur par défaut:** `Gestion des Formations Manager Itinova` + +Le titre de l'application affiché dans l'interface utilisateur, les onglets du navigateur et les emails. Vous pouvez personnaliser ce titre selon vos besoins. + +**Exemple:** +``` +VITE_APP_TITLE=Formation Manager - Itinova +``` + +#### VITE_APP_LOGO + +**Type:** String (chemin relatif) +**Requis:** Non +**Valeur par défaut:** `/logo.png` + +Le chemin vers le fichier logo de l'application. Le fichier doit être placé dans le répertoire `client/public/`. Le logo est affiché dans le header et les emails. + +**Formats supportés:** PNG, SVG, JPG +**Taille recommandée:** 200x50 pixels (ratio 4:1) + +--- + +### APIs Manus intégrées + +Ces variables sont généralement fournies automatiquement par la plateforme Manus lors du déploiement. Elles donnent accès aux services intégrés (LLM, stockage, notifications, etc.). + +#### BUILT_IN_FORGE_API_URL + +**Type:** URL +**Requis:** Oui (pour les fonctionnalités avancées) + +L'URL de base des APIs Manus Forge utilisées côté serveur. + +#### BUILT_IN_FORGE_API_KEY + +**Type:** String (clé API) +**Requis:** Oui (pour les fonctionnalités avancées) + +La clé d'authentification pour accéder aux APIs Manus côté serveur. Cette clé ne doit **jamais** être exposée côté client. + +#### VITE_FRONTEND_FORGE_API_KEY + +**Type:** String (clé API) +**Requis:** Non + +Une clé API distincte pour les appels côté client (frontend). Cette clé a des permissions limitées pour des raisons de sécurité. + +#### VITE_FRONTEND_FORGE_API_URL + +**Type:** URL +**Requis:** Non + +L'URL des APIs Manus accessibles depuis le frontend. + +--- + +### Analytics (optionnel) + +#### VITE_ANALYTICS_ENDPOINT + +**Type:** URL +**Requis:** Non + +L'URL de votre service d'analytics (compatible Plausible/Umami). Si défini, les statistiques de visite seront envoyées à ce endpoint. + +#### VITE_ANALYTICS_WEBSITE_ID + +**Type:** String +**Requis:** Non (sauf si VITE_ANALYTICS_ENDPOINT est défini) + +L'identifiant unique de votre site dans le système d'analytics. + +**Exemple:** +``` +VITE_ANALYTICS_ENDPOINT=https://analytics.example.com +VITE_ANALYTICS_WEBSITE_ID=formation-manager-prod +``` + +--- + +### Configuration de l'environnement + +#### NODE_ENV + +**Type:** String +**Requis:** Oui +**Valeurs possibles:** `development`, `production`, `test` + +Définit l'environnement d'exécution de l'application. En production, cette valeur **doit** être `production` pour activer les optimisations et désactiver les outils de développement. + +#### PORT + +**Type:** Number +**Requis:** Non +**Valeur par défaut:** `3000` + +Le port sur lequel le serveur Express écoute les connexions. Si vous utilisez Nginx comme reverse proxy, gardez la valeur par défaut. + +--- + +## Configuration SMTP (emails) + +L'application utilise un serveur SMTP pour envoyer les emails automatiques (confirmations, rappels, teasers). La configuration SMTP se fait via l'interface web dans la section "Configuration SMTP" du menu. + +### Paramètres SMTP requis + +| Paramètre | Description | Exemple | +|-----------|-------------|---------| +| Hôte SMTP | Adresse du serveur SMTP | `smtp.gmail.com` | +| Port | Port du serveur (25, 465, 587) | `587` | +| Sécurité | TLS ou SSL | `TLS` | +| Utilisateur | Adresse email d'envoi | `noreply@itinova.org` | +| Mot de passe | Mot de passe ou app password | `****************` | + +### Fournisseurs SMTP recommandés + +**Gmail** : Gratuit jusqu'à 500 emails/jour. Nécessite un "App Password" si 2FA activé. +**SendGrid** : 100 emails/jour gratuits, excellent pour la délivrabilité. +**Amazon SES** : Très économique, $0.10 pour 1000 emails. +**Mailgun** : 5000 emails/mois gratuits les 3 premiers mois. + +### Test de configuration + +Après avoir configuré SMTP, utilisez la fonction "Envoyer un email de test" dans l'interface pour vérifier que les emails sont bien envoyés et reçus. + +--- + +## Configuration Nginx + +### Certificat SSL + +Pour activer HTTPS, vous devez obtenir un certificat SSL. La méthode recommandée est d'utiliser Let's Encrypt (gratuit) : + +```bash +sudo apt install certbot python3-certbot-nginx +sudo certbot --nginx -d votre-domaine.com +``` + +Certbot configurera automatiquement Nginx et renouvellera le certificat avant expiration. + +### Optimisations recommandées + +**Compression Gzip** : Déjà activée dans la configuration fournie, réduit la bande passante de 70%. + +**Cache des assets statiques** : Les fichiers CSS, JS et images sont mis en cache 1 an côté client pour améliorer les performances. + +**HTTP/2** : Activé par défaut avec `http2` dans la directive `listen 443 ssl http2`. + +**Rate limiting** : Pour protéger contre les attaques DDoS, ajoutez dans votre configuration Nginx : + +```nginx +limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s; + +location /api/ { + limit_req zone=api burst=20 nodelay; + proxy_pass http://formation_backend; +} +``` + +--- + +## Sécurité avancée + +### Rotation des secrets + +Les clés sensibles (JWT_SECRET, mots de passe DB) doivent être changées régulièrement : + +1. **Générer une nouvelle clé JWT** +2. **Mettre à jour `.env`** +3. **Redémarrer l'application** +4. **Tous les utilisateurs devront se reconnecter** + +### Sauvegarde des configurations + +Sauvegardez régulièrement votre fichier `.env` dans un gestionnaire de secrets sécurisé (pas dans Git) : + +- **Vault** (HashiCorp) +- **AWS Secrets Manager** +- **Azure Key Vault** +- **1Password** (pour les petites équipes) + +### Audit de sécurité + +Vérifiez régulièrement : + +- [ ] Les permissions de fichiers (`.env` doit être en 600) +- [ ] Les logs d'accès pour détecter des comportements suspects +- [ ] Les mises à jour de sécurité des dépendances (`pnpm audit`) +- [ ] La force des mots de passe de base de données +- [ ] L'expiration des certificats SSL + +--- + +## Personnalisation + +### Modification du logo + +1. Placez votre nouveau logo dans `client/public/` +2. Mettez à jour `VITE_APP_LOGO` dans `.env` +3. Modifiez également `APP_LOGO` dans `client/src/const.ts` +4. Rebuild l'application : `pnpm run build` +5. Mettez à jour le favicon via l'interface de gestion + +### Personnalisation des couleurs + +Les couleurs de l'interface sont définies dans `client/src/index.css`. Modifiez les variables CSS dans la section `:root` pour personnaliser le thème : + +```css +:root { + --primary: 221.2 83.2% 53.3%; /* Bleu principal */ + --secondary: 210 40% 96.1%; + --accent: 210 40% 96.1%; + /* ... */ +} +``` + +### Ajout de fonctions personnalisées + +Pour ajouter des fonctions spécifiques à votre organisation : + +1. **Schéma** : Ajoutez les tables dans `drizzle/schema.ts` +2. **Backend** : Créez les fonctions dans `server/db.ts` +3. **API** : Ajoutez les procédures dans `server/routers.ts` +4. **Frontend** : Créez les pages dans `client/src/pages/` +5. **Navigation** : Ajoutez les liens dans `client/src/components/DashboardLayout.tsx` + +--- + +## Troubleshooting + +### L'application ne démarre pas + +**Vérifiez le fichier `.env`** : Assurez-vous que toutes les variables requises sont définies. + +**Testez la connexion DB** : +```bash +mysql -h HOST -u USER -p DATABASE +``` + +**Consultez les logs** : +```bash +sudo journalctl -u formation-manager -n 100 +``` + +### Les emails ne sont pas envoyés + +**Vérifiez la configuration SMTP** : Utilisez la fonction de test dans l'interface. + +**Consultez les logs** : Les erreurs SMTP sont loguées dans les journaux système. + +**Vérifiez les ports** : Assurez-vous que les ports SMTP (587, 465) ne sont pas bloqués par le pare-feu. + +### Erreurs de base de données + +**Migrations non appliquées** : Exécutez `pnpm db:push` pour synchroniser le schéma. + +**Connexion refusée** : Vérifiez que MySQL est démarré et accessible. + +**Erreur d'authentification** : Vérifiez les identifiants dans `DATABASE_URL`. + +--- + +## Support + +Pour toute question sur la configuration : + +- **Documentation technique** : README.md du projet +- **Support Manus** : https://help.manus.im +- **Contact** : o.pareige@itinova.org + +--- + +**Fin de la documentation de configuration** diff --git a/CONFIGURATION.pdf b/CONFIGURATION.pdf new file mode 100644 index 0000000..ec67f5e Binary files /dev/null and b/CONFIGURATION.pdf differ diff --git a/GUIDE_DEPLOIEMENT.md b/GUIDE_DEPLOIEMENT.md new file mode 100644 index 0000000..df41dd5 --- /dev/null +++ b/GUIDE_DEPLOIEMENT.md @@ -0,0 +1,681 @@ +# Guide de Déploiement - Formation Manager Itinova + +**Version:** 7a737c05 +**Date:** 24 novembre 2025 +**Auteur:** Manus AI + +--- + +## Vue d'ensemble + +Ce document fournit les instructions complètes pour déployer l'application **Formation Manager Itinova** sur un serveur de production. L'application est construite avec React 19, Express 4, tRPC 11 et utilise une base de données MySQL/TiDB. + +--- + +## Prérequis système + +Avant de commencer le déploiement, assurez-vous que votre serveur dispose des éléments suivants : + +### Configuration matérielle minimale + +| Composant | Spécification minimale | Recommandé | +|-----------|------------------------|------------| +| CPU | 2 cœurs | 4 cœurs | +| RAM | 2 GB | 4 GB | +| Stockage | 20 GB | 50 GB SSD | +| Bande passante | 100 Mbps | 1 Gbps | + +### Logiciels requis + +L'application nécessite les logiciels suivants installés sur le serveur : + +**Node.js version 22.13.0 ou supérieure** : Le runtime JavaScript est essentiel pour exécuter l'application côté serveur. La version 22.13.0 garantit la compatibilité avec toutes les dépendances du projet. + +**pnpm** : Le gestionnaire de paquets pnpm est utilisé pour installer les dépendances de manière efficace. Il offre de meilleures performances et une gestion optimisée de l'espace disque par rapport à npm. + +**MySQL 8.0 ou TiDB** : La base de données relationnelle stocke toutes les données de l'application (formations, séquences, apprenants, inscriptions). TiDB est compatible MySQL et offre une scalabilité horizontale pour les déploiements à grande échelle. + +**Nginx ou Apache** : Un serveur web reverse proxy est recommandé pour gérer le SSL/TLS, la compression et le cache statique. Nginx est préféré pour ses performances supérieures. + +**Systemd** : Le gestionnaire de services Linux permet de gérer l'application comme un service système, assurant le démarrage automatique et la supervision. + +**Git** : Le système de contrôle de version est nécessaire pour cloner le dépôt et effectuer les mises à jour. + +--- + +## Architecture de déploiement + +L'application suit une architecture client-serveur moderne avec les composants suivants : + +### Composants principaux + +**Frontend React** : L'interface utilisateur est construite avec React 19 et Tailwind CSS 4. Le build de production génère des fichiers statiques optimisés (HTML, CSS, JavaScript) qui sont servis par le serveur Express. + +**Backend Express + tRPC** : Le serveur Node.js gère les requêtes API via tRPC, offrant une communication type-safe entre le client et le serveur. Toutes les routes API sont préfixées par `/api/`. + +**Base de données MySQL/TiDB** : La couche de persistance utilise Drizzle ORM pour interagir avec la base de données. Le schéma est défini dans `drizzle/schema.ts` et les migrations sont gérées automatiquement. + +**Authentification OAuth** : Le système d'authentification utilise Manus OAuth pour la gestion des utilisateurs. Les sessions sont stockées dans des cookies HTTP-only sécurisés. + +### Flux de requêtes + +Les requêtes utilisateur suivent ce chemin : **Navigateur → Nginx (SSL/TLS) → Express (port 3000) → tRPC → Base de données**. Les fichiers statiques sont servis directement par Express depuis le répertoire `dist/public/`. + +--- + +## Étape 1 : Préparation du serveur + +### Installation de Node.js + +La première étape consiste à installer Node.js version 22.13.0 sur votre serveur Ubuntu. Utilisez les commandes suivantes pour installer Node.js via le gestionnaire de versions nvm : + +```bash +# Installer nvm (Node Version Manager) +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash + +# Recharger le profil shell +source ~/.bashrc + +# Installer Node.js 22.13.0 +nvm install 22.13.0 + +# Définir comme version par défaut +nvm use 22.13.0 +nvm alias default 22.13.0 + +# Vérifier l'installation +node --version # Doit afficher v22.13.0 +``` + +### Installation de pnpm + +Une fois Node.js installé, installez pnpm globalement : + +```bash +npm install -g pnpm + +# Vérifier l'installation +pnpm --version +``` + +### Configuration de la base de données + +Créez une base de données MySQL dédiée pour l'application. Connectez-vous à MySQL et exécutez les commandes suivantes : + +```sql +CREATE DATABASE formation_manager CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; +CREATE USER 'formation_user'@'localhost' IDENTIFIED BY 'MOT_DE_PASSE_SECURISE'; +GRANT ALL PRIVILEGES ON formation_manager.* TO 'formation_user'@'localhost'; +FLUSH PRIVILEGES; +``` + +Remplacez `MOT_DE_PASSE_SECURISE` par un mot de passe fort généré aléatoirement. Notez les informations de connexion pour la configuration ultérieure. + +### Création de l'utilisateur système + +Pour des raisons de sécurité, créez un utilisateur système dédié pour exécuter l'application : + +```bash +sudo useradd -r -s /bin/bash -d /opt/formation-manager formation-manager +sudo mkdir -p /opt/formation-manager +sudo chown formation-manager:formation-manager /opt/formation-manager +``` + +--- + +## Étape 2 : Clonage et configuration + +### Clonage du dépôt + +Connectez-vous en tant qu'utilisateur `formation-manager` et clonez le dépôt Git : + +```bash +sudo su - formation-manager +cd /opt/formation-manager +git clone app +cd app +git checkout 7a737c05 +``` + +Remplacez `` par l'URL réelle de votre dépôt Git. + +### Configuration des variables d'environnement + +Créez un fichier `.env` à la racine du projet avec les variables suivantes : + +```bash +# Base de données +DATABASE_URL=mysql://formation_user:MOT_DE_PASSE_SECURISE@localhost:3306/formation_manager + +# Authentification +JWT_SECRET= +OAUTH_SERVER_URL=https://api.manus.im +VITE_OAUTH_PORTAL_URL=https://auth.manus.im + +# Identifiants propriétaire +OWNER_OPEN_ID= +OWNER_NAME= + +# Configuration application +VITE_APP_ID= +VITE_APP_TITLE="Gestion des Formations Manager Itinova" +VITE_APP_LOGO=/logo.png + +# APIs Manus (fournis automatiquement par la plateforme) +BUILT_IN_FORGE_API_URL= +BUILT_IN_FORGE_API_KEY= +VITE_FRONTEND_FORGE_API_KEY= +VITE_FRONTEND_FORGE_API_URL= + +# Analytics (optionnel) +VITE_ANALYTICS_ENDPOINT= +VITE_ANALYTICS_WEBSITE_ID= + +# Production +NODE_ENV=production +PORT=3000 +``` + +**Important** : Générez une clé JWT sécurisée avec la commande suivante : + +```bash +openssl rand -hex 32 +``` + +### Installation des dépendances + +Installez toutes les dépendances du projet : + +```bash +pnpm install +``` + +Cette commande télécharge et installe toutes les bibliothèques nécessaires définies dans `package.json`. Le processus peut prendre plusieurs minutes selon votre connexion internet. + +--- + +## Étape 3 : Migration de la base de données + +### Application du schéma + +Appliquez le schéma de base de données en exécutant : + +```bash +pnpm db:push +``` + +Cette commande utilise Drizzle Kit pour créer automatiquement toutes les tables nécessaires dans la base de données. Les tables suivantes seront créées : + +| Table | Description | +|-------|-------------| +| `users` | Utilisateurs et administrateurs | +| `formations` | Formations disponibles | +| `sequences` | Séquences de formation | +| `apprenants` | Apprenants inscrits | +| `inscriptions` | Inscriptions aux séquences | +| `emailTemplates` | Templates d'emails personnalisés | +| `alertes` | Alertes et notifications | + +### Vérification du schéma + +Connectez-vous à MySQL et vérifiez que toutes les tables ont été créées correctement : + +```bash +mysql -u formation_user -p formation_manager +``` + +```sql +SHOW TABLES; +DESCRIBE users; +DESCRIBE formations; +``` + +--- + +## Étape 4 : Build de production + +### Compilation de l'application + +Compilez l'application pour la production : + +```bash +pnpm run build +``` + +Cette commande effectue les opérations suivantes : + +1. **Compilation TypeScript** : Transpile le code TypeScript du serveur en JavaScript +2. **Build Vite** : Compile et optimise le frontend React (minification, tree-shaking, code splitting) +3. **Génération des assets** : Crée les fichiers statiques dans `dist/public/` + +Le build de production génère un répertoire `dist/` contenant : + +- `dist/index.js` : Le serveur Express compilé +- `dist/public/` : Les fichiers statiques du frontend (HTML, CSS, JS, images) + +### Vérification du build + +Vérifiez que le build s'est terminé sans erreur et que les fichiers ont été générés : + +```bash +ls -lh dist/ +ls -lh dist/public/ +``` + +--- + +## Étape 5 : Configuration du service systemd + +### Création du fichier service + +Créez un fichier de service systemd pour gérer l'application : + +```bash +sudo nano /etc/systemd/system/formation-manager.service +``` + +Ajoutez le contenu suivant : + +```ini +[Unit] +Description=Formation Manager Itinova +After=network.target mysql.service +Wants=mysql.service + +[Service] +Type=simple +User=formation-manager +Group=formation-manager +WorkingDirectory=/opt/formation-manager/app +Environment="NODE_ENV=production" +Environment="PORT=3000" +EnvironmentFile=/opt/formation-manager/app/.env +ExecStart=/home/formation-manager/.nvm/versions/node/v22.13.0/bin/node dist/index.js +Restart=always +RestartSec=10 +StandardOutput=journal +StandardError=journal +SyslogIdentifier=formation-manager + +# Limites de sécurité +LimitNOFILE=65536 +PrivateTmp=true +NoNewPrivileges=true + +[Install] +WantedBy=multi-user.target +``` + +### Activation du service + +Rechargez systemd, activez et démarrez le service : + +```bash +sudo systemctl daemon-reload +sudo systemctl enable formation-manager +sudo systemctl start formation-manager +``` + +### Vérification du statut + +Vérifiez que le service fonctionne correctement : + +```bash +sudo systemctl status formation-manager +``` + +Vous devriez voir `active (running)` en vert. Consultez les logs en cas d'erreur : + +```bash +sudo journalctl -u formation-manager -f +``` + +--- + +## Étape 6 : Configuration Nginx (reverse proxy) + +### Installation de Nginx + +Si Nginx n'est pas déjà installé : + +```bash +sudo apt update +sudo apt install nginx +``` + +### Configuration du site + +Créez un fichier de configuration pour votre site : + +```bash +sudo nano /etc/nginx/sites-available/formation-manager +``` + +Ajoutez la configuration suivante : + +```nginx +upstream formation_backend { + server 127.0.0.1:3000; + keepalive 64; +} + +server { + listen 80; + server_name votre-domaine.com www.votre-domaine.com; + + # Redirection HTTP vers HTTPS + return 301 https://$server_name$request_uri; +} + +server { + listen 443 ssl http2; + server_name votre-domaine.com www.votre-domaine.com; + + # Certificats SSL (à configurer avec Let's Encrypt) + ssl_certificate /etc/letsencrypt/live/votre-domaine.com/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/votre-domaine.com/privkey.pem; + ssl_protocols TLSv1.2 TLSv1.3; + ssl_ciphers HIGH:!aNULL:!MD5; + ssl_prefer_server_ciphers on; + + # Logs + access_log /var/log/nginx/formation-manager-access.log; + error_log /var/log/nginx/formation-manager-error.log; + + # Taille maximale des uploads + client_max_body_size 10M; + + # Compression + gzip on; + gzip_vary on; + gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; + + # Proxy vers Node.js + location / { + proxy_pass http://formation_backend; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection 'upgrade'; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_cache_bypass $http_upgrade; + proxy_read_timeout 300s; + proxy_connect_timeout 75s; + } + + # Cache des assets statiques + location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ { + proxy_pass http://formation_backend; + expires 1y; + add_header Cache-Control "public, immutable"; + } +} +``` + +Remplacez `votre-domaine.com` par votre nom de domaine réel. + +### Activation du site + +Activez la configuration et redémarrez Nginx : + +```bash +sudo ln -s /etc/nginx/sites-available/formation-manager /etc/nginx/sites-enabled/ +sudo nginx -t # Tester la configuration +sudo systemctl restart nginx +``` + +### Configuration SSL avec Let's Encrypt + +Installez Certbot et obtenez un certificat SSL gratuit : + +```bash +sudo apt install certbot python3-certbot-nginx +sudo certbot --nginx -d votre-domaine.com -d www.votre-domaine.com +``` + +Suivez les instructions à l'écran. Certbot configurera automatiquement Nginx pour utiliser HTTPS. + +--- + +## Étape 7 : Configuration du pare-feu + +### Configuration UFW + +Si vous utilisez UFW (Uncomplicated Firewall), autorisez les ports nécessaires : + +```bash +sudo ufw allow 22/tcp # SSH +sudo ufw allow 80/tcp # HTTP +sudo ufw allow 443/tcp # HTTPS +sudo ufw enable +sudo ufw status +``` + +### Sécurisation SSH (recommandé) + +Désactivez l'authentification par mot de passe SSH et utilisez uniquement les clés : + +```bash +sudo nano /etc/ssh/sshd_config +``` + +Modifiez les lignes suivantes : + +``` +PasswordAuthentication no +PermitRootLogin no +``` + +Redémarrez SSH : + +```bash +sudo systemctl restart sshd +``` + +--- + +## Étape 8 : Vérification du déploiement + +### Tests fonctionnels + +Accédez à votre application via le navigateur à l'adresse `https://votre-domaine.com` et vérifiez les éléments suivants : + +| Test | Description | Résultat attendu | +|------|-------------|------------------| +| Page d'accueil | Chargement de la page d'accueil | Affichage correct sans erreur | +| Connexion | Authentification via Manus OAuth | Redirection vers le tableau de bord | +| Tableau de bord | Affichage des statistiques | Graphiques et cartes visibles | +| Formations | Liste des formations | Tableau avec données | +| Séquences | Liste des séquences | Tableau avec code couleur | +| Apprenants | Liste des apprenants | Tableau avec badges de statut | +| Templates d'emails | Modification d'un template | Éditeur TipTap fonctionnel | + +### Vérification des logs + +Surveillez les logs pour détecter d'éventuelles erreurs : + +```bash +# Logs de l'application +sudo journalctl -u formation-manager -f + +# Logs Nginx +sudo tail -f /var/log/nginx/formation-manager-error.log + +# Logs système +sudo tail -f /var/log/syslog +``` + +### Tests de performance + +Utilisez des outils pour tester les performances de votre application : + +```bash +# Test de charge avec Apache Bench +ab -n 1000 -c 10 https://votre-domaine.com/ + +# Analyse des temps de réponse +curl -w "@curl-format.txt" -o /dev/null -s https://votre-domaine.com/ +``` + +--- + +## Maintenance et mises à jour + +### Sauvegarde de la base de données + +Créez un script de sauvegarde automatique : + +```bash +sudo nano /opt/formation-manager/backup-db.sh +``` + +Contenu du script : + +```bash +#!/bin/bash +DATE=$(date +%Y%m%d_%H%M%S) +BACKUP_DIR="/opt/formation-manager/backups" +mkdir -p $BACKUP_DIR + +mysqldump -u formation_user -p'MOT_DE_PASSE' formation_manager | gzip > $BACKUP_DIR/formation_manager_$DATE.sql.gz + +# Garder seulement les 30 dernières sauvegardes +find $BACKUP_DIR -name "formation_manager_*.sql.gz" -mtime +30 -delete +``` + +Rendez le script exécutable et ajoutez-le au cron : + +```bash +chmod +x /opt/formation-manager/backup-db.sh +sudo crontab -e +``` + +Ajoutez la ligne suivante pour une sauvegarde quotidienne à 2h du matin : + +``` +0 2 * * * /opt/formation-manager/backup-db.sh +``` + +### Mise à jour de l'application + +Pour mettre à jour l'application vers une nouvelle version : + +```bash +cd /opt/formation-manager/app +sudo systemctl stop formation-manager +git pull origin main +pnpm install +pnpm db:push # Appliquer les migrations +pnpm run build +sudo systemctl start formation-manager +``` + +### Surveillance et monitoring + +Installez des outils de monitoring pour surveiller les performances : + +**PM2** : Alternative à systemd avec monitoring intégré +**Prometheus + Grafana** : Monitoring avancé et dashboards +**Uptime Kuma** : Surveillance de disponibilité +**New Relic / DataDog** : Solutions SaaS complètes + +--- + +## Dépannage + +### L'application ne démarre pas + +Vérifiez les logs pour identifier l'erreur : + +```bash +sudo journalctl -u formation-manager -n 100 +``` + +Causes courantes : + +- **Erreur de connexion à la base de données** : Vérifiez `DATABASE_URL` dans `.env` +- **Port déjà utilisé** : Changez le port dans `.env` ou arrêtez le processus conflictuel +- **Permissions insuffisantes** : Vérifiez les droits sur `/opt/formation-manager/app` + +### Erreur 502 Bad Gateway + +Cette erreur indique que Nginx ne peut pas se connecter au backend Node.js. Vérifications : + +```bash +# Vérifier que le service tourne +sudo systemctl status formation-manager + +# Vérifier que le port 3000 écoute +sudo netstat -tulpn | grep 3000 + +# Tester la connexion locale +curl http://localhost:3000 +``` + +### Problèmes de performance + +Si l'application est lente : + +1. **Optimiser les requêtes SQL** : Ajoutez des index sur les colonnes fréquemment interrogées +2. **Activer le cache Redis** : Mettez en cache les résultats des requêtes coûteuses +3. **Augmenter les ressources** : Ajoutez plus de RAM ou de CPU +4. **Activer la compression Nginx** : Déjà configurée dans l'exemple ci-dessus + +### Base de données corrompue + +En cas de corruption de la base de données, restaurez depuis une sauvegarde : + +```bash +gunzip < /opt/formation-manager/backups/formation_manager_YYYYMMDD_HHMMSS.sql.gz | mysql -u formation_user -p formation_manager +``` + +--- + +## Sécurité + +### Bonnes pratiques + +Suivez ces recommandations pour sécuriser votre déploiement : + +**Mettez à jour régulièrement** : Appliquez les mises à jour de sécurité du système d'exploitation et des dépendances Node.js. + +**Utilisez HTTPS uniquement** : Forcez la redirection HTTP vers HTTPS et activez HSTS (HTTP Strict Transport Security). + +**Limitez les accès SSH** : Utilisez des clés SSH au lieu de mots de passe et limitez l'accès par IP si possible. + +**Configurez un WAF** : Utilisez un Web Application Firewall comme ModSecurity ou Cloudflare pour bloquer les attaques courantes. + +**Surveillez les logs** : Configurez des alertes pour détecter les tentatives d'intrusion ou les comportements anormaux. + +**Sauvegardez régulièrement** : Automatisez les sauvegardes de la base de données et testez régulièrement la restauration. + +### Checklist de sécurité + +Avant de mettre en production, vérifiez les points suivants : + +- [ ] Certificat SSL valide configuré +- [ ] Pare-feu activé et configuré +- [ ] Authentification SSH par clé uniquement +- [ ] Variables d'environnement sécurisées (pas de valeurs par défaut) +- [ ] Sauvegardes automatiques configurées +- [ ] Monitoring et alertes en place +- [ ] Logs rotatifs configurés +- [ ] Permissions fichiers correctes (pas de 777) +- [ ] Base de données accessible uniquement en local +- [ ] Rate limiting configuré sur Nginx + +--- + +## Support et contact + +Pour toute question ou problème concernant le déploiement : + +- **Documentation technique** : Consultez le README.md du projet +- **Support Manus** : https://help.manus.im +- **Contact développeur** : o.pareige@itinova.org + +--- + +**Fin du guide de déploiement** diff --git a/GUIDE_DEPLOIEMENT.pdf b/GUIDE_DEPLOIEMENT.pdf new file mode 100644 index 0000000..8fe3ff5 Binary files /dev/null and b/GUIDE_DEPLOIEMENT.pdf differ diff --git a/PACKAGE_INFO.txt b/PACKAGE_INFO.txt new file mode 100644 index 0000000..9716c2c --- /dev/null +++ b/PACKAGE_INFO.txt @@ -0,0 +1,134 @@ +================================================================================ +PACKAGE DE DÉPLOIEMENT - FORMATION MANAGER ITINOVA +================================================================================ + +Version: 7a737c05 +Date de création: 24 novembre 2025 +Créé par: Manus AI + +================================================================================ +FICHIERS GÉNÉRÉS +================================================================================ + +📦 Archive complète: + formation-manager-itinova-deployment-7a737c05.tar.gz (738 KB) + + Contient tous les fichiers nécessaires pour le déploiement: + - Guides de déploiement (PDF + Markdown) + - Documentation de configuration (PDF + Markdown) + - Notes de version + - Scripts d'installation et de mise à jour + - README avec instructions de démarrage rapide + +📄 Fichiers individuels disponibles dans deployment-package/: + - GUIDE_DEPLOIEMENT.pdf (425 KB) - Guide complet d'installation + - GUIDE_DEPLOIEMENT.md (19 KB) - Version Markdown du guide + - CONFIGURATION.pdf (376 KB) - Documentation des variables d'environnement + - CONFIGURATION.md (12 KB) - Version Markdown de la configuration + - RELEASE_NOTES.md (9.5 KB) - Notes de version détaillées + - deploy.sh (8.6 KB) - Script d'installation automatisé + - update.sh (2.5 KB) - Script de mise à jour + - README.txt - Instructions de démarrage rapide + +================================================================================ +UTILISATION +================================================================================ + +Option 1: Utiliser l'archive complète +-------------------------------------- +1. Téléchargez: formation-manager-itinova-deployment-7a737c05.tar.gz +2. Transférez sur votre serveur: + scp formation-manager-itinova-deployment-7a737c05.tar.gz user@serveur:/home/user/ +3. Décompressez: tar -xzf formation-manager-itinova-deployment-7a737c05.tar.gz +4. Suivez les instructions dans deployment-package/README.txt + +Option 2: Télécharger les fichiers individuels +----------------------------------------------- +Téléchargez uniquement les fichiers dont vous avez besoin depuis le dossier +deployment-package/ + +================================================================================ +PRÉREQUIS SYSTÈME +================================================================================ + +Serveur: +- Ubuntu 22.04 LTS ou supérieur +- 2 CPU cores minimum (4 recommandés) +- 4 GB RAM minimum (8 GB recommandés) +- 20 GB espace disque minimum +- Accès SSH avec droits sudo + +Base de données: +- MySQL 8.0+ ou TiDB Cloud +- 1 GB espace disque minimum pour la base de données + +Réseau: +- Nom de domaine pointant vers le serveur +- Ports ouverts: 80 (HTTP), 443 (HTTPS), 22 (SSH) + +================================================================================ +FONCTIONNALITÉS DE CETTE VERSION +================================================================================ + +✅ Gestion complète des formations, séquences et apprenants +✅ Système d'inscription avec limitation de capacité +✅ Templates d'emails personnalisables avec éditeur WYSIWYG (TipTap) +✅ Variables dynamiques dans les emails +✅ Tableau de bord principal avec statistiques +✅ Tableau de bord analytique avancé avec graphiques (Recharts) +✅ Export Excel des rapports analytiques +✅ Vue calendrier des séquences avec code couleur +✅ Page Établissements avec statistiques de participation +✅ Badges de statut Actif/Inactif pour les apprenants +✅ Code couleur pour taux de remplissage (vert/orange/rouge) +✅ Icônes colorées (œil en bleu, corbeille en rouge) +✅ Menu réorganisé en 4 zones avec titres en bleu +✅ Authentification locale (sans redirection OAuth Manus) + +================================================================================ +ÉTAPES DE DÉPLOIEMENT RÉSUMÉES +================================================================================ + +1. Préparer le serveur (Ubuntu 22.04) +2. Installer les dépendances (Node.js, MySQL, Nginx) +3. Cloner le dépôt Git +4. Configurer les variables d'environnement (.env) +5. Installer les dépendances Node.js (pnpm install) +6. Appliquer les migrations de base de données (pnpm db:push) +7. Compiler l'application (pnpm run build) +8. Configurer Nginx comme reverse proxy +9. Obtenir un certificat SSL avec Let's Encrypt +10. Créer et démarrer le service systemd +11. Tester l'application + +Temps d'installation estimé: 30-45 minutes + +================================================================================ +IDENTIFIANTS PAR DÉFAUT +================================================================================ + +Après l'installation, connectez-vous avec: + +Identifiant: adminServFormation +Mot de passe: Itinova69! + +⚠️ IMPORTANT: Changez ce mot de passe immédiatement après la première connexion! + +================================================================================ +SUPPORT +================================================================================ + +Documentation: Consultez les PDF inclus dans le package +Support Manus: https://help.manus.im +Contact: o.pareige@itinova.org + +================================================================================ +CHECKSUM (pour vérification d'intégrité) +================================================================================ + +Pour vérifier l'intégrité de l'archive après téléchargement: +sha256sum formation-manager-itinova-deployment-7a737c05.tar.gz + +================================================================================ +FIN +================================================================================ diff --git a/RELEASE_NOTES.md b/RELEASE_NOTES.md new file mode 100644 index 0000000..7f6a8b2 --- /dev/null +++ b/RELEASE_NOTES.md @@ -0,0 +1,245 @@ +# Notes de version - Formation Manager Itinova + +## Version 7a737c05 (24 novembre 2025) + +### 🎉 Nouvelles fonctionnalités + +#### Gestion des templates d'emails +- **Éditeur de texte riche (TipTap)** : Interface WYSIWYG complète pour formater les emails (gras, italique, titres, listes) +- **Variables dynamiques** : 7 boutons pour insérer rapidement des variables ({{nomApprenant}}, {{nomFormation}}, {{dateDebut}}, etc.) +- **Prévisualisation en temps réel** : Visualisation instantanée du rendu final pendant la modification +- **Bouton "Aperçu email"** : Modal affichant l'email complet avec variables remplacées par des données d'exemple +- **Remplacement automatique** : Les variables sont remplacées par les données réelles lors de l'envoi des emails + +#### Tableau de bord analytique avancé +- **Graphiques d'évolution temporelle** : Visualisation des inscriptions par mois sur 12 mois +- **Taux de remplissage mensuel** : Graphique linéaire montrant l'évolution du taux de remplissage +- **Top 10 établissements** : Graphique à barres des établissements les plus actifs +- **Répartition par fonction** : Graphique circulaire (Directeurs, Chefs de service, Autre) +- **Filtres de période** : Sélection rapide (dernier mois, trimestre, année, toutes les données) +- **Export Excel** : Téléchargement d'un rapport complet avec 5 feuilles détaillées + +#### Gestion des établissements +- **Page dédiée** : Liste complète de tous les établissements avec statistiques +- **Statistiques par établissement** : Nombre d'apprenants, apprenants actifs, taux de participation +- **Code couleur** : Indicateur visuel du taux de participation (vert >70%, orange 40-70%, rouge <40%) +- **Tri et recherche** : Filtrage rapide par nom d'établissement + +#### Badges de statut des apprenants +- **Badge "Actif"** (vert) : Apprenant inscrit à au moins une séquence +- **Badge "Inactif"** (gris) : Apprenant sans inscription active +- **Colonne dédiée** : Nouvelle colonne dans le tableau des apprenants + +### 🎨 Améliorations visuelles + +#### Interface générale +- **Menu réorganisé** : 4 zones distinctes avec séparateurs et titres en bleu + - Zone 1 : Tableau de bord + - Zone 2 : Gestion (Formations, Séquences, Calendrier, Apprenants) + - Zone 3 : Configuration (Utilisateurs, Rappels, Templates d'emails, Configuration SMTP) + - Zone 4 : Analyses (Établissements, Tableau de bord analytique, Rapport public cible) + +#### Gestion des séquences +- **Taux de remplissage coloré** : Vert (<70%), Orange (70-90%), Rouge (>90%) +- **Formations en couleur** : Chaque formation a une couleur unique (10 couleurs disponibles) +- **Icônes colorées** : Œil en bleu (visualisation), Corbeille en rouge (suppression) + +#### Gestion des apprenants +- **Fonction en couleur** : Directeurs (bleu), Chefs de service (vert), Autre (gris) +- **Icônes colorées** : Œil en bleu, Corbeille en rouge +- **Badge de statut** : Actif/Inactif visible immédiatement + +#### Tableau de bord principal +- **Graphique par établissement** : Ajout d'un second graphique à côté de la répartition par fonction +- **Cohérence des données** : Uniformisation des calculs entre tableau de bord principal et analytique + +### 🐛 Corrections de bugs + +- **Erreur calendrier** : Correction de l'erreur React #31 au clic sur un événement (objets Date convertis en string) +- **Menu invisible** : Ajout du wrapper DashboardLayout sur la page Établissements +- **Incohérence statistiques** : Uniformisation du calcul de répartition par fonction (comptage des apprenants uniques) +- **Couleurs formations** : Correction de l'algorithme pour assigner une couleur unique à chaque formation + +### 📚 Documentation + +- **Guide de déploiement complet** : Instructions détaillées pour déployer sur VPS (GUIDE_DEPLOIEMENT.md) +- **Script de déploiement** : Script bash automatisé pour installation initiale (deploy.sh) +- **Script de mise à jour** : Script simplifié pour les mises à jour rapides (update.sh) +- **Documentation de configuration** : Guide complet des variables d'environnement et paramètres (CONFIGURATION.md) + +### 🔧 Améliorations techniques + +- **React Quill remplacé par TipTap** : Compatibilité avec React 19 +- **Recharts intégré** : Bibliothèque de graphiques pour le tableau de bord analytique +- **ExcelJS intégré** : Export Excel des rapports analytiques +- **Requêtes analytiques optimisées** : Nouvelles fonctions dans analyticsDb.ts et etablissementsDb.ts + +### 📊 Statistiques de cette version + +- **Nouvelles pages** : 2 (AdminAnalytics, AdminEtablissements) +- **Nouveaux composants** : 1 (CapacityProgressBar amélioré) +- **Nouvelles fonctions backend** : 15+ (analytics, établissements, templates) +- **Lignes de code ajoutées** : ~3000 +- **Dépendances ajoutées** : 4 (@tiptap/react, @tiptap/starter-kit, recharts, exceljs) + +--- + +## Versions précédentes + +### Version 65a2d003 (23 novembre 2025) + +#### Corrections +- Correction de l'erreur d'affichage au clic sur un événement du calendrier +- Correction du problème de menu invisible sur la page Établissements + +### Version a0049436 (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Badges de statut Actif/Inactif pour les apprenants +- Page Établissements avec statistiques de participation + +### Version 193ffd7e (23 novembre 2025) + +#### Corrections +- Correction de l'algorithme de couleur des formations (mapping basé sur l'ordre) + +### Version 9a38fc9d (23 novembre 2025) + +#### Améliorations visuelles +- Icône corbeille en rouge et icône œil en bleu dans la page des apprenants +- Fonction colorée (Directeurs, Chefs de service) dans le tableau des apprenants + +### Version d2bb185e (23 novembre 2025) + +#### Améliorations visuelles +- Icône œil en bleu dans la gestion des séquences +- Texte des formations coloré avec une couleur unique par formation + +### Version 41fc4874 (23 novembre 2025) + +#### Améliorations visuelles +- Taux de remplissage coloré dans la gestion des séquences (vert/orange/rouge) +- Icône corbeille en rouge + +### Version 3ec648f8 (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Graphique de répartition par établissement sur le tableau de bord principal + +### Version a807183e (23 novembre 2025) + +#### Corrections +- Correction de l'incohérence des statistiques de répartition par fonction + +### Version 03efb59c (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Filtres de période dans le tableau de bord analytique +- Export Excel des rapports analytiques + +### Version 64db3f1a (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Tableau de bord analytique avancé avec graphiques Recharts + +### Version 33161d1a (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Remplacement automatique des variables dans les emails +- Bouton "Aperçu email" avec modal de prévisualisation + +### Version 4e825dbf (23 novembre 2025) + +#### Corrections +- Remplacement de React Quill par TipTap (compatibilité React 19) + +### Version e16bdb22 (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Éditeur WYSIWYG (React Quill) pour les templates d'emails +- Boutons de variables dynamiques + +### Version 3de0e393 (23 novembre 2025) + +#### Améliorations +- Prévisualisation en temps réel du contenu des templates d'emails + +### Version e4abeb5d (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Champ "Corps du message" dans les templates d'emails avec validation backend + +### Version 62644d54 (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Champ "Corps du message" dans l'interface de gestion des templates d'emails + +--- + +## Roadmap future + +### Fonctionnalités planifiées + +#### Court terme (1-2 mois) +- [ ] Système d'alertes automatiques configurables +- [ ] Export PDF des rapports analytiques +- [ ] Vue calendrier des séquences avec code couleur +- [ ] Filtre par formation dans le calendrier +- [ ] Recherche globale dans le header +- [ ] Badges de notification dans le menu + +#### Moyen terme (3-6 mois) +- [ ] Système de tags pour formations et séquences +- [ ] Rapports mensuels automatiques par email +- [ ] Vue détaillée par établissement avec liste des apprenants +- [ ] Statistiques d'emails envoyés +- [ ] Templates d'emails prédéfinis +- [ ] Comparaison de périodes dans les analytics + +#### Long terme (6-12 mois) +- [ ] API REST publique pour intégrations tierces +- [ ] Application mobile (React Native) +- [ ] Système de notifications push +- [ ] Intégration avec calendriers externes (Google Calendar, Outlook) +- [ ] Module de facturation et paiements +- [ ] Gestion multi-organisations + +--- + +## Migration depuis une version antérieure + +### Depuis la version 65a2d003 ou antérieure + +1. Sauvegardez votre base de données +2. Mettez à jour le code : `git pull origin main && git checkout 7a737c05` +3. Installez les nouvelles dépendances : `pnpm install` +4. Appliquez les migrations : `pnpm db:push` +5. Recompilez : `pnpm run build` +6. Redémarrez le service : `sudo systemctl restart formation-manager` + +**Nouvelles tables créées** : `alertes` +**Colonnes ajoutées** : `emailTemplates.bodyContent` + +### Vérification post-migration + +- [ ] Accès à la page Tableau de bord analytique +- [ ] Accès à la page Établissements +- [ ] Modification d'un template d'email avec le nouvel éditeur +- [ ] Export Excel depuis le tableau de bord analytique +- [ ] Vérification des badges de statut dans la liste des apprenants + +--- + +## Support et contact + +Pour toute question concernant cette version : + +- **Documentation** : Consultez GUIDE_DEPLOIEMENT.md et CONFIGURATION.md +- **Support Manus** : https://help.manus.im +- **Contact développeur** : o.pareige@itinova.org + +--- + +**Équipe de développement** +Manus AI - Formation Manager Itinova +© 2025 Itinova diff --git a/client/src/pages/AdminCalendrier.tsx b/client/src/pages/AdminCalendrier.tsx index c86b1a9..1f7b78e 100644 --- a/client/src/pages/AdminCalendrier.tsx +++ b/client/src/pages/AdminCalendrier.tsx @@ -146,10 +146,11 @@ export default function AdminCalendrier() { const daySequences = getSequencesForDay(day); const isToday = isSameDay(day, new Date()); + const dayKey = format(day, "yyyy-MM-dd"); return (

Formateur

-

{selectedSequence.formateur}

+

+ {typeof selectedSequence.formateur === 'object' && selectedSequence.formateur !== null + ? selectedSequence.formateur.nom || String(selectedSequence.formateur) + : selectedSequence.formateur + } +

)} {selectedSequence.dateBloquage && (

Date de blocage

- {format(parseISO(selectedSequence.dateBloquage), "dd/MM/yyyy", { locale: fr })} + {typeof selectedSequence.dateBloquage === 'string' + ? format(parseISO(selectedSequence.dateBloquage), "dd/MM/yyyy", { locale: fr }) + : format(selectedSequence.dateBloquage, "dd/MM/yyyy", { locale: fr }) + }

)} @@ -253,8 +262,9 @@ export default function AdminCalendrier() { {selectedSequence.dates.map((dateForm: any, index: number) => { const dateDebut = typeof dateForm.dateDebut === 'string' ? parseISO(dateForm.dateDebut) : dateForm.dateDebut; const dateFin = typeof dateForm.dateFin === 'string' ? parseISO(dateForm.dateFin) : dateForm.dateFin; + const dateKey = `${selectedSequence.id}-date-${index}`; return ( -
+
Du {format(dateDebut, "dd/MM/yyyy", { locale: fr })} au{" "} {format(dateFin, "dd/MM/yyyy", { locale: fr })}
diff --git a/deployment-package/CONFIGURATION.md b/deployment-package/CONFIGURATION.md new file mode 100644 index 0000000..22b961c --- /dev/null +++ b/deployment-package/CONFIGURATION.md @@ -0,0 +1,396 @@ +# Documentation de Configuration - Formation Manager Itinova + +**Version:** 7a737c05 +**Date:** 24 novembre 2025 +**Auteur:** Manus AI + +--- + +## Vue d'ensemble + +Ce document détaille toutes les variables de configuration et les paramètres nécessaires pour personnaliser et sécuriser votre installation de Formation Manager Itinova. + +--- + +## Variables d'environnement + +Toutes les variables d'environnement doivent être définies dans le fichier `.env` à la racine du projet. Ce fichier ne doit **jamais** être commité dans le dépôt Git pour des raisons de sécurité. + +### Base de données + +#### DATABASE_URL + +**Type:** String (URL de connexion) +**Requis:** Oui +**Format:** `mysql://utilisateur:motdepasse@hote:port/nombase` + +La chaîne de connexion complète à votre base de données MySQL ou TiDB. Cette URL contient toutes les informations nécessaires pour établir la connexion : utilisateur, mot de passe, hôte, port et nom de la base de données. + +**Exemple:** +``` +DATABASE_URL=mysql://formation_user:SecureP@ssw0rd@localhost:3306/formation_manager +``` + +**Recommandations de sécurité:** +- Utilisez un mot de passe fort d'au moins 16 caractères +- Créez un utilisateur dédié avec uniquement les permissions nécessaires +- Si possible, utilisez une connexion SSL/TLS (ajoutez `?ssl=true` à la fin de l'URL) +- Pour TiDB Cloud, utilisez toujours SSL et les certificats fournis + +--- + +### Authentification et sécurité + +#### JWT_SECRET + +**Type:** String (clé secrète) +**Requis:** Oui +**Longueur minimale:** 32 caractères (64 recommandés) + +La clé secrète utilisée pour signer les tokens JWT (JSON Web Tokens) qui gèrent les sessions utilisateur. Cette clé est critique pour la sécurité de votre application. + +**Génération d'une clé sécurisée:** +```bash +openssl rand -hex 32 +``` + +**Exemple:** +``` +JWT_SECRET=a3f8b2c9d1e4f5a6b7c8d9e0f1a2b3c4d5e6f7a8b9c0d1e2f3a4b5c6d7e8f9a0 +``` + +**Important:** Ne réutilisez jamais la même clé entre différents environnements (développement, staging, production). + +#### OAUTH_SERVER_URL + +**Type:** URL +**Requis:** Oui +**Valeur par défaut:** `https://api.manus.im` + +L'URL du serveur OAuth Manus utilisé pour l'authentification des utilisateurs. Cette valeur ne doit généralement pas être modifiée sauf si vous utilisez une instance Manus personnalisée. + +#### VITE_OAUTH_PORTAL_URL + +**Type:** URL +**Requis:** Oui +**Valeur par défaut:** `https://auth.manus.im` + +L'URL du portail de connexion Manus où les utilisateurs sont redirigés pour s'authentifier. Cette URL est utilisée côté client (frontend). + +--- + +### Identité du propriétaire + +#### OWNER_OPEN_ID + +**Type:** String +**Requis:** Oui + +L'identifiant OpenID unique du propriétaire de l'application. Cet utilisateur aura automatiquement le rôle `admin` lors de sa première connexion et recevra les notifications système. + +**Comment obtenir votre Open ID:** +1. Connectez-vous à votre compte Manus +2. Accédez à votre profil utilisateur +3. Copiez votre Open ID depuis les paramètres du compte + +#### OWNER_NAME + +**Type:** String +**Requis:** Oui + +Le nom complet du propriétaire de l'application, utilisé dans les notifications et les logs système. + +**Exemple:** +``` +OWNER_OPEN_ID=usr_abc123def456 +OWNER_NAME=Olivier Pareige +``` + +--- + +### Configuration de l'application + +#### VITE_APP_ID + +**Type:** String +**Requis:** Oui + +L'identifiant unique de votre application Manus. Cette valeur est fournie lors de la création de votre application sur la plateforme Manus. + +#### VITE_APP_TITLE + +**Type:** String +**Requis:** Non +**Valeur par défaut:** `Gestion des Formations Manager Itinova` + +Le titre de l'application affiché dans l'interface utilisateur, les onglets du navigateur et les emails. Vous pouvez personnaliser ce titre selon vos besoins. + +**Exemple:** +``` +VITE_APP_TITLE=Formation Manager - Itinova +``` + +#### VITE_APP_LOGO + +**Type:** String (chemin relatif) +**Requis:** Non +**Valeur par défaut:** `/logo.png` + +Le chemin vers le fichier logo de l'application. Le fichier doit être placé dans le répertoire `client/public/`. Le logo est affiché dans le header et les emails. + +**Formats supportés:** PNG, SVG, JPG +**Taille recommandée:** 200x50 pixels (ratio 4:1) + +--- + +### APIs Manus intégrées + +Ces variables sont généralement fournies automatiquement par la plateforme Manus lors du déploiement. Elles donnent accès aux services intégrés (LLM, stockage, notifications, etc.). + +#### BUILT_IN_FORGE_API_URL + +**Type:** URL +**Requis:** Oui (pour les fonctionnalités avancées) + +L'URL de base des APIs Manus Forge utilisées côté serveur. + +#### BUILT_IN_FORGE_API_KEY + +**Type:** String (clé API) +**Requis:** Oui (pour les fonctionnalités avancées) + +La clé d'authentification pour accéder aux APIs Manus côté serveur. Cette clé ne doit **jamais** être exposée côté client. + +#### VITE_FRONTEND_FORGE_API_KEY + +**Type:** String (clé API) +**Requis:** Non + +Une clé API distincte pour les appels côté client (frontend). Cette clé a des permissions limitées pour des raisons de sécurité. + +#### VITE_FRONTEND_FORGE_API_URL + +**Type:** URL +**Requis:** Non + +L'URL des APIs Manus accessibles depuis le frontend. + +--- + +### Analytics (optionnel) + +#### VITE_ANALYTICS_ENDPOINT + +**Type:** URL +**Requis:** Non + +L'URL de votre service d'analytics (compatible Plausible/Umami). Si défini, les statistiques de visite seront envoyées à ce endpoint. + +#### VITE_ANALYTICS_WEBSITE_ID + +**Type:** String +**Requis:** Non (sauf si VITE_ANALYTICS_ENDPOINT est défini) + +L'identifiant unique de votre site dans le système d'analytics. + +**Exemple:** +``` +VITE_ANALYTICS_ENDPOINT=https://analytics.example.com +VITE_ANALYTICS_WEBSITE_ID=formation-manager-prod +``` + +--- + +### Configuration de l'environnement + +#### NODE_ENV + +**Type:** String +**Requis:** Oui +**Valeurs possibles:** `development`, `production`, `test` + +Définit l'environnement d'exécution de l'application. En production, cette valeur **doit** être `production` pour activer les optimisations et désactiver les outils de développement. + +#### PORT + +**Type:** Number +**Requis:** Non +**Valeur par défaut:** `3000` + +Le port sur lequel le serveur Express écoute les connexions. Si vous utilisez Nginx comme reverse proxy, gardez la valeur par défaut. + +--- + +## Configuration SMTP (emails) + +L'application utilise un serveur SMTP pour envoyer les emails automatiques (confirmations, rappels, teasers). La configuration SMTP se fait via l'interface web dans la section "Configuration SMTP" du menu. + +### Paramètres SMTP requis + +| Paramètre | Description | Exemple | +|-----------|-------------|---------| +| Hôte SMTP | Adresse du serveur SMTP | `smtp.gmail.com` | +| Port | Port du serveur (25, 465, 587) | `587` | +| Sécurité | TLS ou SSL | `TLS` | +| Utilisateur | Adresse email d'envoi | `noreply@itinova.org` | +| Mot de passe | Mot de passe ou app password | `****************` | + +### Fournisseurs SMTP recommandés + +**Gmail** : Gratuit jusqu'à 500 emails/jour. Nécessite un "App Password" si 2FA activé. +**SendGrid** : 100 emails/jour gratuits, excellent pour la délivrabilité. +**Amazon SES** : Très économique, $0.10 pour 1000 emails. +**Mailgun** : 5000 emails/mois gratuits les 3 premiers mois. + +### Test de configuration + +Après avoir configuré SMTP, utilisez la fonction "Envoyer un email de test" dans l'interface pour vérifier que les emails sont bien envoyés et reçus. + +--- + +## Configuration Nginx + +### Certificat SSL + +Pour activer HTTPS, vous devez obtenir un certificat SSL. La méthode recommandée est d'utiliser Let's Encrypt (gratuit) : + +```bash +sudo apt install certbot python3-certbot-nginx +sudo certbot --nginx -d votre-domaine.com +``` + +Certbot configurera automatiquement Nginx et renouvellera le certificat avant expiration. + +### Optimisations recommandées + +**Compression Gzip** : Déjà activée dans la configuration fournie, réduit la bande passante de 70%. + +**Cache des assets statiques** : Les fichiers CSS, JS et images sont mis en cache 1 an côté client pour améliorer les performances. + +**HTTP/2** : Activé par défaut avec `http2` dans la directive `listen 443 ssl http2`. + +**Rate limiting** : Pour protéger contre les attaques DDoS, ajoutez dans votre configuration Nginx : + +```nginx +limit_req_zone $binary_remote_addr zone=api:10m rate=10r/s; + +location /api/ { + limit_req zone=api burst=20 nodelay; + proxy_pass http://formation_backend; +} +``` + +--- + +## Sécurité avancée + +### Rotation des secrets + +Les clés sensibles (JWT_SECRET, mots de passe DB) doivent être changées régulièrement : + +1. **Générer une nouvelle clé JWT** +2. **Mettre à jour `.env`** +3. **Redémarrer l'application** +4. **Tous les utilisateurs devront se reconnecter** + +### Sauvegarde des configurations + +Sauvegardez régulièrement votre fichier `.env` dans un gestionnaire de secrets sécurisé (pas dans Git) : + +- **Vault** (HashiCorp) +- **AWS Secrets Manager** +- **Azure Key Vault** +- **1Password** (pour les petites équipes) + +### Audit de sécurité + +Vérifiez régulièrement : + +- [ ] Les permissions de fichiers (`.env` doit être en 600) +- [ ] Les logs d'accès pour détecter des comportements suspects +- [ ] Les mises à jour de sécurité des dépendances (`pnpm audit`) +- [ ] La force des mots de passe de base de données +- [ ] L'expiration des certificats SSL + +--- + +## Personnalisation + +### Modification du logo + +1. Placez votre nouveau logo dans `client/public/` +2. Mettez à jour `VITE_APP_LOGO` dans `.env` +3. Modifiez également `APP_LOGO` dans `client/src/const.ts` +4. Rebuild l'application : `pnpm run build` +5. Mettez à jour le favicon via l'interface de gestion + +### Personnalisation des couleurs + +Les couleurs de l'interface sont définies dans `client/src/index.css`. Modifiez les variables CSS dans la section `:root` pour personnaliser le thème : + +```css +:root { + --primary: 221.2 83.2% 53.3%; /* Bleu principal */ + --secondary: 210 40% 96.1%; + --accent: 210 40% 96.1%; + /* ... */ +} +``` + +### Ajout de fonctions personnalisées + +Pour ajouter des fonctions spécifiques à votre organisation : + +1. **Schéma** : Ajoutez les tables dans `drizzle/schema.ts` +2. **Backend** : Créez les fonctions dans `server/db.ts` +3. **API** : Ajoutez les procédures dans `server/routers.ts` +4. **Frontend** : Créez les pages dans `client/src/pages/` +5. **Navigation** : Ajoutez les liens dans `client/src/components/DashboardLayout.tsx` + +--- + +## Troubleshooting + +### L'application ne démarre pas + +**Vérifiez le fichier `.env`** : Assurez-vous que toutes les variables requises sont définies. + +**Testez la connexion DB** : +```bash +mysql -h HOST -u USER -p DATABASE +``` + +**Consultez les logs** : +```bash +sudo journalctl -u formation-manager -n 100 +``` + +### Les emails ne sont pas envoyés + +**Vérifiez la configuration SMTP** : Utilisez la fonction de test dans l'interface. + +**Consultez les logs** : Les erreurs SMTP sont loguées dans les journaux système. + +**Vérifiez les ports** : Assurez-vous que les ports SMTP (587, 465) ne sont pas bloqués par le pare-feu. + +### Erreurs de base de données + +**Migrations non appliquées** : Exécutez `pnpm db:push` pour synchroniser le schéma. + +**Connexion refusée** : Vérifiez que MySQL est démarré et accessible. + +**Erreur d'authentification** : Vérifiez les identifiants dans `DATABASE_URL`. + +--- + +## Support + +Pour toute question sur la configuration : + +- **Documentation technique** : README.md du projet +- **Support Manus** : https://help.manus.im +- **Contact** : o.pareige@itinova.org + +--- + +**Fin de la documentation de configuration** diff --git a/deployment-package/CONFIGURATION.pdf b/deployment-package/CONFIGURATION.pdf new file mode 100644 index 0000000..ec67f5e Binary files /dev/null and b/deployment-package/CONFIGURATION.pdf differ diff --git a/deployment-package/GUIDE_DEPLOIEMENT.md b/deployment-package/GUIDE_DEPLOIEMENT.md new file mode 100644 index 0000000..df41dd5 --- /dev/null +++ b/deployment-package/GUIDE_DEPLOIEMENT.md @@ -0,0 +1,681 @@ +# Guide de Déploiement - Formation Manager Itinova + +**Version:** 7a737c05 +**Date:** 24 novembre 2025 +**Auteur:** Manus AI + +--- + +## Vue d'ensemble + +Ce document fournit les instructions complètes pour déployer l'application **Formation Manager Itinova** sur un serveur de production. L'application est construite avec React 19, Express 4, tRPC 11 et utilise une base de données MySQL/TiDB. + +--- + +## Prérequis système + +Avant de commencer le déploiement, assurez-vous que votre serveur dispose des éléments suivants : + +### Configuration matérielle minimale + +| Composant | Spécification minimale | Recommandé | +|-----------|------------------------|------------| +| CPU | 2 cœurs | 4 cœurs | +| RAM | 2 GB | 4 GB | +| Stockage | 20 GB | 50 GB SSD | +| Bande passante | 100 Mbps | 1 Gbps | + +### Logiciels requis + +L'application nécessite les logiciels suivants installés sur le serveur : + +**Node.js version 22.13.0 ou supérieure** : Le runtime JavaScript est essentiel pour exécuter l'application côté serveur. La version 22.13.0 garantit la compatibilité avec toutes les dépendances du projet. + +**pnpm** : Le gestionnaire de paquets pnpm est utilisé pour installer les dépendances de manière efficace. Il offre de meilleures performances et une gestion optimisée de l'espace disque par rapport à npm. + +**MySQL 8.0 ou TiDB** : La base de données relationnelle stocke toutes les données de l'application (formations, séquences, apprenants, inscriptions). TiDB est compatible MySQL et offre une scalabilité horizontale pour les déploiements à grande échelle. + +**Nginx ou Apache** : Un serveur web reverse proxy est recommandé pour gérer le SSL/TLS, la compression et le cache statique. Nginx est préféré pour ses performances supérieures. + +**Systemd** : Le gestionnaire de services Linux permet de gérer l'application comme un service système, assurant le démarrage automatique et la supervision. + +**Git** : Le système de contrôle de version est nécessaire pour cloner le dépôt et effectuer les mises à jour. + +--- + +## Architecture de déploiement + +L'application suit une architecture client-serveur moderne avec les composants suivants : + +### Composants principaux + +**Frontend React** : L'interface utilisateur est construite avec React 19 et Tailwind CSS 4. Le build de production génère des fichiers statiques optimisés (HTML, CSS, JavaScript) qui sont servis par le serveur Express. + +**Backend Express + tRPC** : Le serveur Node.js gère les requêtes API via tRPC, offrant une communication type-safe entre le client et le serveur. Toutes les routes API sont préfixées par `/api/`. + +**Base de données MySQL/TiDB** : La couche de persistance utilise Drizzle ORM pour interagir avec la base de données. Le schéma est défini dans `drizzle/schema.ts` et les migrations sont gérées automatiquement. + +**Authentification OAuth** : Le système d'authentification utilise Manus OAuth pour la gestion des utilisateurs. Les sessions sont stockées dans des cookies HTTP-only sécurisés. + +### Flux de requêtes + +Les requêtes utilisateur suivent ce chemin : **Navigateur → Nginx (SSL/TLS) → Express (port 3000) → tRPC → Base de données**. Les fichiers statiques sont servis directement par Express depuis le répertoire `dist/public/`. + +--- + +## Étape 1 : Préparation du serveur + +### Installation de Node.js + +La première étape consiste à installer Node.js version 22.13.0 sur votre serveur Ubuntu. Utilisez les commandes suivantes pour installer Node.js via le gestionnaire de versions nvm : + +```bash +# Installer nvm (Node Version Manager) +curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash + +# Recharger le profil shell +source ~/.bashrc + +# Installer Node.js 22.13.0 +nvm install 22.13.0 + +# Définir comme version par défaut +nvm use 22.13.0 +nvm alias default 22.13.0 + +# Vérifier l'installation +node --version # Doit afficher v22.13.0 +``` + +### Installation de pnpm + +Une fois Node.js installé, installez pnpm globalement : + +```bash +npm install -g pnpm + +# Vérifier l'installation +pnpm --version +``` + +### Configuration de la base de données + +Créez une base de données MySQL dédiée pour l'application. Connectez-vous à MySQL et exécutez les commandes suivantes : + +```sql +CREATE DATABASE formation_manager CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; +CREATE USER 'formation_user'@'localhost' IDENTIFIED BY 'MOT_DE_PASSE_SECURISE'; +GRANT ALL PRIVILEGES ON formation_manager.* TO 'formation_user'@'localhost'; +FLUSH PRIVILEGES; +``` + +Remplacez `MOT_DE_PASSE_SECURISE` par un mot de passe fort généré aléatoirement. Notez les informations de connexion pour la configuration ultérieure. + +### Création de l'utilisateur système + +Pour des raisons de sécurité, créez un utilisateur système dédié pour exécuter l'application : + +```bash +sudo useradd -r -s /bin/bash -d /opt/formation-manager formation-manager +sudo mkdir -p /opt/formation-manager +sudo chown formation-manager:formation-manager /opt/formation-manager +``` + +--- + +## Étape 2 : Clonage et configuration + +### Clonage du dépôt + +Connectez-vous en tant qu'utilisateur `formation-manager` et clonez le dépôt Git : + +```bash +sudo su - formation-manager +cd /opt/formation-manager +git clone app +cd app +git checkout 7a737c05 +``` + +Remplacez `` par l'URL réelle de votre dépôt Git. + +### Configuration des variables d'environnement + +Créez un fichier `.env` à la racine du projet avec les variables suivantes : + +```bash +# Base de données +DATABASE_URL=mysql://formation_user:MOT_DE_PASSE_SECURISE@localhost:3306/formation_manager + +# Authentification +JWT_SECRET= +OAUTH_SERVER_URL=https://api.manus.im +VITE_OAUTH_PORTAL_URL=https://auth.manus.im + +# Identifiants propriétaire +OWNER_OPEN_ID= +OWNER_NAME= + +# Configuration application +VITE_APP_ID= +VITE_APP_TITLE="Gestion des Formations Manager Itinova" +VITE_APP_LOGO=/logo.png + +# APIs Manus (fournis automatiquement par la plateforme) +BUILT_IN_FORGE_API_URL= +BUILT_IN_FORGE_API_KEY= +VITE_FRONTEND_FORGE_API_KEY= +VITE_FRONTEND_FORGE_API_URL= + +# Analytics (optionnel) +VITE_ANALYTICS_ENDPOINT= +VITE_ANALYTICS_WEBSITE_ID= + +# Production +NODE_ENV=production +PORT=3000 +``` + +**Important** : Générez une clé JWT sécurisée avec la commande suivante : + +```bash +openssl rand -hex 32 +``` + +### Installation des dépendances + +Installez toutes les dépendances du projet : + +```bash +pnpm install +``` + +Cette commande télécharge et installe toutes les bibliothèques nécessaires définies dans `package.json`. Le processus peut prendre plusieurs minutes selon votre connexion internet. + +--- + +## Étape 3 : Migration de la base de données + +### Application du schéma + +Appliquez le schéma de base de données en exécutant : + +```bash +pnpm db:push +``` + +Cette commande utilise Drizzle Kit pour créer automatiquement toutes les tables nécessaires dans la base de données. Les tables suivantes seront créées : + +| Table | Description | +|-------|-------------| +| `users` | Utilisateurs et administrateurs | +| `formations` | Formations disponibles | +| `sequences` | Séquences de formation | +| `apprenants` | Apprenants inscrits | +| `inscriptions` | Inscriptions aux séquences | +| `emailTemplates` | Templates d'emails personnalisés | +| `alertes` | Alertes et notifications | + +### Vérification du schéma + +Connectez-vous à MySQL et vérifiez que toutes les tables ont été créées correctement : + +```bash +mysql -u formation_user -p formation_manager +``` + +```sql +SHOW TABLES; +DESCRIBE users; +DESCRIBE formations; +``` + +--- + +## Étape 4 : Build de production + +### Compilation de l'application + +Compilez l'application pour la production : + +```bash +pnpm run build +``` + +Cette commande effectue les opérations suivantes : + +1. **Compilation TypeScript** : Transpile le code TypeScript du serveur en JavaScript +2. **Build Vite** : Compile et optimise le frontend React (minification, tree-shaking, code splitting) +3. **Génération des assets** : Crée les fichiers statiques dans `dist/public/` + +Le build de production génère un répertoire `dist/` contenant : + +- `dist/index.js` : Le serveur Express compilé +- `dist/public/` : Les fichiers statiques du frontend (HTML, CSS, JS, images) + +### Vérification du build + +Vérifiez que le build s'est terminé sans erreur et que les fichiers ont été générés : + +```bash +ls -lh dist/ +ls -lh dist/public/ +``` + +--- + +## Étape 5 : Configuration du service systemd + +### Création du fichier service + +Créez un fichier de service systemd pour gérer l'application : + +```bash +sudo nano /etc/systemd/system/formation-manager.service +``` + +Ajoutez le contenu suivant : + +```ini +[Unit] +Description=Formation Manager Itinova +After=network.target mysql.service +Wants=mysql.service + +[Service] +Type=simple +User=formation-manager +Group=formation-manager +WorkingDirectory=/opt/formation-manager/app +Environment="NODE_ENV=production" +Environment="PORT=3000" +EnvironmentFile=/opt/formation-manager/app/.env +ExecStart=/home/formation-manager/.nvm/versions/node/v22.13.0/bin/node dist/index.js +Restart=always +RestartSec=10 +StandardOutput=journal +StandardError=journal +SyslogIdentifier=formation-manager + +# Limites de sécurité +LimitNOFILE=65536 +PrivateTmp=true +NoNewPrivileges=true + +[Install] +WantedBy=multi-user.target +``` + +### Activation du service + +Rechargez systemd, activez et démarrez le service : + +```bash +sudo systemctl daemon-reload +sudo systemctl enable formation-manager +sudo systemctl start formation-manager +``` + +### Vérification du statut + +Vérifiez que le service fonctionne correctement : + +```bash +sudo systemctl status formation-manager +``` + +Vous devriez voir `active (running)` en vert. Consultez les logs en cas d'erreur : + +```bash +sudo journalctl -u formation-manager -f +``` + +--- + +## Étape 6 : Configuration Nginx (reverse proxy) + +### Installation de Nginx + +Si Nginx n'est pas déjà installé : + +```bash +sudo apt update +sudo apt install nginx +``` + +### Configuration du site + +Créez un fichier de configuration pour votre site : + +```bash +sudo nano /etc/nginx/sites-available/formation-manager +``` + +Ajoutez la configuration suivante : + +```nginx +upstream formation_backend { + server 127.0.0.1:3000; + keepalive 64; +} + +server { + listen 80; + server_name votre-domaine.com www.votre-domaine.com; + + # Redirection HTTP vers HTTPS + return 301 https://$server_name$request_uri; +} + +server { + listen 443 ssl http2; + server_name votre-domaine.com www.votre-domaine.com; + + # Certificats SSL (à configurer avec Let's Encrypt) + ssl_certificate /etc/letsencrypt/live/votre-domaine.com/fullchain.pem; + ssl_certificate_key /etc/letsencrypt/live/votre-domaine.com/privkey.pem; + ssl_protocols TLSv1.2 TLSv1.3; + ssl_ciphers HIGH:!aNULL:!MD5; + ssl_prefer_server_ciphers on; + + # Logs + access_log /var/log/nginx/formation-manager-access.log; + error_log /var/log/nginx/formation-manager-error.log; + + # Taille maximale des uploads + client_max_body_size 10M; + + # Compression + gzip on; + gzip_vary on; + gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; + + # Proxy vers Node.js + location / { + proxy_pass http://formation_backend; + proxy_http_version 1.1; + proxy_set_header Upgrade $http_upgrade; + proxy_set_header Connection 'upgrade'; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + proxy_cache_bypass $http_upgrade; + proxy_read_timeout 300s; + proxy_connect_timeout 75s; + } + + # Cache des assets statiques + location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot)$ { + proxy_pass http://formation_backend; + expires 1y; + add_header Cache-Control "public, immutable"; + } +} +``` + +Remplacez `votre-domaine.com` par votre nom de domaine réel. + +### Activation du site + +Activez la configuration et redémarrez Nginx : + +```bash +sudo ln -s /etc/nginx/sites-available/formation-manager /etc/nginx/sites-enabled/ +sudo nginx -t # Tester la configuration +sudo systemctl restart nginx +``` + +### Configuration SSL avec Let's Encrypt + +Installez Certbot et obtenez un certificat SSL gratuit : + +```bash +sudo apt install certbot python3-certbot-nginx +sudo certbot --nginx -d votre-domaine.com -d www.votre-domaine.com +``` + +Suivez les instructions à l'écran. Certbot configurera automatiquement Nginx pour utiliser HTTPS. + +--- + +## Étape 7 : Configuration du pare-feu + +### Configuration UFW + +Si vous utilisez UFW (Uncomplicated Firewall), autorisez les ports nécessaires : + +```bash +sudo ufw allow 22/tcp # SSH +sudo ufw allow 80/tcp # HTTP +sudo ufw allow 443/tcp # HTTPS +sudo ufw enable +sudo ufw status +``` + +### Sécurisation SSH (recommandé) + +Désactivez l'authentification par mot de passe SSH et utilisez uniquement les clés : + +```bash +sudo nano /etc/ssh/sshd_config +``` + +Modifiez les lignes suivantes : + +``` +PasswordAuthentication no +PermitRootLogin no +``` + +Redémarrez SSH : + +```bash +sudo systemctl restart sshd +``` + +--- + +## Étape 8 : Vérification du déploiement + +### Tests fonctionnels + +Accédez à votre application via le navigateur à l'adresse `https://votre-domaine.com` et vérifiez les éléments suivants : + +| Test | Description | Résultat attendu | +|------|-------------|------------------| +| Page d'accueil | Chargement de la page d'accueil | Affichage correct sans erreur | +| Connexion | Authentification via Manus OAuth | Redirection vers le tableau de bord | +| Tableau de bord | Affichage des statistiques | Graphiques et cartes visibles | +| Formations | Liste des formations | Tableau avec données | +| Séquences | Liste des séquences | Tableau avec code couleur | +| Apprenants | Liste des apprenants | Tableau avec badges de statut | +| Templates d'emails | Modification d'un template | Éditeur TipTap fonctionnel | + +### Vérification des logs + +Surveillez les logs pour détecter d'éventuelles erreurs : + +```bash +# Logs de l'application +sudo journalctl -u formation-manager -f + +# Logs Nginx +sudo tail -f /var/log/nginx/formation-manager-error.log + +# Logs système +sudo tail -f /var/log/syslog +``` + +### Tests de performance + +Utilisez des outils pour tester les performances de votre application : + +```bash +# Test de charge avec Apache Bench +ab -n 1000 -c 10 https://votre-domaine.com/ + +# Analyse des temps de réponse +curl -w "@curl-format.txt" -o /dev/null -s https://votre-domaine.com/ +``` + +--- + +## Maintenance et mises à jour + +### Sauvegarde de la base de données + +Créez un script de sauvegarde automatique : + +```bash +sudo nano /opt/formation-manager/backup-db.sh +``` + +Contenu du script : + +```bash +#!/bin/bash +DATE=$(date +%Y%m%d_%H%M%S) +BACKUP_DIR="/opt/formation-manager/backups" +mkdir -p $BACKUP_DIR + +mysqldump -u formation_user -p'MOT_DE_PASSE' formation_manager | gzip > $BACKUP_DIR/formation_manager_$DATE.sql.gz + +# Garder seulement les 30 dernières sauvegardes +find $BACKUP_DIR -name "formation_manager_*.sql.gz" -mtime +30 -delete +``` + +Rendez le script exécutable et ajoutez-le au cron : + +```bash +chmod +x /opt/formation-manager/backup-db.sh +sudo crontab -e +``` + +Ajoutez la ligne suivante pour une sauvegarde quotidienne à 2h du matin : + +``` +0 2 * * * /opt/formation-manager/backup-db.sh +``` + +### Mise à jour de l'application + +Pour mettre à jour l'application vers une nouvelle version : + +```bash +cd /opt/formation-manager/app +sudo systemctl stop formation-manager +git pull origin main +pnpm install +pnpm db:push # Appliquer les migrations +pnpm run build +sudo systemctl start formation-manager +``` + +### Surveillance et monitoring + +Installez des outils de monitoring pour surveiller les performances : + +**PM2** : Alternative à systemd avec monitoring intégré +**Prometheus + Grafana** : Monitoring avancé et dashboards +**Uptime Kuma** : Surveillance de disponibilité +**New Relic / DataDog** : Solutions SaaS complètes + +--- + +## Dépannage + +### L'application ne démarre pas + +Vérifiez les logs pour identifier l'erreur : + +```bash +sudo journalctl -u formation-manager -n 100 +``` + +Causes courantes : + +- **Erreur de connexion à la base de données** : Vérifiez `DATABASE_URL` dans `.env` +- **Port déjà utilisé** : Changez le port dans `.env` ou arrêtez le processus conflictuel +- **Permissions insuffisantes** : Vérifiez les droits sur `/opt/formation-manager/app` + +### Erreur 502 Bad Gateway + +Cette erreur indique que Nginx ne peut pas se connecter au backend Node.js. Vérifications : + +```bash +# Vérifier que le service tourne +sudo systemctl status formation-manager + +# Vérifier que le port 3000 écoute +sudo netstat -tulpn | grep 3000 + +# Tester la connexion locale +curl http://localhost:3000 +``` + +### Problèmes de performance + +Si l'application est lente : + +1. **Optimiser les requêtes SQL** : Ajoutez des index sur les colonnes fréquemment interrogées +2. **Activer le cache Redis** : Mettez en cache les résultats des requêtes coûteuses +3. **Augmenter les ressources** : Ajoutez plus de RAM ou de CPU +4. **Activer la compression Nginx** : Déjà configurée dans l'exemple ci-dessus + +### Base de données corrompue + +En cas de corruption de la base de données, restaurez depuis une sauvegarde : + +```bash +gunzip < /opt/formation-manager/backups/formation_manager_YYYYMMDD_HHMMSS.sql.gz | mysql -u formation_user -p formation_manager +``` + +--- + +## Sécurité + +### Bonnes pratiques + +Suivez ces recommandations pour sécuriser votre déploiement : + +**Mettez à jour régulièrement** : Appliquez les mises à jour de sécurité du système d'exploitation et des dépendances Node.js. + +**Utilisez HTTPS uniquement** : Forcez la redirection HTTP vers HTTPS et activez HSTS (HTTP Strict Transport Security). + +**Limitez les accès SSH** : Utilisez des clés SSH au lieu de mots de passe et limitez l'accès par IP si possible. + +**Configurez un WAF** : Utilisez un Web Application Firewall comme ModSecurity ou Cloudflare pour bloquer les attaques courantes. + +**Surveillez les logs** : Configurez des alertes pour détecter les tentatives d'intrusion ou les comportements anormaux. + +**Sauvegardez régulièrement** : Automatisez les sauvegardes de la base de données et testez régulièrement la restauration. + +### Checklist de sécurité + +Avant de mettre en production, vérifiez les points suivants : + +- [ ] Certificat SSL valide configuré +- [ ] Pare-feu activé et configuré +- [ ] Authentification SSH par clé uniquement +- [ ] Variables d'environnement sécurisées (pas de valeurs par défaut) +- [ ] Sauvegardes automatiques configurées +- [ ] Monitoring et alertes en place +- [ ] Logs rotatifs configurés +- [ ] Permissions fichiers correctes (pas de 777) +- [ ] Base de données accessible uniquement en local +- [ ] Rate limiting configuré sur Nginx + +--- + +## Support et contact + +Pour toute question ou problème concernant le déploiement : + +- **Documentation technique** : Consultez le README.md du projet +- **Support Manus** : https://help.manus.im +- **Contact développeur** : o.pareige@itinova.org + +--- + +**Fin du guide de déploiement** diff --git a/deployment-package/GUIDE_DEPLOIEMENT.pdf b/deployment-package/GUIDE_DEPLOIEMENT.pdf new file mode 100644 index 0000000..8fe3ff5 Binary files /dev/null and b/deployment-package/GUIDE_DEPLOIEMENT.pdf differ diff --git a/deployment-package/PACKAGE_INFO.txt b/deployment-package/PACKAGE_INFO.txt new file mode 100644 index 0000000..9716c2c --- /dev/null +++ b/deployment-package/PACKAGE_INFO.txt @@ -0,0 +1,134 @@ +================================================================================ +PACKAGE DE DÉPLOIEMENT - FORMATION MANAGER ITINOVA +================================================================================ + +Version: 7a737c05 +Date de création: 24 novembre 2025 +Créé par: Manus AI + +================================================================================ +FICHIERS GÉNÉRÉS +================================================================================ + +📦 Archive complète: + formation-manager-itinova-deployment-7a737c05.tar.gz (738 KB) + + Contient tous les fichiers nécessaires pour le déploiement: + - Guides de déploiement (PDF + Markdown) + - Documentation de configuration (PDF + Markdown) + - Notes de version + - Scripts d'installation et de mise à jour + - README avec instructions de démarrage rapide + +📄 Fichiers individuels disponibles dans deployment-package/: + - GUIDE_DEPLOIEMENT.pdf (425 KB) - Guide complet d'installation + - GUIDE_DEPLOIEMENT.md (19 KB) - Version Markdown du guide + - CONFIGURATION.pdf (376 KB) - Documentation des variables d'environnement + - CONFIGURATION.md (12 KB) - Version Markdown de la configuration + - RELEASE_NOTES.md (9.5 KB) - Notes de version détaillées + - deploy.sh (8.6 KB) - Script d'installation automatisé + - update.sh (2.5 KB) - Script de mise à jour + - README.txt - Instructions de démarrage rapide + +================================================================================ +UTILISATION +================================================================================ + +Option 1: Utiliser l'archive complète +-------------------------------------- +1. Téléchargez: formation-manager-itinova-deployment-7a737c05.tar.gz +2. Transférez sur votre serveur: + scp formation-manager-itinova-deployment-7a737c05.tar.gz user@serveur:/home/user/ +3. Décompressez: tar -xzf formation-manager-itinova-deployment-7a737c05.tar.gz +4. Suivez les instructions dans deployment-package/README.txt + +Option 2: Télécharger les fichiers individuels +----------------------------------------------- +Téléchargez uniquement les fichiers dont vous avez besoin depuis le dossier +deployment-package/ + +================================================================================ +PRÉREQUIS SYSTÈME +================================================================================ + +Serveur: +- Ubuntu 22.04 LTS ou supérieur +- 2 CPU cores minimum (4 recommandés) +- 4 GB RAM minimum (8 GB recommandés) +- 20 GB espace disque minimum +- Accès SSH avec droits sudo + +Base de données: +- MySQL 8.0+ ou TiDB Cloud +- 1 GB espace disque minimum pour la base de données + +Réseau: +- Nom de domaine pointant vers le serveur +- Ports ouverts: 80 (HTTP), 443 (HTTPS), 22 (SSH) + +================================================================================ +FONCTIONNALITÉS DE CETTE VERSION +================================================================================ + +✅ Gestion complète des formations, séquences et apprenants +✅ Système d'inscription avec limitation de capacité +✅ Templates d'emails personnalisables avec éditeur WYSIWYG (TipTap) +✅ Variables dynamiques dans les emails +✅ Tableau de bord principal avec statistiques +✅ Tableau de bord analytique avancé avec graphiques (Recharts) +✅ Export Excel des rapports analytiques +✅ Vue calendrier des séquences avec code couleur +✅ Page Établissements avec statistiques de participation +✅ Badges de statut Actif/Inactif pour les apprenants +✅ Code couleur pour taux de remplissage (vert/orange/rouge) +✅ Icônes colorées (œil en bleu, corbeille en rouge) +✅ Menu réorganisé en 4 zones avec titres en bleu +✅ Authentification locale (sans redirection OAuth Manus) + +================================================================================ +ÉTAPES DE DÉPLOIEMENT RÉSUMÉES +================================================================================ + +1. Préparer le serveur (Ubuntu 22.04) +2. Installer les dépendances (Node.js, MySQL, Nginx) +3. Cloner le dépôt Git +4. Configurer les variables d'environnement (.env) +5. Installer les dépendances Node.js (pnpm install) +6. Appliquer les migrations de base de données (pnpm db:push) +7. Compiler l'application (pnpm run build) +8. Configurer Nginx comme reverse proxy +9. Obtenir un certificat SSL avec Let's Encrypt +10. Créer et démarrer le service systemd +11. Tester l'application + +Temps d'installation estimé: 30-45 minutes + +================================================================================ +IDENTIFIANTS PAR DÉFAUT +================================================================================ + +Après l'installation, connectez-vous avec: + +Identifiant: adminServFormation +Mot de passe: Itinova69! + +⚠️ IMPORTANT: Changez ce mot de passe immédiatement après la première connexion! + +================================================================================ +SUPPORT +================================================================================ + +Documentation: Consultez les PDF inclus dans le package +Support Manus: https://help.manus.im +Contact: o.pareige@itinova.org + +================================================================================ +CHECKSUM (pour vérification d'intégrité) +================================================================================ + +Pour vérifier l'intégrité de l'archive après téléchargement: +sha256sum formation-manager-itinova-deployment-7a737c05.tar.gz + +================================================================================ +FIN +================================================================================ diff --git a/deployment-package/README.txt b/deployment-package/README.txt new file mode 100644 index 0000000..ed73673 --- /dev/null +++ b/deployment-package/README.txt @@ -0,0 +1,193 @@ +================================================================================ + PACKAGE DE DÉPLOIEMENT - FORMATION MANAGER ITINOVA + Version: 7a737c05 + Date: 24 novembre 2025 +================================================================================ + +Ce package contient tous les fichiers nécessaires pour déployer l'application +Formation Manager Itinova sur un serveur VPS de production. + +================================================================================ + CONTENU DU PACKAGE +================================================================================ + +1. GUIDE_DEPLOIEMENT.pdf (425 KB) + Guide complet de déploiement avec instructions pas à pas pour installer + l'application sur un VPS Ubuntu 22.04. Inclut la configuration de la base + de données, Nginx, SSL, et la mise en service systemd. + +2. GUIDE_DEPLOIEMENT.md (19 KB) + Version Markdown du guide de déploiement (même contenu que le PDF). + +3. CONFIGURATION.pdf (376 KB) + Documentation complète de toutes les variables d'environnement et + paramètres de configuration. Explique chaque variable, sa fonction, + et les valeurs recommandées. + +4. CONFIGURATION.md (12 KB) + Version Markdown de la documentation de configuration. + +5. RELEASE_NOTES.md (9.5 KB) + Notes de version détaillées listant toutes les fonctionnalités, + corrections de bugs et améliorations de cette version. + +6. deploy.sh (8.6 KB) + Script bash automatisé pour l'installation initiale complète de + l'application. Installe toutes les dépendances, configure la base + de données, compile l'application et crée le service systemd. + +7. update.sh (2.5 KB) + Script bash pour les mises à jour rapides de l'application. Récupère + les dernières modifications, recompile et redémarre le service. + +8. README.txt (ce fichier) + Instructions de démarrage rapide. + +================================================================================ + DÉMARRAGE RAPIDE +================================================================================ + +ÉTAPE 1 : Prérequis +------------------- +- Serveur VPS Ubuntu 22.04 ou supérieur +- Accès SSH avec droits sudo +- Nom de domaine pointant vers le serveur (pour SSL) +- Base de données MySQL ou TiDB accessible + +ÉTAPE 2 : Transfert des fichiers +--------------------------------- +Transférez le contenu de ce package sur votre serveur : + + scp -r deployment-package/* user@votre-serveur.com:/home/user/ + +ÉTAPE 3 : Lecture de la documentation +-------------------------------------- +Avant de commencer, lisez attentivement : + + 1. GUIDE_DEPLOIEMENT.pdf - Pour comprendre le processus complet + 2. CONFIGURATION.pdf - Pour préparer vos variables d'environnement + +ÉTAPE 4 : Exécution du script de déploiement +--------------------------------------------- +Sur le serveur, exécutez le script d'installation : + + chmod +x deploy.sh + ./deploy.sh + +Le script vous guidera à travers toutes les étapes d'installation. + +ÉTAPE 5 : Configuration post-installation +------------------------------------------ +Après l'installation : + + 1. Configurez SMTP dans l'interface web (Configuration > Configuration SMTP) + 2. Créez vos premiers utilisateurs (Gestion > Utilisateurs) + 3. Personnalisez les templates d'emails (Configuration > Templates d'emails) + 4. Testez l'envoi d'emails + +================================================================================ + MISES À JOUR FUTURES +================================================================================ + +Pour mettre à jour l'application vers une version plus récente : + + 1. Transférez le nouveau fichier update.sh sur le serveur + 2. Exécutez : chmod +x update.sh && ./update.sh + 3. Le script sauvegarde automatiquement la base de données avant la mise à jour + +================================================================================ + STRUCTURE DE L'APPLICATION +================================================================================ + +Après installation, l'application sera installée dans : + /opt/formation-manager/ + +Fichiers de configuration : + /opt/formation-manager/.env + +Logs de l'application : + sudo journalctl -u formation-manager -f + +Service systemd : + sudo systemctl status formation-manager + sudo systemctl restart formation-manager + sudo systemctl stop formation-manager + +Configuration Nginx : + /etc/nginx/sites-available/formation-manager + +================================================================================ + IDENTIFIANTS PAR DÉFAUT +================================================================================ + +Après l'installation, connectez-vous avec : + + Identifiant : adminServFormation + Mot de passe : Itinova69! + +⚠️ IMPORTANT : Changez ce mot de passe immédiatement après la première connexion + via le menu Gestion > Utilisateurs > Modifier l'utilisateur adminServFormation + +================================================================================ + SUPPORT ET ASSISTANCE +================================================================================ + +Documentation technique : + - README.md du projet (dans le dépôt Git) + - GUIDE_DEPLOIEMENT.pdf (ce package) + - CONFIGURATION.pdf (ce package) + +Support Manus : + https://help.manus.im + +Contact développeur : + o.pareige@itinova.org + +================================================================================ + SÉCURITÉ +================================================================================ + +Recommandations de sécurité importantes : + + ✓ Changez le mot de passe administrateur par défaut + ✓ Utilisez HTTPS (SSL/TLS) avec Let's Encrypt + ✓ Configurez un pare-feu (ufw) pour limiter les ports ouverts + ✓ Sauvegardez régulièrement la base de données + ✓ Gardez le système à jour (apt update && apt upgrade) + ✓ Utilisez des mots de passe forts pour la base de données + ✓ Ne commitez jamais le fichier .env dans Git + ✓ Limitez les accès SSH (clés SSH uniquement) + +================================================================================ + DÉPANNAGE +================================================================================ + +L'application ne démarre pas : + - Vérifiez les logs : sudo journalctl -u formation-manager -n 100 + - Vérifiez le fichier .env : toutes les variables sont-elles définies ? + - Testez la connexion DB : mysql -h HOST -u USER -p DATABASE + +Les emails ne sont pas envoyés : + - Vérifiez la configuration SMTP dans l'interface + - Utilisez la fonction "Test d'envoi" dans Configuration > Configuration SMTP + - Consultez les logs pour les erreurs SMTP + +Erreur 502 Bad Gateway : + - Le service formation-manager est-il démarré ? sudo systemctl status formation-manager + - Vérifiez les logs Nginx : sudo tail -f /var/log/nginx/error.log + +================================================================================ + LICENCE ET COPYRIGHT +================================================================================ + +Formation Manager Itinova +Version 7a737c05 + +Développé par Manus AI pour Itinova +© 2025 Itinova - Tous droits réservés + +Ce logiciel est fourni "tel quel", sans garantie d'aucune sorte. + +================================================================================ + FIN DU README +================================================================================ diff --git a/deployment-package/RELEASE_NOTES.md b/deployment-package/RELEASE_NOTES.md new file mode 100644 index 0000000..7f6a8b2 --- /dev/null +++ b/deployment-package/RELEASE_NOTES.md @@ -0,0 +1,245 @@ +# Notes de version - Formation Manager Itinova + +## Version 7a737c05 (24 novembre 2025) + +### 🎉 Nouvelles fonctionnalités + +#### Gestion des templates d'emails +- **Éditeur de texte riche (TipTap)** : Interface WYSIWYG complète pour formater les emails (gras, italique, titres, listes) +- **Variables dynamiques** : 7 boutons pour insérer rapidement des variables ({{nomApprenant}}, {{nomFormation}}, {{dateDebut}}, etc.) +- **Prévisualisation en temps réel** : Visualisation instantanée du rendu final pendant la modification +- **Bouton "Aperçu email"** : Modal affichant l'email complet avec variables remplacées par des données d'exemple +- **Remplacement automatique** : Les variables sont remplacées par les données réelles lors de l'envoi des emails + +#### Tableau de bord analytique avancé +- **Graphiques d'évolution temporelle** : Visualisation des inscriptions par mois sur 12 mois +- **Taux de remplissage mensuel** : Graphique linéaire montrant l'évolution du taux de remplissage +- **Top 10 établissements** : Graphique à barres des établissements les plus actifs +- **Répartition par fonction** : Graphique circulaire (Directeurs, Chefs de service, Autre) +- **Filtres de période** : Sélection rapide (dernier mois, trimestre, année, toutes les données) +- **Export Excel** : Téléchargement d'un rapport complet avec 5 feuilles détaillées + +#### Gestion des établissements +- **Page dédiée** : Liste complète de tous les établissements avec statistiques +- **Statistiques par établissement** : Nombre d'apprenants, apprenants actifs, taux de participation +- **Code couleur** : Indicateur visuel du taux de participation (vert >70%, orange 40-70%, rouge <40%) +- **Tri et recherche** : Filtrage rapide par nom d'établissement + +#### Badges de statut des apprenants +- **Badge "Actif"** (vert) : Apprenant inscrit à au moins une séquence +- **Badge "Inactif"** (gris) : Apprenant sans inscription active +- **Colonne dédiée** : Nouvelle colonne dans le tableau des apprenants + +### 🎨 Améliorations visuelles + +#### Interface générale +- **Menu réorganisé** : 4 zones distinctes avec séparateurs et titres en bleu + - Zone 1 : Tableau de bord + - Zone 2 : Gestion (Formations, Séquences, Calendrier, Apprenants) + - Zone 3 : Configuration (Utilisateurs, Rappels, Templates d'emails, Configuration SMTP) + - Zone 4 : Analyses (Établissements, Tableau de bord analytique, Rapport public cible) + +#### Gestion des séquences +- **Taux de remplissage coloré** : Vert (<70%), Orange (70-90%), Rouge (>90%) +- **Formations en couleur** : Chaque formation a une couleur unique (10 couleurs disponibles) +- **Icônes colorées** : Œil en bleu (visualisation), Corbeille en rouge (suppression) + +#### Gestion des apprenants +- **Fonction en couleur** : Directeurs (bleu), Chefs de service (vert), Autre (gris) +- **Icônes colorées** : Œil en bleu, Corbeille en rouge +- **Badge de statut** : Actif/Inactif visible immédiatement + +#### Tableau de bord principal +- **Graphique par établissement** : Ajout d'un second graphique à côté de la répartition par fonction +- **Cohérence des données** : Uniformisation des calculs entre tableau de bord principal et analytique + +### 🐛 Corrections de bugs + +- **Erreur calendrier** : Correction de l'erreur React #31 au clic sur un événement (objets Date convertis en string) +- **Menu invisible** : Ajout du wrapper DashboardLayout sur la page Établissements +- **Incohérence statistiques** : Uniformisation du calcul de répartition par fonction (comptage des apprenants uniques) +- **Couleurs formations** : Correction de l'algorithme pour assigner une couleur unique à chaque formation + +### 📚 Documentation + +- **Guide de déploiement complet** : Instructions détaillées pour déployer sur VPS (GUIDE_DEPLOIEMENT.md) +- **Script de déploiement** : Script bash automatisé pour installation initiale (deploy.sh) +- **Script de mise à jour** : Script simplifié pour les mises à jour rapides (update.sh) +- **Documentation de configuration** : Guide complet des variables d'environnement et paramètres (CONFIGURATION.md) + +### 🔧 Améliorations techniques + +- **React Quill remplacé par TipTap** : Compatibilité avec React 19 +- **Recharts intégré** : Bibliothèque de graphiques pour le tableau de bord analytique +- **ExcelJS intégré** : Export Excel des rapports analytiques +- **Requêtes analytiques optimisées** : Nouvelles fonctions dans analyticsDb.ts et etablissementsDb.ts + +### 📊 Statistiques de cette version + +- **Nouvelles pages** : 2 (AdminAnalytics, AdminEtablissements) +- **Nouveaux composants** : 1 (CapacityProgressBar amélioré) +- **Nouvelles fonctions backend** : 15+ (analytics, établissements, templates) +- **Lignes de code ajoutées** : ~3000 +- **Dépendances ajoutées** : 4 (@tiptap/react, @tiptap/starter-kit, recharts, exceljs) + +--- + +## Versions précédentes + +### Version 65a2d003 (23 novembre 2025) + +#### Corrections +- Correction de l'erreur d'affichage au clic sur un événement du calendrier +- Correction du problème de menu invisible sur la page Établissements + +### Version a0049436 (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Badges de statut Actif/Inactif pour les apprenants +- Page Établissements avec statistiques de participation + +### Version 193ffd7e (23 novembre 2025) + +#### Corrections +- Correction de l'algorithme de couleur des formations (mapping basé sur l'ordre) + +### Version 9a38fc9d (23 novembre 2025) + +#### Améliorations visuelles +- Icône corbeille en rouge et icône œil en bleu dans la page des apprenants +- Fonction colorée (Directeurs, Chefs de service) dans le tableau des apprenants + +### Version d2bb185e (23 novembre 2025) + +#### Améliorations visuelles +- Icône œil en bleu dans la gestion des séquences +- Texte des formations coloré avec une couleur unique par formation + +### Version 41fc4874 (23 novembre 2025) + +#### Améliorations visuelles +- Taux de remplissage coloré dans la gestion des séquences (vert/orange/rouge) +- Icône corbeille en rouge + +### Version 3ec648f8 (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Graphique de répartition par établissement sur le tableau de bord principal + +### Version a807183e (23 novembre 2025) + +#### Corrections +- Correction de l'incohérence des statistiques de répartition par fonction + +### Version 03efb59c (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Filtres de période dans le tableau de bord analytique +- Export Excel des rapports analytiques + +### Version 64db3f1a (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Tableau de bord analytique avancé avec graphiques Recharts + +### Version 33161d1a (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Remplacement automatique des variables dans les emails +- Bouton "Aperçu email" avec modal de prévisualisation + +### Version 4e825dbf (23 novembre 2025) + +#### Corrections +- Remplacement de React Quill par TipTap (compatibilité React 19) + +### Version e16bdb22 (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Éditeur WYSIWYG (React Quill) pour les templates d'emails +- Boutons de variables dynamiques + +### Version 3de0e393 (23 novembre 2025) + +#### Améliorations +- Prévisualisation en temps réel du contenu des templates d'emails + +### Version e4abeb5d (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Champ "Corps du message" dans les templates d'emails avec validation backend + +### Version 62644d54 (23 novembre 2025) + +#### Nouvelles fonctionnalités +- Champ "Corps du message" dans l'interface de gestion des templates d'emails + +--- + +## Roadmap future + +### Fonctionnalités planifiées + +#### Court terme (1-2 mois) +- [ ] Système d'alertes automatiques configurables +- [ ] Export PDF des rapports analytiques +- [ ] Vue calendrier des séquences avec code couleur +- [ ] Filtre par formation dans le calendrier +- [ ] Recherche globale dans le header +- [ ] Badges de notification dans le menu + +#### Moyen terme (3-6 mois) +- [ ] Système de tags pour formations et séquences +- [ ] Rapports mensuels automatiques par email +- [ ] Vue détaillée par établissement avec liste des apprenants +- [ ] Statistiques d'emails envoyés +- [ ] Templates d'emails prédéfinis +- [ ] Comparaison de périodes dans les analytics + +#### Long terme (6-12 mois) +- [ ] API REST publique pour intégrations tierces +- [ ] Application mobile (React Native) +- [ ] Système de notifications push +- [ ] Intégration avec calendriers externes (Google Calendar, Outlook) +- [ ] Module de facturation et paiements +- [ ] Gestion multi-organisations + +--- + +## Migration depuis une version antérieure + +### Depuis la version 65a2d003 ou antérieure + +1. Sauvegardez votre base de données +2. Mettez à jour le code : `git pull origin main && git checkout 7a737c05` +3. Installez les nouvelles dépendances : `pnpm install` +4. Appliquez les migrations : `pnpm db:push` +5. Recompilez : `pnpm run build` +6. Redémarrez le service : `sudo systemctl restart formation-manager` + +**Nouvelles tables créées** : `alertes` +**Colonnes ajoutées** : `emailTemplates.bodyContent` + +### Vérification post-migration + +- [ ] Accès à la page Tableau de bord analytique +- [ ] Accès à la page Établissements +- [ ] Modification d'un template d'email avec le nouvel éditeur +- [ ] Export Excel depuis le tableau de bord analytique +- [ ] Vérification des badges de statut dans la liste des apprenants + +--- + +## Support et contact + +Pour toute question concernant cette version : + +- **Documentation** : Consultez GUIDE_DEPLOIEMENT.md et CONFIGURATION.md +- **Support Manus** : https://help.manus.im +- **Contact développeur** : o.pareige@itinova.org + +--- + +**Équipe de développement** +Manus AI - Formation Manager Itinova +© 2025 Itinova diff --git a/deployment-package/deploy.sh b/deployment-package/deploy.sh new file mode 100755 index 0000000..bfa7d9a --- /dev/null +++ b/deployment-package/deploy.sh @@ -0,0 +1,273 @@ +#!/bin/bash + +############################################################################### +# Script de déploiement - Gestion des Formations Manager Itinova +# Version: 1.0.0 +# Description: Script automatisé pour déployer l'application en production +############################################################################### + +set -e # Arrêter en cas d'erreur + +# Couleurs pour les messages +RED='\033[0;31m' +GREEN='\033[0;32m' +YELLOW='\033[1;33m' +NC='\033[0m' # No Color + +# Fonction pour afficher les messages +log_info() { + echo -e "${GREEN}[INFO]${NC} $1" +} + +log_warn() { + echo -e "${YELLOW}[WARN]${NC} $1" +} + +log_error() { + echo -e "${RED}[ERROR]${NC} $1" +} + +# Fonction pour vérifier les prérequis +check_prerequisites() { + log_info "Vérification des prérequis..." + + # Vérifier Node.js + if ! command -v node &> /dev/null; then + log_error "Node.js n'est pas installé" + exit 1 + fi + + NODE_VERSION=$(node -v | cut -d'v' -f2 | cut -d'.' -f1) + if [ "$NODE_VERSION" -lt 18 ]; then + log_error "Node.js version 18+ est requis (version actuelle: $(node -v))" + exit 1 + fi + log_info "Node.js version: $(node -v) ✓" + + # Vérifier pnpm + if ! command -v pnpm &> /dev/null; then + log_warn "pnpm n'est pas installé. Installation..." + npm install -g pnpm + fi + log_info "pnpm version: $(pnpm -v) ✓" + + # Vérifier MySQL + if ! command -v mysql &> /dev/null; then + log_warn "MySQL client n'est pas installé" + else + log_info "MySQL client: ✓" + fi +} + +# Fonction pour créer le fichier .env si nécessaire +setup_env() { + log_info "Configuration des variables d'environnement..." + + if [ ! -f .env ]; then + log_warn "Fichier .env non trouvé. Création à partir du template..." + + cat > .env << 'EOF' +# Base de données +DATABASE_URL=mysql://user:password@localhost:3306/formation_manager + +# JWT Secret (IMPORTANT: Générer une clé aléatoire sécurisée) +JWT_SECRET=changez_cette_cle_secrete_par_une_valeur_aleatoire_tres_longue + +# OAuth Manus +OAUTH_SERVER_URL=https://api.manus.im +VITE_OAUTH_PORTAL_URL=https://login.manus.im +VITE_APP_ID= + +# Propriétaire +OWNER_OPEN_ID= +OWNER_NAME= + +# Application +VITE_APP_TITLE=Gestion des Formations Manager Itinova +VITE_APP_LOGO=/logo.svg + +# APIs Manus (optionnel) +BUILT_IN_FORGE_API_URL=https://forge.manus.im +BUILT_IN_FORGE_API_KEY= +VITE_FRONTEND_FORGE_API_KEY= +VITE_FRONTEND_FORGE_API_URL=https://forge.manus.im + +# Analytics (optionnel) +VITE_ANALYTICS_ENDPOINT= +VITE_ANALYTICS_WEBSITE_ID= + +# Environnement +NODE_ENV=production +EOF + + log_warn "Fichier .env créé. IMPORTANT: Modifiez les valeurs avant de continuer!" + log_warn "Éditez le fichier .env avec vos paramètres de production" + read -p "Appuyez sur Entrée après avoir configuré le fichier .env..." + else + log_info "Fichier .env trouvé ✓" + fi +} + +# Fonction pour installer les dépendances +install_dependencies() { + log_info "Installation des dépendances..." + pnpm install --frozen-lockfile + log_info "Dépendances installées ✓" +} + +# Fonction pour sauvegarder la base de données +backup_database() { + if [ -z "$DATABASE_URL" ]; then + log_warn "DATABASE_URL non définie, sauvegarde de la base de données ignorée" + return + fi + + log_info "Sauvegarde de la base de données..." + + BACKUP_DIR="./backups" + mkdir -p $BACKUP_DIR + + TIMESTAMP=$(date +%Y%m%d_%H%M%S) + BACKUP_FILE="$BACKUP_DIR/db_backup_$TIMESTAMP.sql" + + # Extraire les informations de connexion de DATABASE_URL + # Format: mysql://user:password@host:port/database + DB_USER=$(echo $DATABASE_URL | sed -n 's/.*:\/\/\([^:]*\):.*/\1/p') + DB_PASS=$(echo $DATABASE_URL | sed -n 's/.*:\/\/[^:]*:\([^@]*\)@.*/\1/p') + DB_HOST=$(echo $DATABASE_URL | sed -n 's/.*@\([^:]*\):.*/\1/p') + DB_PORT=$(echo $DATABASE_URL | sed -n 's/.*:\([0-9]*\)\/.*/\1/p') + DB_NAME=$(echo $DATABASE_URL | sed -n 's/.*\/\([^?]*\).*/\1/p') + + if command -v mysqldump &> /dev/null; then + mysqldump -h $DB_HOST -P $DB_PORT -u $DB_USER -p$DB_PASS $DB_NAME > $BACKUP_FILE 2>/dev/null || { + log_warn "Impossible de créer la sauvegarde de la base de données" + return + } + + gzip $BACKUP_FILE + log_info "Sauvegarde créée: $BACKUP_FILE.gz ✓" + + # Supprimer les sauvegardes de plus de 30 jours + find $BACKUP_DIR -name "db_backup_*.sql.gz" -mtime +30 -delete + else + log_warn "mysqldump non disponible, sauvegarde ignorée" + fi +} + +# Fonction pour appliquer les migrations +run_migrations() { + log_info "Application des migrations de base de données..." + pnpm db:push + log_info "Migrations appliquées ✓" +} + +# Fonction pour build l'application +build_app() { + log_info "Build de l'application..." + pnpm build + log_info "Build terminé ✓" +} + +# Fonction pour redémarrer le service +restart_service() { + if command -v systemctl &> /dev/null; then + SERVICE_NAME="formation-manager" + + if systemctl is-active --quiet $SERVICE_NAME; then + log_info "Redémarrage du service $SERVICE_NAME..." + sudo systemctl restart $SERVICE_NAME + + # Attendre que le service soit actif + sleep 3 + + if systemctl is-active --quiet $SERVICE_NAME; then + log_info "Service redémarré avec succès ✓" + else + log_error "Échec du redémarrage du service" + sudo systemctl status $SERVICE_NAME + exit 1 + fi + else + log_warn "Le service $SERVICE_NAME n'est pas actif" + log_info "Démarrage du service..." + sudo systemctl start $SERVICE_NAME + fi + else + log_warn "systemctl non disponible. Redémarrage manuel requis." + fi +} + +# Fonction pour vérifier le déploiement +verify_deployment() { + log_info "Vérification du déploiement..." + + # Vérifier que le serveur répond + if command -v curl &> /dev/null; then + sleep 2 + HTTP_CODE=$(curl -s -o /dev/null -w "%{http_code}" http://localhost:3000 || echo "000") + + if [ "$HTTP_CODE" = "200" ] || [ "$HTTP_CODE" = "302" ]; then + log_info "Application accessible ✓" + else + log_warn "L'application ne répond pas correctement (HTTP $HTTP_CODE)" + fi + fi +} + +# Fonction principale +main() { + echo "╔════════════════════════════════════════════════════════════════╗" + echo "║ Déploiement - Gestion des Formations Manager Itinova ║" + echo "╚════════════════════════════════════════════════════════════════╝" + echo "" + + # Vérifier que nous sommes dans le bon répertoire + if [ ! -f "package.json" ]; then + log_error "Ce script doit être exécuté depuis la racine du projet" + exit 1 + fi + + # Étapes de déploiement + check_prerequisites + setup_env + + # Charger les variables d'environnement + if [ -f .env ]; then + export $(cat .env | grep -v '^#' | xargs) + fi + + # Demander confirmation avant de continuer + echo "" + log_warn "Le déploiement va:" + echo " 1. Sauvegarder la base de données" + echo " 2. Installer les dépendances" + echo " 3. Appliquer les migrations" + echo " 4. Builder l'application" + echo " 5. Redémarrer le service" + echo "" + read -p "Continuer? (y/N) " -n 1 -r + echo "" + + if [[ ! $REPLY =~ ^[Yy]$ ]]; then + log_info "Déploiement annulé" + exit 0 + fi + + backup_database + install_dependencies + run_migrations + build_app + restart_service + verify_deployment + + echo "" + echo "╔════════════════════════════════════════════════════════════════╗" + echo "║ Déploiement terminé avec succès! ✓ ║" + echo "╚════════════════════════════════════════════════════════════════╝" + echo "" + log_info "L'application est maintenant accessible" + log_info "Vérifiez les logs avec: sudo journalctl -u formation-manager -f" +} + +# Exécuter le script +main "$@" diff --git a/deployment-package/update.sh b/deployment-package/update.sh new file mode 100755 index 0000000..cdefd10 --- /dev/null +++ b/deployment-package/update.sh @@ -0,0 +1,102 @@ +#!/bin/bash + +############################################################################### +# Script de mise à jour rapide - Formation Manager Itinova +# Version: 7a737c05 +# Auteur: Manus AI +# Description: Script simplifié pour mettre à jour l'application en production +############################################################################### + +set -e + +# Couleurs +RED='\033[0;31m' +GREEN='\033[0;32m' +YELLOW='\033[1;33m' +BLUE='\033[0;34m' +NC='\033[0m' + +# Configuration +APP_DIR="/var/www/formation-manager-itinova" +SERVICE_NAME="formation-manager" + +print_info() { + echo -e "${BLUE}[INFO]${NC} $1" +} + +print_success() { + echo -e "${GREEN}[OK]${NC} $1" +} + +print_error() { + echo -e "${RED}[ERREUR]${NC} $1" +} + +# Vérifier les privilèges sudo +if [[ $EUID -ne 0 ]]; then + print_error "Ce script doit être exécuté avec sudo" + exit 1 +fi + +echo "========================================" +echo " Mise à jour Formation Manager Itinova" +echo " Version: 7a737c05" +echo "========================================" +echo "" + +cd "$APP_DIR" + +# 1. Arrêter le service +print_info "Arrêt du service..." +systemctl stop "$SERVICE_NAME" +print_success "Service arrêté" + +# 2. Sauvegarder .env +print_info "Sauvegarde de la configuration..." +cp .env /tmp/.env.backup +print_success "Configuration sauvegardée" + +# 3. Mettre à jour le code +print_info "Mise à jour du code..." +git pull origin main +print_success "Code mis à jour" + +# 4. Installer les dépendances +print_info "Installation des dépendances..." +pnpm install +print_success "Dépendances installées" + +# 5. Appliquer les migrations +print_info "Application des migrations..." +pnpm db:push +print_success "Migrations appliquées" + +# 6. Build +print_info "Compilation de l'application..." +pnpm run build +print_success "Application compilée" + +# 7. Restaurer .env +print_info "Restauration de la configuration..." +cp /tmp/.env.backup .env +print_success "Configuration restaurée" + +# 8. Redémarrer le service +print_info "Redémarrage du service..." +systemctl start "$SERVICE_NAME" +sleep 3 + +if systemctl is-active --quiet "$SERVICE_NAME"; then + print_success "Service redémarré" +else + print_error "Échec du redémarrage" + systemctl status "$SERVICE_NAME" + exit 1 +fi + +echo "" +echo "========================================" +print_success "Mise à jour terminée avec succès !" +echo "========================================" +echo "" +print_info "Vérifiez les logs: sudo journalctl -u $SERVICE_NAME -f" diff --git a/formation-manager-itinova-deployment-7a737c05.tar.gz b/formation-manager-itinova-deployment-7a737c05.tar.gz new file mode 100644 index 0000000..5090bf4 Binary files /dev/null and b/formation-manager-itinova-deployment-7a737c05.tar.gz differ diff --git a/formation-manager-itinova-deployment-7a737c05.tar.gz.sha256 b/formation-manager-itinova-deployment-7a737c05.tar.gz.sha256 new file mode 100644 index 0000000..5802a38 --- /dev/null +++ b/formation-manager-itinova-deployment-7a737c05.tar.gz.sha256 @@ -0,0 +1 @@ +ad4227eaacde95ffbca8ad2244bbd5eff7bb71763f9fce4743c32c30f95ff682 formation-manager-itinova-deployment-7a737c05.tar.gz diff --git a/todo.md b/todo.md index 2431ac2..347a70b 100644 --- a/todo.md +++ b/todo.md @@ -588,3 +588,17 @@ ## Modification couleur titres menu - [x] Changer la couleur des titres des zones du menu en bleu + +## Génération documents de déploiement + +- [ ] Créer le guide de déploiement complet (GUIDE_DEPLOIEMENT.md) +- [ ] Générer les scripts de déploiement automatisés (deploy.sh, update.sh) +- [ ] Créer la documentation de configuration (CONFIGURATION.md) +- [ ] Créer le fichier de notes de version (RELEASE_NOTES.md) + +## Bug calendrier - Erreur React #31 au survol des vignettes + +- [x] Analyser l'erreur React #31 dans le calendrier +- [x] Identifier la cause de l'erreur lors du survol des vignettes +- [x] Corriger le code pour résoudre l'erreur +- [x] Tester le calendrier après correction diff --git a/update.sh b/update.sh new file mode 100755 index 0000000..cdefd10 --- /dev/null +++ b/update.sh @@ -0,0 +1,102 @@ +#!/bin/bash + +############################################################################### +# Script de mise à jour rapide - Formation Manager Itinova +# Version: 7a737c05 +# Auteur: Manus AI +# Description: Script simplifié pour mettre à jour l'application en production +############################################################################### + +set -e + +# Couleurs +RED='\033[0;31m' +GREEN='\033[0;32m' +YELLOW='\033[1;33m' +BLUE='\033[0;34m' +NC='\033[0m' + +# Configuration +APP_DIR="/var/www/formation-manager-itinova" +SERVICE_NAME="formation-manager" + +print_info() { + echo -e "${BLUE}[INFO]${NC} $1" +} + +print_success() { + echo -e "${GREEN}[OK]${NC} $1" +} + +print_error() { + echo -e "${RED}[ERREUR]${NC} $1" +} + +# Vérifier les privilèges sudo +if [[ $EUID -ne 0 ]]; then + print_error "Ce script doit être exécuté avec sudo" + exit 1 +fi + +echo "========================================" +echo " Mise à jour Formation Manager Itinova" +echo " Version: 7a737c05" +echo "========================================" +echo "" + +cd "$APP_DIR" + +# 1. Arrêter le service +print_info "Arrêt du service..." +systemctl stop "$SERVICE_NAME" +print_success "Service arrêté" + +# 2. Sauvegarder .env +print_info "Sauvegarde de la configuration..." +cp .env /tmp/.env.backup +print_success "Configuration sauvegardée" + +# 3. Mettre à jour le code +print_info "Mise à jour du code..." +git pull origin main +print_success "Code mis à jour" + +# 4. Installer les dépendances +print_info "Installation des dépendances..." +pnpm install +print_success "Dépendances installées" + +# 5. Appliquer les migrations +print_info "Application des migrations..." +pnpm db:push +print_success "Migrations appliquées" + +# 6. Build +print_info "Compilation de l'application..." +pnpm run build +print_success "Application compilée" + +# 7. Restaurer .env +print_info "Restauration de la configuration..." +cp /tmp/.env.backup .env +print_success "Configuration restaurée" + +# 8. Redémarrer le service +print_info "Redémarrage du service..." +systemctl start "$SERVICE_NAME" +sleep 3 + +if systemctl is-active --quiet "$SERVICE_NAME"; then + print_success "Service redémarré" +else + print_error "Échec du redémarrage" + systemctl status "$SERVICE_NAME" + exit 1 +fi + +echo "" +echo "========================================" +print_success "Mise à jour terminée avec succès !" +echo "========================================" +echo "" +print_info "Vérifiez les logs: sudo journalctl -u $SERVICE_NAME -f"