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

Checkpoint: Vue liste Solutions Logicielles : alternance de deux couleurs de fond (blanc pour les solutions paires, bleu très clair pour les solutions impaires) à chaque changement de solution. Les lignes rowSpan partagent la même couleur de fond que leur groupe. Effet hover doux sur chaque ligne. 0 erreur TypeScript.

Browse Source
This commit is contained in:
Manus
2026-04-17 11:25:13 -04:00
parent 5801ba4add
commit 11ffb77005
2 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
client/src/pages/SolutionsLogicielles.tsx
View File

@@ -277,10 +277,15 @@ export default function SolutionsLogicielles() {
</tr>
</thead>
<tbody>
{filtered.map((sol) => {
{filtered.map((sol, solIdx) => {
// Couleurs alternées : pair = blanc/gris très clair, impair = bleu très clair
const isEven = solIdx % 2 === 0;
const rowBg = isEven ? "bg-white hover:bg-blue-50/40" : "bg-blue-50/60 hover:bg-blue-100/50";
const rowBgSpan = isEven ? "bg-white" : "bg-blue-50/60";
if (sol.etablissements.length === 0) {
return (
<tr key={`sol-${sol.solutionId}-empty`} className="border-b border-border last:border-0 hover:bg-muted/20 transition-colors">
<tr key={`sol-${sol.solutionId}-empty`} className={`border-b border-border last:border-0 transition-colors ${rowBg}`}>
<td className="px-4 py-3 font-medium text-foreground">{sol.solutionNom}</td>
<td className="px-4 py-3 text-muted-foreground">{sol.editeurNom}</td>
<td className="px-4 py-3 hidden sm:table-cell">
@@ -302,17 +307,17 @@ export default function SolutionsLogicielles() {
);
}
return sol.etablissements.map((etab, idx) => (
<tr key={`sol-${sol.solutionId}-etab-${etab.id}`} className="border-b border-border last:border-0 hover:bg-muted/20 transition-colors">
<tr key={`sol-${sol.solutionId}-etab-${etab.id}`} className={`border-b border-border last:border-0 transition-colors ${idx === 0 ? rowBg : rowBgSpan + " hover:brightness-95"}`}>
{idx === 0 ? (
<>
<td className="px-4 py-3 font-semibold text-foreground align-top" rowSpan={sol.etablissements.length}>
<td className={`px-4 py-3 font-semibold text-foreground align-top ${rowBgSpan}`} rowSpan={sol.etablissements.length}>
<div className="flex items-center gap-2">
<Package size={13} className="text-blue-500 flex-shrink-0" />
{sol.solutionNom}
</div>
</td>
<td className="px-4 py-3 text-muted-foreground align-top" rowSpan={sol.etablissements.length}>{sol.editeurNom}</td>
<td className="px-4 py-3 hidden sm:table-cell align-top" rowSpan={sol.etablissements.length}>
<td className={`px-4 py-3 text-muted-foreground align-top ${rowBgSpan}`} rowSpan={sol.etablissements.length}>{sol.editeurNom}</td>
<td className={`px-4 py-3 hidden sm:table-cell align-top ${rowBgSpan}`} rowSpan={sol.etablissements.length}>
{sol.blocFonctionnelNom && (
<span className="text-xs bg-secondary text-secondary-foreground px-2 py-0.5 rounded-full border border-border">{sol.blocFonctionnelNom}</span>
)}
@@ -328,7 +333,7 @@ export default function SolutionsLogicielles() {
<td className="px-4 py-3 text-muted-foreground hidden md:table-cell">{etab.region ?? "—"}</td>
<td className="px-4 py-3"><EtatBadge etat={etab.etatDeploiement} /></td>
{isGestionnaire && idx === 0 ? (
<td className="px-4 py-3 align-top" rowSpan={sol.etablissements.length}>
<td className={`px-4 py-3 align-top ${rowBgSpan}`} rowSpan={sol.etablissements.length}>
<div className="flex items-center gap-1">
<button onClick={() => openEdit(sol)} className="p-1.5 rounded bg-blue-50 text-blue-600 hover:bg-blue-100 transition-colors" title="Modifier"><Pencil size={12} /></button>
<button onClick={() => { if (confirm(`Supprimer "${sol.solutionNom}" ?`)) deleteMutation.mutate({ id: sol.solutionId }); }} className="p-1.5 rounded bg-red-50 text-red-600 hover:bg-red-100 transition-colors" title="Supprimer"><Trash2 size={12} /></button>

4
todo.md
View File

@@ -84,3 +84,7 @@
- [x] Backend : procédure statistiques (stats par bloc fonctionnel, par région, taux de remplissage)
- [x] Page "Tableau de bord" : graphiques recharts (barres, camembert, indicateurs clés)
- [x] Lien "Tableau de bord" dans la sidebar (visible uniquement gestionnaires)
## Évolution v7
- [x] Vue liste Solutions Logicielles : alternance de couleurs de fond (blanc / bleu clair) à chaque changement de solution pour améliorer la lisibilité