From 8965dd0ea6754777a99782d92062f248017dd1a4 Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Thu, 8 Jan 2026 10:54:11 -0500
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Ajout=20de=20deux=20vues=20(compl?=
 =?UTF-8?q?=C3=A8te=20et=20r=C3=A9duite)=20pour=20la=20gestion=20des=20s?=
 =?UTF-8?q?=C3=A9quences=20avec=20un=20bouton=20de=20basculement=20permett?=
 =?UTF-8?q?ant=20d'alterner=20entre=20les=20deux=20modes=20d'affichage.=20?=
 =?UTF-8?q?Vue=20compl=C3=A8te=20:=20affiche=20toutes=20les=20colonnes=20(?=
 =?UTF-8?q?Formation,=20Nom,=20Dates,=20Rappels=20configur=C3=A9s,=20Lieu,?=
 =?UTF-8?q?=20Formateur,=20Public=20cible,=20Capacit=C3=A9,=20Statut,=20Ac?=
 =?UTF-8?q?tions).=20Vue=20r=C3=A9duite=20:=20masque=20les=20colonnes=20Li?=
 =?UTF-8?q?eu,=20Formateur=20et=20Public=20cible=20pour=20un=20affichage?=
 =?UTF-8?q?=20plus=20compact=20et=20focalis=C3=A9=20sur=20les=20informatio?=
 =?UTF-8?q?ns=20essentielles.=20Simplification=20de=20l'affichage=20des=20?=
 =?UTF-8?q?rappels=20configur=C3=A9s=20:=20suppression=20des=20titres=20"D?=
 =?UTF-8?q?ate=201:",=20"Date=202:"=20etc.,=20les=20badges=20de=20rappels?=
 =?UTF-8?q?=20sont=20maintenant=20affich=C3=A9s=20directement=20sur=20une?=
 =?UTF-8?q?=20seule=20ligne=20par=20date,=20rendant=20la=20colonne=20plus?=
 =?UTF-8?q?=20compacte=20et=20lisible.=20Le=20bouton=20de=20basculement=20?=
 =?UTF-8?q?utilise=20les=20ic=C3=B4nes=20Maximize2=20(pour=20passer=20en?=
 =?UTF-8?q?=20vue=20compl=C3=A8te)=20et=20Minimize2=20(pour=20passer=20en?=
 =?UTF-8?q?=20vue=20r=C3=A9duite)=20avec=20un=20=C3=A9tat=20g=C3=A9r=C3=A9?=
 =?UTF-8?q?=20par=20isCompactView.=20Les=20colonnes=20conditionnelles=20ut?=
 =?UTF-8?q?ilisent=20{!isCompactView=20&&=20(<>...</>)}=20pour=20masquer/a?=
 =?UTF-8?q?fficher=20dynamiquement=20Lieu,=20Formateur=20et=20Public=20cib?=
 =?UTF-8?q?le.=20Cette=20double=20vue=20am=C3=A9liore=20l'exp=C3=A9rience?=
 =?UTF-8?q?=20utilisateur=20en=20permettant=20d'adapter=20l'affichage=20se?=
 =?UTF-8?q?lon=20le=20contexte=20d'utilisation=20:=20vue=20r=C3=A9duite=20?=
 =?UTF-8?q?pour=20un=20aper=C3=A7u=20rapide,=20vue=20compl=C3=A8te=20pour?=
 =?UTF-8?q?=20des=20informations=20d=C3=A9taill=C3=A9es.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/AdminSequences.tsx | 97 ++++++++++++++++++-----------
 todo.md                             |  5 ++
 2 files changed, 66 insertions(+), 36 deletions(-)

diff --git a/client/src/pages/AdminSequences.tsx b/client/src/pages/AdminSequences.tsx
index 4febfd5..f33f490 100644
--- a/client/src/pages/AdminSequences.tsx
+++ b/client/src/pages/AdminSequences.tsx
@@ -9,7 +9,7 @@ import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
 import { Badge } from "@/components/ui/badge";
 import { trpc } from "@/lib/trpc";
-import { Calendar, Edit, Eye, Plus, Trash2, X, Bell } from "lucide-react";
+import { Calendar, Edit, Eye, Plus, Trash2, X, Bell, Maximize2, Minimize2 } from "lucide-react";
 import FormateurCombobox from "@/components/FormateurCombobox";
 import CapacityProgressBar from "@/components/CapacityProgressBar";
 import { toast } from "sonner";
@@ -32,6 +32,7 @@ export default function AdminSequences() {
   const [filterStatut, setFilterStatut] = useState<string>("all");
   const [filterPublicCible, setFilterPublicCible] = useState<string>("all");
   const [sortBy, setSortBy] = useState<"date" | "lieu" | "capacite">("date");
+  const [isCompactView, setIsCompactView] = useState(false);
 
   const [formData, setFormData] = useState({
     formationId: "",
@@ -366,14 +367,32 @@ export default function AdminSequences() {
               Créez et gérez les séquences de formation avec leurs dates
             </p>
           </div>
-          <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
-            <DialogTrigger asChild>
-              <Button onClick={resetForm}>
-                <Plus className="h-4 w-4 mr-2" />
-                Nouvelle Séquence
-              </Button>
-            </DialogTrigger>
-            <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setIsCompactView(!isCompactView)}
+            >
+              {isCompactView ? (
+                <>
+                  <Maximize2 className="h-4 w-4 mr-2" />
+                  Vue complète
+                </>
+              ) : (
+                <>
+                  <Minimize2 className="h-4 w-4 mr-2" />
+                  Vue réduite
+                </>
+              )}
+            </Button>
+            <Dialog open={isCreateOpen} onOpenChange={setIsCreateOpen}>
+              <DialogTrigger asChild>
+                <Button onClick={resetForm}>
+                  <Plus className="h-4 w-4 mr-2" />
+                  Nouvelle Séquence
+                </Button>
+              </DialogTrigger>
+              <DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
               <DialogHeader>
                 <DialogTitle>Créer une nouvelle séquence</DialogTitle>
                 <DialogDescription>
@@ -564,7 +583,8 @@ export default function AdminSequences() {
                 </div>
               </form>
             </DialogContent>
-          </Dialog>
+            </Dialog>
+          </div>
         </div>
 
         {/* Filtres */}
@@ -677,9 +697,13 @@ export default function AdminSequences() {
                       <TableHead>Nom</TableHead>
                       <TableHead>Dates</TableHead>
                       <TableHead>Rappels configurés</TableHead>
-                      <TableHead>Lieu</TableHead>
-                      <TableHead>Formateur</TableHead>
-                      <TableHead>Public cible</TableHead>
+                      {!isCompactView && (
+                        <>
+                          <TableHead>Lieu</TableHead>
+                          <TableHead>Formateur</TableHead>
+                          <TableHead>Public cible</TableHead>
+                        </>
+                      )}
                       <TableHead>Capacité</TableHead>
                       <TableHead>Statut</TableHead>
                       <TableHead className="text-right">Actions</TableHead>
@@ -701,37 +725,38 @@ export default function AdminSequences() {
                           </div>
                         </TableCell>
                         <TableCell>
-                          <div className="space-y-2">
+                          <div className="space-y-1">
                             {sequence.dates.map((date: any) => (
-                              <div key={date.id} className="space-y-1">
-                                <div className="text-xs font-medium text-muted-foreground">Date {date.ordre}:</div>
-                                <div className="flex flex-wrap gap-1">
-                                  {date.rappels && date.rappels.length > 0 ? (
-                                    date.rappels.map((rappel: any) => (
-                                      <Badge 
-                                        key={rappel.id}
-                                        variant="outline"
-                                        className="bg-purple-50 text-purple-700 border-purple-300 text-xs"
-                                      >
-                                        <Bell className="w-3 h-3 mr-1" />
-                                        {rappel.nom}
-                                      </Badge>
-                                    ))
-                                  ) : (
-                                    <span className="text-xs text-muted-foreground italic">Aucun rappel</span>
-                                  )}
-                                </div>
+                              <div key={date.id} className="flex flex-wrap gap-1">
+                                {date.rappels && date.rappels.length > 0 ? (
+                                  date.rappels.map((rappel: any) => (
+                                    <Badge 
+                                      key={rappel.id}
+                                      variant="outline"
+                                      className="bg-purple-50 text-purple-700 border-purple-300 text-xs"
+                                    >
+                                      <Bell className="w-3 h-3 mr-1" />
+                                      {rappel.nom}
+                                    </Badge>
+                                  ))
+                                ) : (
+                                  <span className="text-xs text-muted-foreground italic">Aucun rappel</span>
+                                )}
                               </div>
                             ))}
                           </div>
                         </TableCell>
-                        <TableCell className="max-w-xs truncate">{sequence.lieu}</TableCell>
-                        <TableCell className="text-sm">{sequence.formateur?.nom || "-"}</TableCell>
-                        <TableCell>
+                        {!isCompactView && (
+                          <>
+                            <TableCell className="max-w-xs truncate">{sequence.lieu}</TableCell>
+                            <TableCell className="text-sm">{sequence.formateur?.nom || "-"}</TableCell>
+                            <TableCell>
                           <span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium ${getPublicCibleBadge(sequence.publicCible)}`}>
                             {getPublicCibleLabel(sequence.publicCible)}
                           </span>
-                        </TableCell>
+                            </TableCell>
+                          </>
+                        )}
                         <TableCell>
                           <CapacityProgressBar
                             nbInscrits={sequence.nbInscrits || 0}
diff --git a/todo.md b/todo.md
index 5643610..ca53a09 100644
--- a/todo.md
+++ b/todo.md
@@ -590,3 +590,8 @@
 - [x] Modifier le backend pour récupérer les rappels associés à chaque date
 - [x] Ajouter la colonne "Rappels configurés" dans le tableau des séquences
 - [x] Afficher les rappels avec badges visuels similaires à la page des rappels
+
+## Vues complète et réduite pour la gestion des séquences
+- [x] Ajouter un bouton de basculement entre vue complète et vue réduite
+- [x] Masquer les colonnes Lieu, Public cible, Formateur en vue réduite
+- [x] Simplifier l'affichage des rappels (supprimer "Date 1:", afficher sur une ligne)