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

Checkpoint: OPEX DSI : colonne Tendance ajoutée sur chaque ligne du tableau - pastille rouge+flèche montante (hausse > 2%), orange stable (< 2%), vert+flèche descendante (baisse), bleu "Nouveau" (pas de N-1). Pourcentage d'évolution affiché dans chaque pastille.

Browse Source
This commit is contained in:
Manus
2026-06-04 13:39:48 +00:00
parent eac06d1ca2
commit 7e360ca113
1 changed files with 36 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
client/src/pages/DsiOpex.tsx
View File

@@ -859,6 +859,7 @@ export default function DsiOpex() {
<th className="text-right px-4 py-3 font-medium text-muted-foreground" style={{ minWidth: '140px' }}> <th className="text-right px-4 py-3 font-medium text-muted-foreground" style={{ minWidth: '140px' }}>
<SortBtn col="montant" label={`Prév. ${annee}`} /> <SortBtn col="montant" label={`Prév. ${annee}`} />
</th> </th>
<th className="text-center px-3 py-3 font-medium text-muted-foreground w-24">Tendance</th>
<th className="text-right px-4 py-3 font-medium text-muted-foreground w-24">Répartition</th> <th className="text-right px-4 py-3 font-medium text-muted-foreground w-24">Répartition</th>
{!isValidated && <th className="px-4 py-3 w-20"></th>} {!isValidated && <th className="px-4 py-3 w-20"></th>}
</tr> </tr>
@@ -917,6 +918,41 @@ export default function DsiOpex() {
/> />
)} )}
</td> </td>
<td className="px-3 py-3 text-center">
{(() => {
const n1 = ligne.budget_n1;
const n = ligne.montant;
if (!n1 || n1 === 0) {
return n > 0
? <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-blue-100 text-blue-600">Nouveau</span>
: <span className="text-muted-foreground text-xs">—</span>;
}
const diff = n - n1;
const pctVar = (diff / n1) * 100;
if (Math.abs(pctVar) < 2) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-orange-100 text-orange-600">
<span>≈</span>
<span>stable</span>
</span>
);
} else if (diff > 0) {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-600">
<TrendingUp className="w-3 h-3" />
<span>+{pctVar.toFixed(1)}%</span>
</span>
);
} else {
return (
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-600">
<TrendingDown className="w-3 h-3" />
<span>{pctVar.toFixed(1)}%</span>
</span>
);
}
})()}
</td>
<td className="px-4 py-3"> <td className="px-4 py-3">
<div className="flex items-center gap-2 justify-end"> <div className="flex items-center gap-2 justify-end">
<div className="w-16 bg-muted rounded-full h-1.5 overflow-hidden"> <div className="w-16 bg-muted rounded-full h-1.5 overflow-hidden">