manus-admin/formation-manager-itinova
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Checkpoint: Amélioration majeure de la lisibilité de la colonne "Dates concernées" dans le tableau des rappels automatiques avec un système de badges colorés et iconographiques : formations en bleu avec icône GraduationCap, séquences en vert avec icône CalendarDays, dates individuelles en orange, et "Toutes les dates" en gris avec icône Calendar. Hiérarchie visuelle claire avec formations/séquences sur la première ligne et dates en dessous légèrement indentées. Chaque groupe formation/séquence est visuellement séparé pour faciliter le scan rapide. Les badges utilisent des couleurs de fond pastel (bg-blue-100, bg-green-100, bg-orange-50, bg-gray-50) avec texte contrasté pour une excellente lisibilité. Cette refonte transforme une colonne dense et difficile à lire en une interface intuitive et visuellement agréable.

Browse Source
This commit is contained in:
Manus
2026-01-08 10:24:58 -05:00
parent 6b047e74cb
commit bb3baf813a
2 changed files with 43 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
client/src/pages/AdminRappels.tsx
View File

@@ -21,8 +21,9 @@ import {
SelectValue,
} from "@/components/ui/select";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import { trpc } from "@/lib/trpc";
import { Bell, Download, Edit, Plus, Trash2 } from "lucide-react";
import { Bell, Download, Edit, Plus, Trash2, GraduationCap, Calendar, CalendarDays } from "lucide-react";
import { toast } from "sonner";
import { FileUpload } from "@/components/FileUpload";
import { DateFormationMultiSelect } from "@/components/DateFormationMultiSelect";
@@ -257,30 +258,53 @@ export default function AdminRappels() {
const formatDatesInfo = (rappel: any) => {
if (!rappel.datesDetails || rappel.datesDetails.length === 0) {
return <span className="text-muted-foreground italic">Toutes les dates</span>;
return (
<div className="flex items-center gap-2">
<Badge variant="outline" className="bg-gray-50 text-gray-600 border-gray-300">
<Calendar className="w-3 h-3 mr-1" />
Toutes les dates
</Badge>
</div>
);
}
// Grouper par formation et séquence
const grouped = rappel.datesDetails.reduce((acc: any, date: any) => {
const key = `${date.formationNom} - ${date.sequenceNom}`;
const key = `${date.formationNom}|||${date.sequenceNom}`;
if (!acc[key]) {
acc[key] = [];
acc[key] = {
formationNom: date.formationNom,
sequenceNom: date.sequenceNom,
dates: []
};
}
acc[key].push(date);
acc[key].dates.push(date);
return acc;
}, {});
return (
<div className="text-sm space-y-1">
{Object.entries(grouped).map(([key, dates]: [string, any]) => (
<div key={key}>
<div className="font-medium">{key}</div>
<div className="text-muted-foreground">
{dates.map((d: any, idx: number) => (
<span key={d.dateFormationId}>
<div className="space-y-2">
{Object.values(grouped).map((group: any, groupIdx: number) => (
<div key={groupIdx} className="space-y-1">
<div className="flex items-start gap-1 flex-wrap">
<Badge className="bg-blue-100 text-blue-800 border-blue-300 hover:bg-blue-100">
<GraduationCap className="w-3 h-3 mr-1" />
{group.formationNom}
</Badge>
<Badge className="bg-green-100 text-green-800 border-green-300 hover:bg-green-100">
<CalendarDays className="w-3 h-3 mr-1" />
{group.sequenceNom}
</Badge>
</div>
<div className="flex items-center gap-1 flex-wrap ml-1">
{group.dates.map((d: any, idx: number) => (
<Badge
key={d.dateFormationId}
variant="outline"
className="bg-orange-50 text-orange-700 border-orange-300 text-xs"
>
Date {d.ordre}
{idx < dates.length - 1 && ", "}
</span>
</Badge>
))}
</div>
</div>