Checkpoint: Checkpoint complet avec toutes les fonctionnalités développées
✅ **Fonctionnalités incluses**
**1. Gestion des formateurs**
- Table formateurs dans la base de données
- Composant FormateurCombobox avec autocomplétion
- Ajout rapide de nouveaux formateurs depuis le formulaire
- Champ formateur dans les séquences (création et modification)
- Affichage du formateur dans le tableau et les emails
**2. Barre de progression colorée**
- Composant CapacityProgressBar avec code couleur automatique
- Vert (<70%), Orange (70-90%), Rouge (>90%)
- Affichage "nbInscrits / capacité" + pourcentage
- Intégré dans le tableau des séquences
**3. Vue calendrier mensuel**
- Page AdminCalendrier avec navigation mois précédent/suivant
- Affichage des séquences sur leurs dates respectives
- Dialog de détails au clic sur une séquence
- Lien "Calendrier" dans le menu de navigation
**4. Système de rappels automatiques**
- Page AdminRappels pour configurer les rappels (J-15, J-7, J-1)
- Templates d'emails personnalisables avec variables dynamiques
- Activation/désactivation des rappels
- Infrastructure prête pour l'envoi automatique futur
**5. Améliorations diverses**
- Public cible "Tous" ajouté dans les options
- Formulaires de séquences réorganisés (pas de chevauchement)
- Affichage du formateur dans les emails d'invitation
- Colonne formateur dans le tableau des séquences
This commit is contained in:
39
client/src/components/CapacityProgressBar.tsx
Normal file
39
client/src/components/CapacityProgressBar.tsx
Normal file
@@ -0,0 +1,39 @@
|
||||
import { Progress } from "@/components/ui/progress";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface CapacityProgressBarProps {
|
||||
nbInscrits: number;
|
||||
capaciteMax: number;
|
||||
}
|
||||
|
||||
export default function CapacityProgressBar({
|
||||
nbInscrits,
|
||||
capaciteMax,
|
||||
}: CapacityProgressBarProps) {
|
||||
const percentage = capaciteMax > 0 ? Math.round((nbInscrits / capaciteMax) * 100) : 0;
|
||||
|
||||
// Déterminer la couleur selon le taux de remplissage
|
||||
const getColor = () => {
|
||||
if (percentage < 70) return "bg-green-500";
|
||||
if (percentage < 90) return "bg-orange-500";
|
||||
return "bg-red-500";
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="text-sm font-medium whitespace-nowrap">
|
||||
{nbInscrits} / {capaciteMax}
|
||||
</span>
|
||||
<span className="text-sm text-muted-foreground whitespace-nowrap">
|
||||
{percentage}%
|
||||
</span>
|
||||
</div>
|
||||
<Progress
|
||||
value={percentage}
|
||||
className="h-2"
|
||||
indicatorClassName={cn("transition-all", getColor())}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user