Checkpoint: Trois améliorations majeures pour la gestion des séquences :
✅ **1. Indicateur visuel de remplissage** - Composant CapacityProgressBar avec barre de progression colorée - Affichage "X / Y" avec pourcentage - Couleurs automatiques : vert (<70%), orange (70-90%), rouge (>90%) - Intégré dans la colonne capacité du tableau des séquences ✅ **2. Vue calendrier mensuel** - Nouvelle page AdminCalendrier accessible depuis le menu - Calendrier mensuel avec navigation (mois précédent/suivant, aujourd'hui) - Affichage des séquences sur leurs dates respectives - Dialog de détails au clic sur une séquence - Vue complète avec toutes les informations (lieu, formateur, capacité, dates) ✅ **3. Système de rappels automatiques personnalisables** - Tables rappels et rappelsEnvoyes créées - Procédures tRPC complètes (list, create, update, delete) - Page AdminRappels avec interface de gestion - Configuration de rappels multiples (J-15, J-7, J-1, etc.) - Templates d'emails personnalisables avec variables dynamiques - Activation/désactivation des rappels - Infrastructure prête pour l'envoi automatique (nécessite service de planification externe) Ces améliorations facilitent grandement la planification et le suivi des formations.
This commit is contained in:
Manus Sandbox
226
client/src/pages/AdminCalendrier.tsx
Normal file
226
client/src/pages/AdminCalendrier.tsx
Normal file
@@ -0,0 +1,226 @@
|
||||
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 { trpc } from "@/lib/trpc";
|
||||
import { ChevronLeft, ChevronRight, Calendar as CalendarIcon } from "lucide-react";
|
||||
import { format, startOfMonth, endOfMonth, eachDayOfInterval, isSameMonth, isSameDay, addMonths, subMonths, startOfWeek, endOfWeek } from "date-fns";
|
||||
import { fr } from "date-fns/locale";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
|
||||
export default function AdminCalendrier() {
|
||||
const [currentDate, setCurrentDate] = useState(new Date());
|
||||
const [selectedSequence, setSelectedSequence] = useState<any>(null);
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
|
||||
const { data: sequences = [], isLoading } = trpc.sequences.list.useQuery();
|
||||
const { data: formations = [] } = trpc.formations.list.useQuery();
|
||||
|
||||
const getFormationName = (formationId: number) => {
|
||||
const formation = formations.find(f => f.id === formationId);
|
||||
return formation?.nom || "Formation inconnue";
|
||||
};
|
||||
|
||||
// Générer les jours du calendrier (incluant les jours du mois précédent/suivant pour remplir la grille)
|
||||
const monthStart = startOfMonth(currentDate);
|
||||
const monthEnd = endOfMonth(currentDate);
|
||||
const calendarStart = startOfWeek(monthStart, { weekStartsOn: 1 }); // Commence le lundi
|
||||
const calendarEnd = endOfWeek(monthEnd, { weekStartsOn: 1 });
|
||||
const calendarDays = eachDayOfInterval({ start: calendarStart, end: calendarEnd });
|
||||
|
||||
// Obtenir les séquences pour un jour donné
|
||||
const getSequencesForDay = (day: Date) => {
|
||||
return sequences.filter(sequence => {
|
||||
return sequence.dates.some((date: any) => {
|
||||
const dateDebut = new Date(date.dateDebut);
|
||||
return isSameDay(dateDebut, day);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
const handlePreviousMonth = () => {
|
||||
setCurrentDate(subMonths(currentDate, 1));
|
||||
};
|
||||
|
||||
const handleNextMonth = () => {
|
||||
setCurrentDate(addMonths(currentDate, 1));
|
||||
};
|
||||
|
||||
const handleToday = () => {
|
||||
setCurrentDate(new Date());
|
||||
};
|
||||
|
||||
const handleSequenceClick = (sequence: any) => {
|
||||
setSelectedSequence(sequence);
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
const getPublicCibleLabel = (publicCible: string) => {
|
||||
switch (publicCible) {
|
||||
case "directeur": return "Directeur";
|
||||
case "chef_service": return "Chef de service";
|
||||
case "tous": return "Tous";
|
||||
case "autre": return "Autre";
|
||||
default: return publicCible;
|
||||
}
|
||||
};
|
||||
|
||||
const getStatutBadge = (statut: string) => {
|
||||
switch (statut) {
|
||||
case "ouverte": return "bg-green-100 text-green-800";
|
||||
case "bloquee": return "bg-orange-100 text-orange-800";
|
||||
case "terminee": return "bg-gray-100 text-gray-800";
|
||||
default: return "bg-gray-100 text-gray-800";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DashboardLayout>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">Calendrier des séquences</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Vue mensuelle de toutes les séquences de formation planifiées
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="text-2xl">
|
||||
{format(currentDate, "MMMM yyyy", { locale: fr })}
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
{sequences.length} séquence(s) au total
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={handleToday}>
|
||||
Aujourd'hui
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" onClick={handlePreviousMonth}>
|
||||
<ChevronLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" onClick={handleNextMonth}>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="text-center py-8 text-muted-foreground">Chargement...</div>
|
||||
) : (
|
||||
<div className="border rounded-lg overflow-hidden">
|
||||
{/* En-tête des jours de la semaine */}
|
||||
<div className="grid grid-cols-7 bg-muted">
|
||||
{["Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"].map(day => (
|
||||
<div key={day} className="p-2 text-center text-sm font-medium">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Grille du calendrier */}
|
||||
<div className="grid grid-cols-7 auto-rows-fr">
|
||||
{calendarDays.map((day, index) => {
|
||||
const daySequences = getSequencesForDay(day);
|
||||
const isCurrentMonth = isSameMonth(day, currentDate);
|
||||
const isToday = isSameDay(day, new Date());
|
||||
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className={`min-h-[120px] border-t border-r p-2 ${
|
||||
!isCurrentMonth ? "bg-muted/30" : ""
|
||||
} ${isToday ? "bg-primary/5" : ""}`}
|
||||
>
|
||||
<div className={`text-sm font-medium mb-1 ${
|
||||
!isCurrentMonth ? "text-muted-foreground" : ""
|
||||
} ${isToday ? "text-primary font-bold" : ""}`}>
|
||||
{format(day, "d")}
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
{daySequences.map(sequence => (
|
||||
<button
|
||||
key={sequence.id}
|
||||
onClick={() => handleSequenceClick(sequence)}
|
||||
className="w-full text-left p-1 rounded text-xs bg-primary/10 hover:bg-primary/20 transition-colors"
|
||||
>
|
||||
<div className="font-medium truncate">{sequence.nom}</div>
|
||||
<div className="text-muted-foreground truncate">
|
||||
{getFormationName(sequence.formationId)}
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Dialog de détails de la séquence */}
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{selectedSequence?.nom}</DialogTitle>
|
||||
<DialogDescription>
|
||||
{selectedSequence && getFormationName(selectedSequence.formationId)}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
{selectedSequence && (
|
||||
<div className="space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Lieu</p>
|
||||
<p>{selectedSequence.lieu}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Public cible</p>
|
||||
<p>{getPublicCibleLabel(selectedSequence.publicCible)}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Formateur</p>
|
||||
<p>{selectedSequence.formateur || "-"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Capacité</p>
|
||||
<p>{selectedSequence.nbInscrits || 0} / {selectedSequence.capaciteMax}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground">Statut</p>
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatutBadge(selectedSequence.statut)}`}>
|
||||
{selectedSequence.statut}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm font-medium text-muted-foreground mb-2">Dates de formation</p>
|
||||
<div className="space-y-2">
|
||||
{selectedSequence.dates.map((date: any) => (
|
||||
<div key={date.id} className="p-2 bg-muted rounded">
|
||||
<p className="font-medium">Date {date.ordre}</p>
|
||||
<p className="text-sm">
|
||||
Du {format(new Date(date.dateDebut), "PPP 'à' HH:mm", { locale: fr })}
|
||||
</p>
|
||||
<p className="text-sm">
|
||||
au {format(new Date(date.dateFin), "PPP 'à' HH:mm", { locale: fr })}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
318
client/src/pages/AdminRappels.tsx
Normal file
318
client/src/pages/AdminRappels.tsx
Normal file
@@ -0,0 +1,318 @@
|
||||
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, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { trpc } from "@/lib/trpc";
|
||||
import { Plus, Pencil, Trash2, Bell, BellOff } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function AdminRappels() {
|
||||
const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
|
||||
const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
nom: "",
|
||||
joursAvant: 15,
|
||||
emailTemplate: "",
|
||||
actif: true,
|
||||
});
|
||||
const [editingId, setEditingId] = useState<number | null>(null);
|
||||
|
||||
const { data: rappels = [], isLoading, refetch } = trpc.rappels.list.useQuery();
|
||||
const createMutation = trpc.rappels.create.useMutation();
|
||||
const updateMutation = trpc.rappels.update.useMutation();
|
||||
const deleteMutation = trpc.rappels.delete.useMutation();
|
||||
|
||||
const resetForm = () => {
|
||||
setFormData({
|
||||
nom: "",
|
||||
joursAvant: 15,
|
||||
emailTemplate: "",
|
||||
actif: true,
|
||||
});
|
||||
setEditingId(null);
|
||||
};
|
||||
|
||||
const handleCreate = async () => {
|
||||
try {
|
||||
await createMutation.mutateAsync(formData);
|
||||
toast.success("Rappel créé avec succès");
|
||||
setIsCreateDialogOpen(false);
|
||||
resetForm();
|
||||
refetch();
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || "Erreur lors de la création du rappel");
|
||||
}
|
||||
};
|
||||
|
||||
const handleEdit = (rappel: any) => {
|
||||
setFormData({
|
||||
nom: rappel.nom,
|
||||
joursAvant: rappel.joursAvant,
|
||||
emailTemplate: rappel.emailTemplate,
|
||||
actif: rappel.actif,
|
||||
});
|
||||
setEditingId(rappel.id);
|
||||
setIsEditDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleUpdate = async () => {
|
||||
if (!editingId) return;
|
||||
|
||||
try {
|
||||
await updateMutation.mutateAsync({ id: editingId, ...formData });
|
||||
toast.success("Rappel mis à jour avec succès");
|
||||
setIsEditDialogOpen(false);
|
||||
resetForm();
|
||||
refetch();
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || "Erreur lors de la mise à jour du rappel");
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: number) => {
|
||||
if (!confirm("Êtes-vous sûr de vouloir supprimer ce rappel ?")) return;
|
||||
|
||||
try {
|
||||
await deleteMutation.mutateAsync({ id });
|
||||
toast.success("Rappel supprimé avec succès");
|
||||
refetch();
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || "Erreur lors de la suppression du rappel");
|
||||
}
|
||||
};
|
||||
|
||||
const templateExemple = `Bonjour {{prenom}} {{nom}},
|
||||
|
||||
Nous vous rappelons que votre formation "{{formationNom}}" - {{sequenceNom}} aura lieu dans {{joursAvant}} jours.
|
||||
|
||||
📅 Date : {{dateDebut}}
|
||||
📍 Lieu : {{lieu}}
|
||||
👨🏫 Formateur : {{formateur}}
|
||||
|
||||
Cordialement,
|
||||
L'équipe Formation Manager Itinova`;
|
||||
|
||||
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 formations
|
||||
</p>
|
||||
</div>
|
||||
<Dialog open={isCreateDialogOpen} onOpenChange={setIsCreateDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button onClick={() => resetForm()}>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Nouveau rappel
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Créer un rappel</DialogTitle>
|
||||
<DialogDescription>
|
||||
Configurez un nouveau rappel automatique à envoyer avant les formations
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="nom">Nom du rappel</Label>
|
||||
<Input
|
||||
id="nom"
|
||||
placeholder="Ex: Rappel J-15"
|
||||
value={formData.nom}
|
||||
onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="joursAvant">Jours avant la formation</Label>
|
||||
<Input
|
||||
id="joursAvant"
|
||||
type="number"
|
||||
min="1"
|
||||
placeholder="15"
|
||||
value={formData.joursAvant}
|
||||
onChange={(e) => setFormData({ ...formData, joursAvant: parseInt(e.target.value) || 0 })}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Nombre de jours avant la première date de formation
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="emailTemplate">Template d'email</Label>
|
||||
<Textarea
|
||||
id="emailTemplate"
|
||||
placeholder={templateExemple}
|
||||
value={formData.emailTemplate}
|
||||
onChange={(e) => setFormData({ ...formData, emailTemplate: e.target.value })}
|
||||
rows={10}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Variables disponibles : {"{{"} prenom {"}}"}, {"{{"} nom {"}}"}, {"{{"} formationNom {"}}"}, {"{{"} sequenceNom {"}}"}, {"{{"} dateDebut {"}}"}, {"{{"} lieu {"}}"}, {"{{"} formateur {"}}"}, {"{{"} joursAvant {"}}"}
|
||||
</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">Activer ce rappel</Label>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={() => setIsCreateDialogOpen(false)}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleCreate} disabled={createMutation.isPending}>
|
||||
{createMutation.isPending ? "Création..." : "Créer"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Liste des rappels</CardTitle>
|
||||
<CardDescription>
|
||||
Gérez les rappels automatiques envoyés aux apprenants avant les formations
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
{isLoading ? (
|
||||
<div className="text-center py-8 text-muted-foreground">Chargement...</div>
|
||||
) : rappels.length === 0 ? (
|
||||
<div className="text-center py-8 text-muted-foreground">
|
||||
Aucun rappel configuré. Créez votre premier rappel pour commencer.
|
||||
</div>
|
||||
) : (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Nom</TableHead>
|
||||
<TableHead>Jours avant</TableHead>
|
||||
<TableHead>Statut</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{rappels.map((rappel) => (
|
||||
<TableRow key={rappel.id}>
|
||||
<TableCell className="font-medium">{rappel.nom}</TableCell>
|
||||
<TableCell>J-{rappel.joursAvant}</TableCell>
|
||||
<TableCell>
|
||||
{rappel.actif ? (
|
||||
<span className="inline-flex items-center gap-1 text-green-600">
|
||||
<Bell className="h-4 w-4" />
|
||||
Actif
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 text-gray-500">
|
||||
<BellOff className="h-4 w-4" />
|
||||
Inactif
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleEdit(rappel)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(rappel.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Dialog de modification */}
|
||||
<Dialog open={isEditDialogOpen} onOpenChange={setIsEditDialogOpen}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Modifier le rappel</DialogTitle>
|
||||
<DialogDescription>
|
||||
Modifiez les paramètres du rappel automatique
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label htmlFor="edit-nom">Nom du rappel</Label>
|
||||
<Input
|
||||
id="edit-nom"
|
||||
placeholder="Ex: Rappel J-15"
|
||||
value={formData.nom}
|
||||
onChange={(e) => setFormData({ ...formData, nom: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="edit-joursAvant">Jours avant la formation</Label>
|
||||
<Input
|
||||
id="edit-joursAvant"
|
||||
type="number"
|
||||
min="1"
|
||||
placeholder="15"
|
||||
value={formData.joursAvant}
|
||||
onChange={(e) => setFormData({ ...formData, joursAvant: parseInt(e.target.value) || 0 })}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Nombre de jours avant la première date de formation
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="edit-emailTemplate">Template d'email</Label>
|
||||
<Textarea
|
||||
id="edit-emailTemplate"
|
||||
value={formData.emailTemplate}
|
||||
onChange={(e) => setFormData({ ...formData, emailTemplate: e.target.value })}
|
||||
rows={10}
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Variables disponibles : {"{{"} prenom {"}}"}, {"{{"} nom {"}}"}, {"{{"} formationNom {"}}"}, {"{{"} sequenceNom {"}}"}, {"{{"} dateDebut {"}}"}, {"{{"} lieu {"}}"}, {"{{"} formateur {"}}"}, {"{{"} joursAvant {"}}"}
|
||||
</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">Activer ce rappel</Label>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button variant="outline" onClick={() => setIsEditDialogOpen(false)}>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button onClick={handleUpdate} disabled={updateMutation.isPending}>
|
||||
{updateMutation.isPending ? "Mise à jour..." : "Mettre à jour"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</DashboardLayout>
|
||||
);
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useState } from "react";
|
||||
import DashboardLayout from "@/components/DashboardLayout";
|
||||
import { FormateurCombobox } from "@/components/FormateurCombobox";
|
||||
import { CapacityProgressBar } from "@/components/CapacityProgressBar";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
|
||||
@@ -664,7 +665,12 @@ export default function AdminSequences() {
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="max-w-xs truncate">{sequence.formateur || "-"}</TableCell>
|
||||
<TableCell>{sequence.nbInscrits || 0} / {sequence.capaciteMax}</TableCell>
|
||||
<TableCell>
|
||||
<CapacityProgressBar
|
||||
current={sequence.nbInscrits || 0}
|
||||
max={sequence.capaciteMax}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getStatutBadge(sequence.statut)}`}>
|
||||
{sequence.statut}
|
||||
|
||||
Reference in New Issue
Block a user