Manus feb708bb3e Checkpoint: Affichage des informations de signature dans la fenêtre d'émargement numérique :
- Ajout des champs signatureUrl, signatureS3Key et dateSigned dans getPresencesByInscription
- Affichage du nom du signataire, date/heure de validation à côté de chaque puce matin/après-midi
- Icône cliquable pour visualiser la signature en grand format
- Modale Dialog pour afficher la signature manuscrite
- Fonction getPresenceInfo pour récupérer les détails de présence
- Interface moderne avec icône de stylo SVG pour les signatures
2026-01-27 07:38:59 -05:00
2025-11-12 08:24:07 -05:00
2025-11-12 08:24:07 -05:00
2025-11-19 08:41:10 -05:00
2025-11-12 08:24:07 -05:00
2025-11-12 08:24:07 -05:00
2025-11-12 08:24:07 -05:00
2025-11-19 08:41:10 -05:00
2025-11-12 08:24:07 -05:00
2025-11-19 08:41:10 -05:00
2025-11-19 08:41:10 -05:00
2025-11-12 08:24:07 -05:00
2025-11-12 08:24:07 -05:00

Gestion des Formations Manager Itinova

Application web complète de gestion des formations pour Manager Itinova, permettant la planification, l'organisation et le suivi des formations avec gestion automatisée des inscriptions, rappels et communications.

Version Node License


📋 Table des matières


🎯 Aperçu

L'application Gestion des Formations Manager Itinova est une solution complète pour gérer l'ensemble du cycle de vie des formations :

  • Création et planification des formations et séquences
  • Gestion des apprenants et inscriptions avec validation automatique
  • Génération automatique de documents (listes, feuilles de présence)
  • Envoi automatique d'emails (confirmations, rappels)
  • Calendrier interactif et système de rappels
  • Rapports et statistiques détaillés

L'application offre deux modes d'authentification :

  • Connexion Manus OAuth : pour les utilisateurs avec compte Manus (Google, Microsoft, Apple)
  • Connexion locale : pour les administrateurs avec identifiant et mot de passe

Fonctionnalités

🔐 Authentification dual

  • Page de choix de connexion
  • Authentification Manus OAuth (Google, Microsoft, Apple)
  • Authentification locale par identifiant/mot de passe
  • Gestion des rôles (admin, user)
  • Utilisateur administrateur permanent non supprimable

📚 Gestion des formations

  • CRUD complet des formations
  • Support de multiples séquences par formation
  • Jusqu'à 4 dates par séquence
  • Champs personnalisés :
    • Public cible (Directeurs, Chefs de service, Autre, Tous)
    • Formateur avec autocomplétion
    • Capacité maximale par séquence
    • Lieu de formation
  • Barre de progression colorée (vert/orange/rouge) selon le taux de remplissage
  • Filtres et recherche avancée

👥 Gestion des apprenants

  • CRUD complet des apprenants
  • Fonction (Directeur, Chef de service, Autre)
  • Page de détail par apprenant avec historique complet
  • Système d'inscription avec :
    • Validation de capacité automatique
    • Détection anti-doublons
    • Blocage automatique à J-15
    • Alerte si public cible incompatible

📅 Calendrier et rappels

  • Calendrier mensuel interactif
  • Navigation par mois
  • Visualisation des séquences par date
  • Système de rappels automatiques configurables :
    • Rappel J-7
    • Rappel J-3
    • Rappel J-1
    • Rappel personnalisé

📄 Exports et documents

  • Export Excel : listes d'inscrits avec toutes les informations
  • Export PDF : listes d'inscrits formatées
  • Feuilles de présence PDF :
    • Logo Itinova
    • Double signature (matin/après-midi)
    • Signature formateur
    • Informations complètes de la séquence

✉️ Communications automatiques

  • Génération d'invitations Outlook (.ics)
  • Emails automatiques :
    • Email de confirmation d'inscription
    • Email teaser (présentation de la formation)
    • Email de rappel J-7
  • Templates personnalisables avec variables dynamiques
  • Configuration SMTP avec Resend
  • Mode test et production

📊 Rapports et statistiques

  • Tableau de bord avec indicateurs clés
  • Répartition des apprenants par fonction
  • Analyse public cible vs fonction réelle
  • Statistiques de remplissage des séquences
  • Historique des inscriptions

👤 Administration

  • Gestion des utilisateurs
  • Création, modification, activation/désactivation
  • Attribution des rôles
  • Utilisateur admin permanent (adminServFormation)
  • Templates d'emails personnalisables
  • Configuration SMTP centralisée

🛠 Technologies

Frontend

  • React 19 : bibliothèque UI moderne
  • Tailwind CSS 4 : framework CSS utility-first
  • shadcn/ui : composants UI accessibles
  • Wouter : routage léger
  • TanStack Query : gestion des données asynchrones
  • Recharts : visualisation de données
  • date-fns : manipulation de dates

Backend

  • Node.js 22 : runtime JavaScript
  • Express 4 : framework web
  • tRPC 11 : API type-safe end-to-end
  • Drizzle ORM : ORM TypeScript-first
  • MySQL/TiDB : base de données relationnelle

Outils

  • TypeScript : typage statique
  • Vite : build tool rapide
  • pnpm : gestionnaire de paquets performant
  • Vitest : framework de tests

Services externes

  • Resend : envoi d'emails transactionnels
  • Manus OAuth : authentification sociale

🚀 Installation rapide

Prérequis

  • Node.js 22+
  • MySQL 8.0+ ou MariaDB 10.6+
  • pnpm (installé automatiquement avec Node.js)

Installation en 4 étapes

# 1. Installer les dépendances
pnpm install

# 2. Configurer les variables d'environnement
cp .env.example .env
# Éditer .env avec vos paramètres

# 3. Créer et initialiser la base de données
mysql -u root -p -e "CREATE DATABASE formation_manager CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"
pnpm db:push

# 4. Démarrer l'application
pnpm dev

L'application sera accessible à http://localhost:3000

Connexion initiale

  • Identifiant : adminServFormation
  • Mot de passe : Itinova69!

📖 Guide complet : voir INSTALL.md


📚 Documentation


🏗 Architecture

Structure du projet

formation-manager-itinova/
├── client/                     # Application frontend
│   ├── public/                # Fichiers statiques
│   │   └── logo.svg          # Logo de l'application
│   └── src/
│       ├── pages/            # Pages de l'application
│       │   ├── LoginChoice.tsx
│       │   ├── Login.tsx
│       │   ├── Dashboard.tsx
│       │   ├── Formations.tsx
│       │   ├── Sequences.tsx
│       │   ├── Apprenants.tsx
│       │   └── ...
│       ├── components/       # Composants réutilisables
│       │   ├── DashboardLayout.tsx
│       │   └── ui/          # Composants shadcn/ui
│       └── lib/             # Bibliothèques et utilitaires
│           └── trpc.ts      # Client tRPC
├── server/                    # Application backend
│   ├── routers.ts            # Routes API tRPC
│   ├── db.ts                 # Fonctions d'accès BDD
│   └── _core/                # Configuration serveur
│       ├── index.ts          # Point d'entrée
│       ├── trpc.ts           # Configuration tRPC
│       ├── localAuth.ts      # Authentification locale
│       └── ...
├── drizzle/                   # Base de données
│   └── schema.ts             # Schéma des tables
├── shared/                    # Code partagé
│   └── const.ts              # Constantes
├── .env                       # Variables d'environnement
├── package.json              # Dépendances
├── deploy.sh                 # Script de déploiement
├── DEPLOYMENT.md             # Guide de déploiement
├── INSTALL.md                # Guide d'installation
└── README.md                 # Ce fichier

Base de données

Tables principales :

  • users : utilisateurs de l'application
  • formations : formations disponibles
  • sequences : séquences de formation (dates)
  • apprenants : apprenants inscrits
  • inscriptions : inscriptions aux séquences
  • rappels : rappels configurés
  • email_templates : templates d'emails
  • email_config : configuration SMTP

API (tRPC)

L'API utilise tRPC pour une communication type-safe entre le client et le serveur.

Routers principaux :

  • auth : authentification (me, logout)
  • formations : CRUD formations
  • sequences : CRUD séquences
  • apprenants : CRUD apprenants
  • inscriptions : gestion des inscriptions
  • rappels : gestion des rappels
  • emails : envoi d'emails et gestion des templates
  • users : gestion des utilisateurs
  • stats : statistiques et rapports

💻 Utilisation

Commandes disponibles

# Développement
pnpm dev              # Démarrer le serveur de développement
pnpm build            # Builder pour la production
pnpm start            # Démarrer en mode production

# Base de données
pnpm db:push          # Appliquer les migrations
pnpm db:generate      # Générer les migrations
pnpm db:studio        # Ouvrir Drizzle Studio

# Tests
pnpm test             # Lancer les tests
pnpm test:ui          # Interface de tests Vitest

# Linting
pnpm lint             # Vérifier le code
pnpm format           # Formater le code

Workflow typique

  1. Créer une formation

    • Menu "Formations" → "Nouvelle formation"
    • Remplir les informations
    • Sauvegarder
  2. Créer des séquences

    • Cliquer sur la formation
    • "Ajouter une séquence"
    • Définir les dates (jusqu'à 4)
    • Définir la capacité maximale
  3. Ajouter des apprenants

    • Menu "Apprenants" → "Ajouter un apprenant"
    • Remplir nom, prénom, email, fonction
  4. Gérer les inscriptions

    • Depuis la page de la séquence
    • Ou depuis la page de l'apprenant
    • Validation automatique de la capacité
  5. Configurer les rappels

    • Menu "Rappels"
    • Activer les rappels souhaités (J-7, J-3, J-1)
    • Les emails seront envoyés automatiquement
  6. Exporter les documents

    • Liste des inscrits (Excel ou PDF)
    • Feuille de présence (PDF)
    • Invitation Outlook (.ics)

🌐 Déploiement

Option 1 : Plateforme Manus (recommandé)

L'application est optimisée pour la plateforme Manus :

  1. Créer un checkpoint
  2. Cliquer sur "Publish"
  3. Configurer le domaine
  4. Publier

Avantages : déploiement automatique, SSL, scaling, base de données incluse.

Option 2 : Serveur VPS

Utiliser le script de déploiement automatique :

# Rendre le script exécutable
chmod +x deploy.sh

# Lancer le déploiement
./deploy.sh

Le script effectue automatiquement :

  • Vérification des prérequis
  • Installation des dépendances
  • Sauvegarde de la base de données
  • Application des migrations
  • Build de l'application
  • Redémarrage du service

📖 Guide complet : voir DEPLOYMENT.md


🔧 Maintenance

Sauvegardes automatiques

Le script de déploiement crée automatiquement des sauvegardes de la base de données.

Pour configurer des sauvegardes régulières :

# Ajouter une tâche cron
crontab -e

# Sauvegarde quotidienne à 2h du matin
0 2 * * * /chemin/vers/backup.sh

Mise à jour

# Récupérer les dernières modifications
git pull origin main

# Lancer le déploiement
./deploy.sh

Logs

# Logs de l'application (systemd)
sudo journalctl -u formation-manager -f

# Logs Nginx
sudo tail -f /var/log/nginx/access.log
sudo tail -f /var/log/nginx/error.log

📞 Support

Documentation

Dépannage

Consultez la section "Dépannage" dans DEPLOYMENT.md pour les problèmes courants.

Contact

Pour toute question ou problème :

  • Consulter la documentation
  • Vérifier les logs de l'application
  • Contacter l'équipe de développement

📝 Licence

Ce projet est la propriété de Manager Itinova. Tous droits réservés.


🙏 Crédits

Développé avec ❤️ pour Manager Itinova

Technologies utilisées :

  • React, Tailwind CSS, shadcn/ui
  • Node.js, Express, tRPC
  • Drizzle ORM, MySQL
  • Resend, Manus OAuth

Version : 1.0.0
Dernière mise à jour : 23 novembre 2025

Description
Gestion des Formations Itinova
Readme 98 MiB
Languages
TypeScript 92.9%
Shell 6%
JavaScript 0.7%
CSS 0.3%