Checkpoint: Colonne Type réduite à 80px avec texte tronqué. Colonne Ventilation ajoutée dans le panneau showDetails (visible avec le bouton Voir détails), avec badge coloré vert=Prorata/bleu=Manuel. Ajout de mode_ventilation dans l'interface LigneOpex.

This commit is contained in:
Manus
2026-06-10 09:32:51 +00:00
parent bd9b52d39a
commit c762998f69

View File

@@ -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">