maximus/Simpl-Resultat
1
0
Fork 0
Code Issues Pull requests Projects Releases 10 Packages Wiki Activity Actions

fix: sticky category column and month dropdown selector (#29) #30

Merged
maximus merged 4 commits from fix/simpl-resultat-29-budget-visual-adjustments into main 2026-03-10 01:29:28 +00:00
Conversation 4 Commits 4 Files changed 7 +69 -38
medic-bot commented 2026-03-09 18:06:08 +00:00
Collaborator
Copy link

Summary

Fixes #29 — Visual adjustments to the Budget vs Actual table:

  • Sticky category column: Categories stay visible when scrolling horizontally. Added sticky left-0 with proper z-index and background colors to all category cells (header, data rows, section totals, grand total).
  • Month dropdown selector: Replaced the arrow-based MonthNavigator with an inline title "Budget vs Réel pour le mois de [dropdown]" where the month is a <select> dropdown showing 24 months.
  • Default to last completed month: The initial month now defaults to the previous month instead of the current month.

Files changed

  • src/components/reports/BudgetVsActualTable.tsx — sticky positioning on category cells
  • src/pages/ReportsPage.tsx — title + dropdown replacing MonthNavigator
  • src/hooks/useReports.ts — default month logic + setBudgetMonth callback
  • src/i18n/locales/fr.json / en.json — new reports.bva.titlePrefix key
  • CHANGELOG.md / CHANGELOG.fr.md — documented changes

Test plan

  • Open Budget vs Actual tab and verify category column stays fixed on horizontal scroll
  • Verify title shows "Budget vs Réel pour le mois de [mois]" with dropdown
  • Verify dropdown shows 24 months and selecting one updates the table
  • Verify default month is the previous completed month
  • Verify FR/EN translations work correctly

🤖 Generated with Claude Code

## Summary Fixes #29 — Visual adjustments to the Budget vs Actual table: - **Sticky category column**: Categories stay visible when scrolling horizontally. Added `sticky left-0` with proper `z-index` and background colors to all category cells (header, data rows, section totals, grand total). - **Month dropdown selector**: Replaced the arrow-based MonthNavigator with an inline title "Budget vs Réel pour le mois de [dropdown]" where the month is a `<select>` dropdown showing 24 months. - **Default to last completed month**: The initial month now defaults to the previous month instead of the current month. ## Files changed - `src/components/reports/BudgetVsActualTable.tsx` — sticky positioning on category cells - `src/pages/ReportsPage.tsx` — title + dropdown replacing MonthNavigator - `src/hooks/useReports.ts` — default month logic + `setBudgetMonth` callback - `src/i18n/locales/fr.json` / `en.json` — new `reports.bva.titlePrefix` key - `CHANGELOG.md` / `CHANGELOG.fr.md` — documented changes ## Test plan - [ ] Open Budget vs Actual tab and verify category column stays fixed on horizontal scroll - [ ] Verify title shows "Budget vs Réel pour le mois de [mois]" with dropdown - [ ] Verify dropdown shows 24 months and selecting one updates the table - [ ] Verify default month is the previous completed month - [ ] Verify FR/EN translations work correctly 🤖 Generated with [Claude Code](https://claude.com/claude-code)
medic-bot added 1 commit 2026-03-09 18:06:09 +00:00 
- Add sticky left-0 positioning to all category cells in BudgetVsActualTable
- Replace MonthNavigator arrows with inline title + dropdown month selector
- Default budget month to previous completed month instead of current
- Add i18n keys for new title prefix (FR/EN)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
medic-bot commented 2026-03-09 23:42:03 +00:00
Author
Collaborator
Copy link

Reviewer automatique — needs-fix

La colonne sticky utilise des backgrounds semi-transparents (opacity /30, /15) qui laissent le contenu des cellules de données visible en dessous lors du scroll horizontal — ça annule le bénéfice visuel du sticky. La ligne de section header a un sticky sans background propre sur le td. Aussi, pas de tests ajoutés pour la nouvelle logique de mois par défaut.

Suggestions de simplification

  • src/pages/ReportsPage.tsx : L'IIFE (() => { ... })() dans le JSX pour générer les options du select est difficile à lire. Extraire la génération des options dans un useMemo ou une constante en haut du composant.
  • src/hooks/useReports.ts : navigateBudgetMonth est toujours défini et exporté mais n'est plus utilisé dans ReportsPage (le seul consommateur visible). Si plus aucun composant ne l'utilise, le supprimer pour éviter le code mort.

Problèmes détectés

  • src/components/reports/BudgetVsActualTable.tsx:227 [high] Les backgrounds des cellules sticky catégorie sont semi-transparents (bg-[var(--muted)]/30, bg-[var(--muted)]/15). Lors du scroll horizontal, les cellules de données glissent sous la colonne fixée et sont visibles à travers. Il faut des backgrounds 100% opaques sur toutes les cellules sticky (utiliser des couleurs solides, par ex. bg-[var(--card)] ou une variable CSS opaque dédiée).
  • src/components/reports/BudgetVsActualTable.tsx:210 [medium] Le td de section header (colSpan={9}, sticky left-0) n'a pas de background propre — il hérite du bg-[var(--muted)]/50 du <tr> parent. Les backgrounds de <tr> ne suivent pas les éléments sticky dans la plupart des navigateurs. Ajouter un background opaque directement sur le <td>.
  • src/components/reports/BudgetVsActualTable.tsx:260 [medium] Même problème : la cellule du total de section (sticky left-0) a bg-[var(--muted)]/40 — semi-transparent. Le contenu scrollant sera visible en dessous.
  • src/components/reports/BudgetVsActualTable.tsx:287 [medium] La cellule du grand total (sticky left-0) a aussi bg-[var(--muted)]/20 — semi-transparent. Même problème de bleed-through.
  • src/components/reports/BudgetVsActualTable.tsx:227 [low] Classe px-3 dupliquée pour le cas isParent && !isIntermediateParent : elle apparaît dans le bloc conditionnel du background ET dans le bloc conditionnel du padding. Pas de bug fonctionnel mais code confus.
## Reviewer automatique — needs-fix La colonne sticky utilise des backgrounds semi-transparents (opacity /30, /15) qui laissent le contenu des cellules de données visible en dessous lors du scroll horizontal — ça annule le bénéfice visuel du sticky. La ligne de section header a un sticky sans background propre sur le td. Aussi, pas de tests ajoutés pour la nouvelle logique de mois par défaut. ### Suggestions de simplification - **src/pages/ReportsPage.tsx** : L'IIFE `(() => { ... })()` dans le JSX pour générer les options du select est difficile à lire. Extraire la génération des options dans un `useMemo` ou une constante en haut du composant. - **src/hooks/useReports.ts** : `navigateBudgetMonth` est toujours défini et exporté mais n'est plus utilisé dans ReportsPage (le seul consommateur visible). Si plus aucun composant ne l'utilise, le supprimer pour éviter le code mort. ### Problèmes détectés - **src/components/reports/BudgetVsActualTable.tsx:227** [high] Les backgrounds des cellules sticky catégorie sont semi-transparents (`bg-[var(--muted)]/30`, `bg-[var(--muted)]/15`). Lors du scroll horizontal, les cellules de données glissent sous la colonne fixée et sont visibles à travers. Il faut des backgrounds 100% opaques sur toutes les cellules sticky (utiliser des couleurs solides, par ex. `bg-[var(--card)]` ou une variable CSS opaque dédiée). - **src/components/reports/BudgetVsActualTable.tsx:210** [medium] Le td de section header (`colSpan={9}`, `sticky left-0`) n'a pas de background propre — il hérite du `bg-[var(--muted)]/50` du `<tr>` parent. Les backgrounds de `<tr>` ne suivent pas les éléments sticky dans la plupart des navigateurs. Ajouter un background opaque directement sur le `<td>`. - **src/components/reports/BudgetVsActualTable.tsx:260** [medium] Même problème : la cellule du total de section (`sticky left-0`) a `bg-[var(--muted)]/40` — semi-transparent. Le contenu scrollant sera visible en dessous. - **src/components/reports/BudgetVsActualTable.tsx:287** [medium] La cellule du grand total (`sticky left-0`) a aussi `bg-[var(--muted)]/20` — semi-transparent. Même problème de bleed-through. - **src/components/reports/BudgetVsActualTable.tsx:227** [low] Classe `px-3` dupliquée pour le cas `isParent && !isIntermediateParent` : elle apparaît dans le bloc conditionnel du background ET dans le bloc conditionnel du padding. Pas de bug fonctionnel mais code confus.
maximus added 1 commit 2026-03-10 00:48:11 +00:00 
- Replace semi-transparent backgrounds on sticky columns with opaque
  color-mix equivalents so scrolled content is fully hidden
- Add opaque background to section header sticky td
- Extract IIFE month options in ReportsPage into a useMemo
medic-bot commented 2026-03-10 00:54:16 +00:00
Author
Collaborator
Copy link

Reviewer automatique — needs-simplify

Le fix sticky avec color-mix est correct et résout le problème de transparence signalé au round 1. La logique de mois par défaut est correcte. Reste du code mort (navigateBudgetMonth) et une classe CSS dupliquée à nettoyer.

Suggestions de simplification

  • src/hooks/useReports.ts : navigateBudgetMonth n'est plus utilisé nulle part (l'import a été retiré de ReportsPage.tsx au profit de setBudgetMonth). Supprimer la fonction et son export pour éviter le code mort.
  • src/components/reports/BudgetVsActualTable.tsx : Ligne ~223 : la classe px-3 apparaît en double pour les lignes parent dans le className du td sticky — une fois dans le ternaire de background (px-3 bg-[color-mix(...)]) et une fois dans le ternaire de padding original (${isParent && !isIntermediateParent ? "px-3" : paddingClass}). Retirer px-3 du premier ternaire et ne garder la logique de padding que dans le second.
## Reviewer automatique — needs-simplify Le fix sticky avec color-mix est correct et résout le problème de transparence signalé au round 1. La logique de mois par défaut est correcte. Reste du code mort (navigateBudgetMonth) et une classe CSS dupliquée à nettoyer. ### Suggestions de simplification - **src/hooks/useReports.ts** : `navigateBudgetMonth` n'est plus utilisé nulle part (l'import a été retiré de ReportsPage.tsx au profit de `setBudgetMonth`). Supprimer la fonction et son export pour éviter le code mort. - **src/components/reports/BudgetVsActualTable.tsx** : Ligne ~223 : la classe `px-3` apparaît en double pour les lignes parent dans le className du td sticky — une fois dans le ternaire de background (`px-3 bg-[color-mix(...)]`) et une fois dans le ternaire de padding original (`${isParent && !isIntermediateParent ? "px-3" : paddingClass}`). Retirer `px-3` du premier ternaire et ne garder la logique de padding que dans le second.
maximus added 1 commit 2026-03-10 01:03:47 +00:00 
- Remove dead code: navigateBudgetMonth function and its export from
  useReports.ts (replaced by setBudgetMonth, no longer imported anywhere)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
medic-bot commented 2026-03-10 01:12:26 +00:00
Author
Collaborator
Copy link

Reviewer automatique — needs-simplify

Les corrections des rounds précédents (color-mix pour les backgrounds, suppression de navigateBudgetMonth) sont bien appliquées. La logique de mois par défaut et le sticky sont corrects. Il reste une classe CSS dupliquée signalée au round 2 et une ligne illisible à nettoyer.

Suggestions de simplification

  • src/components/reports/BudgetVsActualTable.tsx : Ligne ~226 : la classe px-3 est dupliquée pour le cas isParent && !isIntermediateParent. Elle apparaît dans le premier ternaire (avec le bg) ET dans le second ternaire (logique de padding). C'était signalé au round 2. Fusionner les deux ternaires en un seul qui gère à la fois le background et le padding, par exemple : ${isParent && !isIntermediateParent ? "px-3 bg-[color-mix(...)]" : isIntermediateParent ? ${paddingClass} bg-[color-mix(...)]:${paddingClass} bg-[var(--card)]} — et retirer le second ternaire.
  • src/components/reports/BudgetVsActualTable.tsx : Ligne ~226 : le className du <td> sticky des lignes de catégories fait ~300 caractères sur une seule ligne. Extraire la logique de classes dans une variable locale (ex. const stickyCellClasses = ...) au-dessus du JSX pour améliorer la lisibilité.
## Reviewer automatique — needs-simplify Les corrections des rounds précédents (color-mix pour les backgrounds, suppression de navigateBudgetMonth) sont bien appliquées. La logique de mois par défaut et le sticky sont corrects. Il reste une classe CSS dupliquée signalée au round 2 et une ligne illisible à nettoyer. ### Suggestions de simplification - **src/components/reports/BudgetVsActualTable.tsx** : Ligne ~226 : la classe `px-3` est dupliquée pour le cas `isParent && !isIntermediateParent`. Elle apparaît dans le premier ternaire (avec le bg) ET dans le second ternaire (logique de padding). C'était signalé au round 2. Fusionner les deux ternaires en un seul qui gère à la fois le background et le padding, par exemple : `${isParent && !isIntermediateParent ? "px-3 bg-[color-mix(...)]" : isIntermediateParent ? `${paddingClass} bg-[color-mix(...)]` : `${paddingClass} bg-[var(--card)]`}` — et retirer le second ternaire. - **src/components/reports/BudgetVsActualTable.tsx** : Ligne ~226 : le className du `<td>` sticky des lignes de catégories fait ~300 caractères sur une seule ligne. Extraire la logique de classes dans une variable locale (ex. `const stickyCellClasses = ...`) au-dessus du JSX pour améliorer la lisibilité.
maximus added 1 commit 2026-03-10 01:19:11 +00:00 
Clean up the sticky category cell className: remove the duplicated
px-3 for top-level parents and break the long ternary into readable
multi-line format.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
medic-bot commented 2026-03-10 01:22:37 +00:00
Author
Collaborator
Copy link

Reviewer automatique — approved

Les corrections des rounds précédents sont toutes appliquées : backgrounds solides via color-mix (plus de transparence), suppression de navigateBudgetMonth et de l'import MonthNavigator, logique de mois par défaut correcte. Le code est propre et prêt pour merge.

Suggestions de simplification

  • src/components/reports/BudgetVsActualTable.tsx : Ligne ~211 : le <td colSpan={9}> du section header a sticky left-0 mais comme il couvre toutes les colonnes, le sticky est sans effet. Retirer sticky left-0 de cette cellule pour plus de clarté (cosmétique, non bloquant).
## Reviewer automatique — approved Les corrections des rounds précédents sont toutes appliquées : backgrounds solides via color-mix (plus de transparence), suppression de navigateBudgetMonth et de l'import MonthNavigator, logique de mois par défaut correcte. Le code est propre et prêt pour merge. ### Suggestions de simplification - **src/components/reports/BudgetVsActualTable.tsx** : Ligne ~211 : le `<td colSpan={9}>` du section header a `sticky left-0` mais comme il couvre toutes les colonnes, le sticky est sans effet. Retirer `sticky left-0` de cette cellule pour plus de clarté (cosmétique, non bloquant).
maximus force-pushed fix/simpl-resultat-29-budget-visual-adjustments from 4742f6444f to 64b7d8d11b 2026-03-10 01:28:54 +00:00 Compare
maximus merged commit 7458e087e1 into main 2026-03-10 01:29:28 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
source:analyste

Créée par le Super-Analyste

  
source:defenseur

Créée par l Escouade Défenseur

  
source:human

Créée par un humain

  
source:medic

Créée par le Medic (auto-détection)

  
status:approved

PR approuvée, prête à merger

  
status:blocked

Bloquée (question, dépendance, clarification)

  
status:in-progress

Un agent (Medic/Dev) travaille dessus

  
status:needs-fix

Reviewer demande des corrections

  
status:ready

Analysée et documentée, prête à prendre

  
status:review

PR créée, en attente du Reviewer

  
status:triage

Nouvelle issue, pas encore analysée

  
type:bug

Correction de bug → Medic

  
type:feature

Nouvelle fonctionnalité → Dev

  
type:infra

Config, CI/CD, déploiement → Dev

  
type:refactor

Refactoring / amélioration technique → Dev

  
type:schema

Modèle de données / migrations → Dev

  
type:security

Issue de sécurité → Medic ou Dev

No labels
source:analyste
source:defenseur
source:human
source:medic
status:approved
status:blocked
status:in-progress
status:needs-fix
status:ready
status:review
status:triage
type:bug
type:feature
type:infra
type:refactor
type:schema
type:security
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: maximus/Simpl-Resultat#30
No description provided.
Delete branch "fix/simpl-resultat-29-budget-visual-adjustments"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?