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:
Manus Sandbox
366
client/src/pages/AdminRappels.tsx
Normal file
366
client/src/pages/AdminRappels.tsx
Normal file
@@ -0,0 +1,366 @@
|
||||
import { useState } from "react";
|
||||
import DashboardLayout from "@/components/DashboardLayout";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { trpc } from "@/lib/trpc";
|
||||
import { Bell, Edit, Plus, Trash2 } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function AdminRappels() {
|
||||
const [isCreateOpen, setIsCreateOpen] = useState(false);
|
||||
const [isEditOpen, setIsEditOpen] = useState(false);
|
||||
const [editingRappel, setEditingRappel] = useState<any>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
nom: "",
|
||||
joursAvant: 0,
|
||||
sujet: "",
|
||||
contenu: "",
|
||||
actif: true,
|
||||
});
|
||||
|
||||
const { data: rappels, refetch } = trpc.rappels.list.useQuery();
|
||||
const createMutation = trpc.rappels.create.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Rappel créé avec succès");
|
||||
refetch();
|
||||
setIsCreateOpen(false);
|
||||
resetForm();
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Erreur: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const updateMutation = trpc.rappels.update.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Rappel modifié avec succès");
|
||||
refetch();
|
||||
setIsEditOpen(false);
|
||||
setEditingRappel(null);
|
||||
resetForm();
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Erreur: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const deleteMutation = trpc.rappels.delete.useMutation({
|
||||
onSuccess: () => {
|
||||
toast.success("Rappel supprimé avec succès");
|
||||
refetch();
|
||||
},
|
||||
onError: (error) => {
|
||||
toast.error(`Erreur: ${error.message}`);
|
||||
},
|
||||
});
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
nom: "",
|
||||
joursAvant: 0,
|
||||
sujet: "",
|
||||
contenu: "",
|
||||
actif: true,
|
||||
});
|
||||
};
|
||||
|
||||
const handleCreate = () => {
|
||||
if (!formData.nom || !formData.sujet || !formData.contenu) {
|
||||
toast.error("Veuillez remplir tous les champs obligatoires");
|
||||
return;
|
||||
}
|
||||
createMutation.mutate(formData);
|
||||
};
|
||||
|
||||
const handleEdit = (rappel: any) => {
|
||||
setEditingRappel(rappel);
|
||||
setFormData({
|
||||
nom: rappel.nom,
|
||||
joursAvant: rappel.joursAvant,
|
||||
sujet: rappel.sujet,
|
||||
contenu: rappel.contenu,
|
||||
actif: rappel.actif,
|
||||
});
|
||||
setIsEditOpen(true);
|
||||
};
|
||||
|
||||
const handleUpdate = () => {
|
||||
if (!editingRappel) return;
|
||||
if (!formData.nom || !formData.sujet || !formData.contenu) {
|
||||
toast.error("Veuillez remplir tous les champs obligatoires");
|
||||
return;
|
||||
}
|
||||
updateMutation.mutate({
|
||||
id: editingRappel.id,
|
||||
...formData,
|
||||
});
|
||||
};
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
if (confirm("Êtes-vous sûr de vouloir supprimer ce rappel ?")) {
|
||||
deleteMutation.mutate({ id });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Rappels automatiques</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Configurez les rappels envoyés automatiquement avant les séquences
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setIsCreateOpen(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Nouveau rappel
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Bell className="h-5 w-5" />
|
||||
Liste des rappels configurés
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Les rappels actifs seront envoyés automatiquement aux apprenants inscrits
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nom</TableHead>
|
||||
<TableHead>Délai</TableHead>
|
||||
<TableHead>Sujet</TableHead>
|
||||
<TableHead>Statut</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{rappels && rappels.length > 0 ? (
|
||||
rappels.map((rappel) => (
|
||||
<TableRow key={rappel.id}>
|
||||
<TableCell className="font-medium">{rappel.nom}</TableCell>
|
||||
<TableCell>J-{rappel.joursAvant}</TableCell>
|
||||
<TableCell>{rappel.sujet}</TableCell>
|
||||
<TableCell>
|
||||
<span
|
||||
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${
|
||||
rappel.actif
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-gray-100 text-gray-800"
|
||||
}`}
|
||||
>
|
||||
{rappel.actif ? "Actif" : "Inactif"}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleEdit(rappel)}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDelete(rappel.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={5} className="text-center text-muted-foreground">
|
||||
Aucun rappel configuré
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Dialog de création */}
|
||||
<Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Créer un nouveau rappel</DialogTitle>
|
||||
<DialogDescription>
|
||||
Configurez un rappel automatique à envoyer avant les séquences
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nom">Nom du rappel *</Label>
|
||||
<Input
|
||||
id="nom"
|
||||
value={formData.nom}
|
||||
onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
|
||||
placeholder="Ex: Rappel J-15"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="joursAvant">Nombre de jours avant la séquence *</Label>
|
||||
<Input
|
||||
id="joursAvant"
|
||||
type="number"
|
||||
min="0"
|
||||
value={formData.joursAvant}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, joursAvant: parseInt(e.target.value) || 0 })
|
||||
}
|
||||
placeholder="Ex: 15"
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Le rappel sera envoyé ce nombre de jours avant le début de la séquence
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="sujet">Sujet de l'email *</Label>
|
||||
<Input
|
||||
id="sujet"
|
||||
value={formData.sujet}
|
||||
onChange={(e) => setFormData({ ...formData, sujet: e.target.value })}
|
||||
placeholder="Ex: Rappel - Formation dans 15 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="contenu">Contenu de l'email *</Label>
|
||||
<Textarea
|
||||
id="contenu"
|
||||
value={formData.contenu}
|
||||
onChange={(e) => setFormData({ ...formData, contenu: e.target.value })}
|
||||
placeholder="Utilisez {{nom_apprenant}}, {{titre_formation}}, {{date_debut}}, {{lieu}} comme variables"
|
||||
rows={8}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Variables disponibles : {"{"}{"{"} nom_apprenant {"}"}{"}"}, {"{"}{"{"} titre_formation {"}"}{"}"}, {"{"}{"{"} date_debut {"}"}{"}"}, {"{"}{"{"} lieu {"}"}{"}"}, {"{"}{"{"} formateur {"}"}{"}"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="actif"
|
||||
checked={formData.actif}
|
||||
onCheckedChange={(checked) => setFormData({ ...formData, actif: checked })}
|
||||
/>
|
||||
<Label htmlFor="actif">Rappel actif</Label>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsCreateOpen(false)}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleCreate} disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? "Création..." : "Créer"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Dialog de modification */}
|
||||
<Dialog open={isEditOpen} onOpenChange={setIsEditOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Modifier le rappel</DialogTitle>
|
||||
<DialogDescription>
|
||||
Modifiez la configuration du rappel automatique
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-nom">Nom du rappel *</Label>
|
||||
<Input
|
||||
id="edit-nom"
|
||||
value={formData.nom}
|
||||
onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
|
||||
placeholder="Ex: Rappel J-15"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-joursAvant">Nombre de jours avant la séquence *</Label>
|
||||
<Input
|
||||
id="edit-joursAvant"
|
||||
type="number"
|
||||
min="0"
|
||||
value={formData.joursAvant}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, joursAvant: parseInt(e.target.value) || 0 })
|
||||
}
|
||||
placeholder="Ex: 15"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-sujet">Sujet de l'email *</Label>
|
||||
<Input
|
||||
id="edit-sujet"
|
||||
value={formData.sujet}
|
||||
onChange={(e) => setFormData({ ...formData, sujet: e.target.value })}
|
||||
placeholder="Ex: Rappel - Formation dans 15 jours"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-contenu">Contenu de l'email *</Label>
|
||||
<Textarea
|
||||
id="edit-contenu"
|
||||
value={formData.contenu}
|
||||
onChange={(e) => setFormData({ ...formData, contenu: e.target.value })}
|
||||
placeholder="Utilisez {{nom_apprenant}}, {{titre_formation}}, {{date_debut}}, {{lieu}} comme variables"
|
||||
rows={8}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Variables disponibles : {"{"}{"{"} nom_apprenant {"}"}{"}"}, {"{"}{"{"} titre_formation {"}"}{"}"}, {"{"}{"{"} date_debut {"}"}{"}"}, {"{"}{"{"} lieu {"}"}{"}"}, {"{"}{"{"} formateur {"}"}{"}"}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Switch
|
||||
id="edit-actif"
|
||||
checked={formData.actif}
|
||||
onCheckedChange={(checked) => setFormData({ ...formData, actif: checked })}
|
||||
/>
|
||||
<Label htmlFor="edit-actif">Rappel actif</Label>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setIsEditOpen(false)}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleUpdate} disabled={updateMutation.isPending}>
|
||||
{updateMutation.isPending ? "Modification..." : "Modifier"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user