From c762998f69f9c99dab5872e85143a8fc014e0019 Mon Sep 17 00:00:00 2001
From: Manus <dev-agent@manus.ai>
Date: Wed, 10 Jun 2026 09:32:51 +0000
Subject: [PATCH] =?UTF-8?q?Checkpoint:=20Colonne=20Type=20r=C3=A9duite=20?=
 =?UTF-8?q?=C3=A0=2080px=20avec=20texte=20tronqu=C3=A9.=20Colonne=20Ventil?=
 =?UTF-8?q?ation=20ajout=C3=A9e=20dans=20le=20panneau=20showDetails=20(vis?=
 =?UTF-8?q?ible=20avec=20le=20bouton=20Voir=20d=C3=A9tails),=20avec=20badg?=
 =?UTF-8?q?e=20color=C3=A9=20vert=3DProrata/bleu=3DManuel.=20Ajout=20de=20?=
 =?UTF-8?q?mode=5Fventilation=20dans=20l'interface=20LigneOpex.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/pages/DsiOpex.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/client/src/pages/DsiOpex.tsx b/client/src/pages/DsiOpex.tsx
index 62f3273..2f7f689 100644
--- a/client/src/pages/DsiOpex.tsx
+++ b/client/src/pages/DsiOpex.tsx
@@ -107,6 +107,7 @@ interface LigneOpex {
   budget_n1: number;
   montant: number;      // montant prévisionnel éditable
   isCustom: boolean;    // true = ajoutée par l'utilisateur
+  mode_ventilation?: string | null;
 }
 
 interface OpexAnneeState {
@@ -1063,9 +1064,10 @@ export default function DsiOpex() {
                         <SortBtn col="libelle" label="Poste de charge" />
                       </th>
                       <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden md:table-cell">Catégorie</th>
-                      <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden lg:table-cell">Type</th>
+                      <th className="text-left px-3 py-3 font-medium text-muted-foreground hidden lg:table-cell w-20 max-w-[80px]">Type</th>
                       <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden xl:table-cell">Facturation</th>
                       {showDetails && <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden xl:table-cell">Compte</th>}
+                      {showDetails && <th className="text-left px-4 py-3 font-medium text-muted-foreground hidden xl:table-cell">Ventilation</th>}
                       <th className="text-right px-4 py-3 font-medium text-muted-foreground">Budget N-1</th>
                       <th className="text-right px-4 py-3 font-medium text-muted-foreground" style={{ minWidth: '140px' }}>
                         <SortBtn col="montant" label={`Prév. ${annee}`} />
@@ -1109,9 +1111,10 @@ export default function DsiOpex() {
                                 {ligne.categorie}
                               </span>
                             </td>
-                            <td className="px-4 py-3 text-sm text-muted-foreground hidden lg:table-cell">{ligne.type || '—'}</td>
+                            <td className="px-3 py-3 text-xs text-muted-foreground hidden lg:table-cell w-20 max-w-[80px] truncate" title={ligne.type || ''}>{ligne.type || '—'}</td>
                             <td className="px-4 py-3 text-sm text-muted-foreground hidden xl:table-cell">{ligne.facturation || '—'}</td>
                             {showDetails && <td className="px-4 py-3 text-xs font-mono text-muted-foreground hidden xl:table-cell">{ligne.compte || '—'}</td>}
+                            {showDetails && <td className="px-4 py-3 text-xs hidden xl:table-cell">{(() => { const mv = ligne.mode_ventilation || 'Prorata'; const isManuelV = mv === 'Manuel'; return <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${isManuelV ? 'bg-blue-100 text-blue-700' : 'bg-emerald-100 text-emerald-700'}`}>{mv}</span>; })()}</td>}
                             <td className="px-4 py-3 text-right text-sm text-muted-foreground tabular-nums">
                               {formatNum(ligne.budget_n1)}
                             </td>
@@ -1216,7 +1219,7 @@ export default function DsiOpex() {
                   </tbody>
                   <tfoot>
                     <tr className="bg-muted/40 border-t-2 border-border">
-                      <td colSpan={showDetails ? (isValidated ? 7 : 8) : (isValidated ? 6 : 7)} className="px-4 py-3 font-bold text-foreground">
+                      <td colSpan={showDetails ? (isValidated ? 9 : 10) : (isValidated ? 6 : 7)} className="px-4 py-3 font-bold text-foreground">
                         TOTAL {selectedCategorie !== 'Toutes' ? selectedCategorie : 'OPEX DSI'} {annee}
                       </td>
                       <td className="px-4 py-3 text-right font-bold text-orange-600 text-base tabular-nums">