Checkpoint: 1. Renommage de Prorata classe 6 en Prorata C 6 dans DsiOpex.tsx, data_opex.json et data_opex_2025.json. 2. Colonne Type déplacée en mode showDetails. 3. Colonne Ventilation (avec bouton bascule) affichée en mode normal (toujours visible). Ordre des colonnes : Catégorie → Facturation → Ventilation → [Type] → [Compte] → Budget N-1 → Prév.

This commit is contained in:
Manus
2026-06-10 09:47:42 +00:00
parent 1abd40cc1c
commit 954421088e
3 changed files with 81 additions and 81 deletions

View File

@@ -493,14 +493,14 @@ export default function DsiOpex() {
const CATEGORIES_FILTER = useMemo(() => ['Toutes', ...categoriesPresentes], [categoriesPresentes]);
// Basculer le mode de ventilation d'une ligne (Prorata classe 6 ↔ Manuel)
// Basculer le mode de ventilation d'une ligne (Prorata C 6 ↔ Manuel)
const handleToggleVentilation = useCallback((id: string) => {
if (isValidated) return;
setOpexState(prev => ({
...prev,
lignes: prev.lignes.map(l => l.id === id ? {
...l,
mode_ventilation: (l.mode_ventilation === 'Manuel') ? 'Prorata classe 6' : 'Manuel',
mode_ventilation: (l.mode_ventilation === 'Manuel') ? 'Prorata C 6' : 'Manuel',
} : l),
}));
setIsDirty(true);
@@ -1091,10 +1091,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-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>
<th className="text-left px-4 py-3 font-medium text-muted-foreground hidden xl:table-cell">Ventilation</th>
{showDetails && <th className="text-left px-3 py-3 font-medium text-muted-foreground hidden lg:table-cell w-20 max-w-[80px]">Type</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}`} />
@@ -1138,31 +1138,31 @@ export default function DsiOpex() {
{ligne.categorie}
</span>
</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>
{/* Ventilation — toujours visible (affichage normal) */}
<td className="px-4 py-3 text-xs hidden xl:table-cell">
{isValidated ? (
<span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${
ligne.mode_ventilation === 'Manuel' ? 'bg-blue-100 text-blue-700' : 'bg-emerald-100 text-emerald-700'
}`}>{ligne.mode_ventilation === 'Manuel' ? 'Manuel' : 'Prorata C 6'}</span>
) : (
<button
onClick={() => handleToggleVentilation(ligne.id)}
title="Cliquer pour basculer Prorata C 6 ↔ Manuel"
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors hover:opacity-80 cursor-pointer ${
ligne.mode_ventilation === 'Manuel'
? 'bg-blue-100 text-blue-700 border-blue-300 hover:bg-blue-200'
: 'bg-emerald-100 text-emerald-700 border-emerald-300 hover:bg-emerald-200'
}`}
>
{ligne.mode_ventilation === 'Manuel' ? '🔒' : '🔓'}
{ligne.mode_ventilation === 'Manuel' ? 'Manuel' : 'Prorata C 6'}
</button>
)}
</td>
{/* Type — visible uniquement en mode détails */}
{showDetails && <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>}
{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">
{isValidated ? (
<span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${
ligne.mode_ventilation === 'Manuel' ? 'bg-blue-100 text-blue-700' : 'bg-emerald-100 text-emerald-700'
}`}>{ligne.mode_ventilation || 'Prorata classe 6'}</span>
) : (
<button
onClick={() => handleToggleVentilation(ligne.id)}
title="Cliquer pour basculer Prorata ↔ Manuel"
className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium border transition-colors hover:opacity-80 cursor-pointer ${
ligne.mode_ventilation === 'Manuel'
? 'bg-blue-100 text-blue-700 border-blue-300 hover:bg-blue-200'
: 'bg-emerald-100 text-emerald-700 border-emerald-300 hover:bg-emerald-200'
}`}
>
{ligne.mode_ventilation === 'Manuel' ? '🔒' : '🔓'}
{ligne.mode_ventilation || 'Prorata classe 6'}
</button>
)}
</td>
)}
<td className="px-4 py-3 text-right text-sm text-muted-foreground tabular-nums">
{formatNum(ligne.budget_n1)}
</td>
@@ -1327,7 +1327,7 @@ export default function DsiOpex() {
? 'text-blue-700 bg-blue-50/60 border-b-2 border-blue-400'
: 'text-emerald-700 bg-emerald-50/60 border-b-2 border-emerald-400'
}`}
title={`${ligne.libelle} — ${isManuel ? 'Saisie manuelle' : 'Prorata classe 6'} — ${formatEuros(ligne.montant)}`}
title={`${ligne.libelle} — ${isManuel ? 'Saisie manuelle' : 'Prorata C 6'} — ${formatEuros(ligne.montant)}`}
>
<span className="block truncate max-w-[100px]" style={{ writingMode: 'horizontal-tb' }}>
{ligne.libelle.length > 18 ? ligne.libelle.slice(0, 16) + '' : ligne.libelle}