From 087ada22504e08914a21947270e8e1316277ee62 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Thu, 30 Mar 2023 00:07:38 +0200
Subject: [PATCH 1/5] UX: Better use of flex-table and tables in budget twig
 templates

---
 .../Resources/views/Budget/_budget.html.twig  | 20 ++++++-------------
 .../views/Budget/_current_budget.html.twig    | 15 +++-----------
 .../Resources/views/Budget/_macros.html.twig  |  8 +++-----
 .../Resources/views/Person/index.html.twig    | 10 ++++------
 4 files changed, 16 insertions(+), 37 deletions(-)

diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
index 6e248bf0c..e11a822cd 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
@@ -32,28 +32,21 @@
     {% endif %}
 {% endfor %}
 
-
 <h3 class="subtitle">{{ 'Actual budget'|trans }}</h3>
-
 {% if actualCharges|length > 0 or actualResources|length > 0 %}
-    {% include 'ChillBudgetBundle:Budget:_current_budget.html.twig' with {
+    {% include '@ChillBudget/Budget/_current_budget.html.twig' with {
         'actualResources': actualResources,
         'actualCharges': actualCharges,
         'results': results,
         'entity': entity
     } %}
 {% else %}
-    <div class="flex-table">
-        <div class="item-bloc">
-            <p><span class="chill-no-data-statement">{{ "There isn't any element recorded"|trans }}</span></p>
-        </div>
-    </div>
+    <p><span class="chill-no-data-statement">{{ "There isn't any element recorded"|trans }}</span></p>
 {% endif %}
 
 {% if pastCharges|length > 0 or pastResources|length > 0 %}
-    <h2 class="subtitle">{{ 'Past budget'|trans }}</h2>
-
-    {% include 'ChillBudgetBundle:Budget:_past_budget.html.twig' with {
+    <h3 class="subtitle">{{ 'Past budget'|trans }}</h3>a
+    {% include '@ChillBudget/Budget/_past_budget.html.twig' with {
         'pastCharges': pastCharges,
         'pastResources': pastResources,
         'entity': entity
@@ -61,9 +54,8 @@
 {% endif %}
 
 {% if futureCharges|length > 0 or futureResources|length > 0 %}
-    <h2 class="subtitle">{{ 'Future budget'|trans }}</h2>
-
-    {% include 'ChillBudgetBundle:Budget:_future_budget.html.twig' with {
+    <h3 class="subtitle">{{ 'Future budget'|trans }}</h3>
+    {% include '@ChillBudget/Budget/_future_budget.html.twig' with {
         'futureResources': futureResources,
         'futureCharges': futureCharges,
         'entity': entity
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig
index b996da211..98e784cc5 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig
@@ -1,30 +1,21 @@
-{% from 'ChillBudgetBundle:Budget:_macros.html.twig' import table_elements, table_results %}
+{% from '@ChillBudget/Budget/_macros.html.twig' import table_elements, table_results %}
 
 {# <h2 class="subtitle">{{ 'Actual budget'|trans }}</h2> #}
 
-<div class="flex-table">
+<div class="mb-2">
     <h4 class="family-title">{{ 'Actual resources'|trans }}</h4>
-
     {% if actualResources|length > 0 %}
-    <div class="item-bloc">
         {{ table_elements(actualResources, 'resource') }}
-    </div>
     {% else %}
-    <div class="item-bloc">
         <span class="chill-no-data-statement">{{ 'No resources registered'|trans }}</span>
-    </div>
     {% endif %}
 </div>
 
-<div class="flex-table">
+<div class="mb-2">
     <h4 class="family-title">{{ 'Actual charges'|trans }}</h4>
     {% if actualCharges|length > 0 %}
-    <div class="item-bloc">
         {{ table_elements(actualCharges, 'charge') }}
-    </div>
     {% else %}
-    <div class="item-bloc">
         <span class="chill-no-data-statement">{{ 'No charges registered'|trans }}</span>
-    </div>
     {% endif %}
 </div>
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_macros.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_macros.html.twig
index e8d10578b..42090984a 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_macros.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_macros.html.twig
@@ -1,5 +1,5 @@
 {% macro table_elements(elements, family) %}
-<table class="budget-table">
+<table class="table table-bordered border-dark budget-table">
     <thead>
         <tr>
             <th class="{{ family }} el-type">{{ 'Budget element type'|trans }}</th>
@@ -28,7 +28,7 @@
                 {% if f.endDate is not null %}
                     {{ f.startDate|format_date('short') ~ ' - ' ~ f.endDate|format_date('short') }}
                 {% else %}
-                    {{ f.startDate|format_date('short') ~ ' - ...' }}
+                    {{ 'depuis le  ' ~ f.startDate|format_date('short') }}
                 {% endif %}
             </td>
             <td class="column-small">
@@ -80,10 +80,9 @@
 
 {% set result = (totalResources - totalCharges) %}
 
-<table>
+<table class="table table-bordered border-dark">
     <thead>
         <tr>
-            <th>&nbsp;</th>
             <th>&nbsp;</th>
             <th>{{ 'Budget calculator result'|trans }}</th>
         </tr>
@@ -91,7 +90,6 @@
     <tbody>
         <tr>
             <td>{{ 'The balance'|trans }}</td>
-            <td>&nbsp;</td>
             <td>
                 {{ result|format_currency('EUR') }}
             </td>
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig
index 959df3d62..18d04b889 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig
@@ -17,17 +17,15 @@
 {% block content %}
 <h1>{{ title }}</h1>
 
-{% include 'ChillBudgetBundle:Budget:_budget.html.twig' with {
+{% include '@ChillBudget/Budget/_budget.html.twig' with {
     'resources': resources,
     'charges': charges,
     'person': person
 } %}
 
-<div class="flex-table">
-    <h3 class="family-title">{{ 'Budget calculator'|trans }}</h2>
-    <div class="item-bloc">
-        {{ table_results(charges, resources) }}
-    </div>
+<div class="mt-5">
+    <h3 class="subtitle">{{ 'Budget calculator'|trans }}</h3>
+    {{ table_results(charges, resources) }}
 </div>
 
 {% if is_granted('CHILL_BUDGET_ELEMENT_CREATE', person) %}

From fe3d4370966e41c411e02f82adc23f73f1787d54 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 24 Apr 2023 12:12:10 +0200
Subject: [PATCH 2/5] improve title hierarchy coherence

---
 .../Resources/views/Budget/_budget.html.twig                  | 2 +-
 .../Resources/views/Budget/_current_budget.html.twig          | 4 +++-
 .../Resources/views/Household/index.html.twig                 | 2 +-
 src/Bundle/ChillBudgetBundle/translations/messages.fr.yml     | 2 +-
 4 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
index e11a822cd..e75b83ee8 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
@@ -45,7 +45,7 @@
 {% endif %}
 
 {% if pastCharges|length > 0 or pastResources|length > 0 %}
-    <h3 class="subtitle">{{ 'Past budget'|trans }}</h3>a
+    <h3 class="subtitle">{{ 'Past budget'|trans }}</h3>
     {% include '@ChillBudget/Budget/_past_budget.html.twig' with {
         'pastCharges': pastCharges,
         'pastResources': pastResources,
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig
index 98e784cc5..27a77df1d 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig
@@ -1,6 +1,8 @@
 {% from '@ChillBudget/Budget/_macros.html.twig' import table_elements, table_results %}
 
-{# <h2 class="subtitle">{{ 'Actual budget'|trans }}</h2> #}
+{#
+<h2 class="subtitle">{{ 'Actual budget'|trans }}</h2>
+#}
 
 <div class="mb-2">
     <h4 class="family-title">{{ 'Actual resources'|trans }}</h4>
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Household/index.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Household/index.html.twig
index c2533e4c0..310220df1 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Household/index.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Household/index.html.twig
@@ -33,7 +33,7 @@
 #}
 
 {% if household.getCurrentMembers|length > 0 %}
-    <h2 class="subtitle">{{ 'Current budget household members'|trans }}</h2>
+    <h1 class="mt-5 mb-4">{{ 'Budget household members'|trans }}</h1>
 
     {% for hm in household.getCurrentMembers %}
         {% set member = hm.person %}
diff --git a/src/Bundle/ChillBudgetBundle/translations/messages.fr.yml b/src/Bundle/ChillBudgetBundle/translations/messages.fr.yml
index a5e5490a0..5d71f4228 100644
--- a/src/Bundle/ChillBudgetBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillBudgetBundle/translations/messages.fr.yml
@@ -3,7 +3,7 @@ Resource: Ressource
 Charge: Charge
 Budget for %name%: Budget de %name%
 Budget for household %household%: Budget du ménage
-Current budget household members: Budget actuel des membres du ménage
+Budget household members: Budget des membres du ménage
 Show budget of %name%: Montrer budget de %name%
 See complete budget: Voir budget complet
 Hide budget: Masquer

From 241e605ea6de96a2dc5ec9e594585869ed3ed118 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 24 Apr 2023 12:22:41 +0200
Subject: [PATCH 3/5] - style of h3 subtitle

---
 .../Resources/public/page/chillbudget.scss                 | 7 ++++++-
 .../Resources/views/Budget/_budget.html.twig               | 6 +++---
 .../Resources/views/Person/index.html.twig                 | 2 +-
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss b/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss
index 20a87cce2..82230d13b 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss
+++ b/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss
@@ -2,6 +2,11 @@
     margin-top: 1rem;
     margin-bottom: 1rem;
     padding: 1rem;
+    &::before {
+        font: normal normal normal 20px/1 ForkAwesome;
+        margin-right: 0.5em;
+        content: "\f061";
+    }
 }
 .family-title {
     margin-bottom: 1rem !important;
@@ -58,4 +63,4 @@
 button[aria-expanded="true"] > span.folded,
 button[aria-expanded="false"] > span.unfolded { display: none; }
 button[aria-expanded="false"] > span.folded,
-button[aria-expanded="true"] > span.unfolded { display: inline; }
\ No newline at end of file
+button[aria-expanded="true"] > span.unfolded { display: inline; }
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
index e75b83ee8..8a3fa6de2 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
@@ -32,7 +32,7 @@
     {% endif %}
 {% endfor %}
 
-<h3 class="subtitle">{{ 'Actual budget'|trans }}</h3>
+<h2 class="subtitle">{{ 'Actual budget'|trans }}</h2>
 {% if actualCharges|length > 0 or actualResources|length > 0 %}
     {% include '@ChillBudget/Budget/_current_budget.html.twig' with {
         'actualResources': actualResources,
@@ -45,7 +45,7 @@
 {% endif %}
 
 {% if pastCharges|length > 0 or pastResources|length > 0 %}
-    <h3 class="subtitle">{{ 'Past budget'|trans }}</h3>
+    <h2 class="subtitle">{{ 'Past budget'|trans }}</h2>
     {% include '@ChillBudget/Budget/_past_budget.html.twig' with {
         'pastCharges': pastCharges,
         'pastResources': pastResources,
@@ -54,7 +54,7 @@
 {% endif %}
 
 {% if futureCharges|length > 0 or futureResources|length > 0 %}
-    <h3 class="subtitle">{{ 'Future budget'|trans }}</h3>
+    <h2 class="subtitle">{{ 'Future budget'|trans }}</h2>
     {% include '@ChillBudget/Budget/_future_budget.html.twig' with {
         'futureResources': futureResources,
         'futureCharges': futureCharges,
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig
index 18d04b889..c365b9b84 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig
@@ -24,7 +24,7 @@
 } %}
 
 <div class="mt-5">
-    <h3 class="subtitle">{{ 'Budget calculator'|trans }}</h3>
+    <h2 class="subtitle">{{ 'Budget calculator'|trans }}</h2>
     {{ table_results(charges, resources) }}
 </div>
 

From be965e8698c0ffec07b51fcca4a1e637aa18e735 Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 24 Apr 2023 13:01:58 +0200
Subject: [PATCH 4/5] - improve title hierarchy and ergonomie

---
 .../Resources/public/page/chillbudget.scss    | 20 +++++++++++---
 .../Resources/views/Budget/_budget.html.twig  |  6 ++---
 .../views/Budget/_current_budget.html.twig    | 12 +++------
 .../views/Budget/_future_budget.html.twig     | 27 +++++++------------
 .../views/Budget/_past_budget.html.twig       | 26 ++++++------------
 .../Resources/views/Household/index.html.twig | 12 ++++-----
 .../Resources/views/Person/index.html.twig    |  2 +-
 .../translations/messages.fr.yml              |  6 ++---
 8 files changed, 49 insertions(+), 62 deletions(-)

diff --git a/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss b/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss
index 82230d13b..cca1b1a4a 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss
+++ b/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss
@@ -1,4 +1,4 @@
-.subtitle {
+h3.subtitle {
     margin-top: 1rem;
     margin-bottom: 1rem;
     padding: 1rem;
@@ -8,22 +8,34 @@
         content: "\f061";
     }
 }
-.family-title {
+
+$col_charge: #e03851d7;
+$col_resource: #6d9e63d8;
+
+h4.family-title {
+    margin-top: 1.5rem;
     margin-bottom: 1rem !important;
+    padding-left: 0.7em;
+    i {
+        margin-right: 0.4em;
+    }
+    &.charge i { color: $col_charge; }
+    &.resource i { color: $col_resource; }
 }
 .budget-table th {
     th {
         color: white;
     }
 }
+
 .budget-table {
     th.charge {
-        background-color: #e03851d7;
+        background-color: $col_charge;
     }
 }
 .budget-table {
     th.resource {
-        background-color: #6d9e63d8;
+        background-color: $col_resource;
     }
 }
 .budget-table {
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
index 8a3fa6de2..e75b83ee8 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_budget.html.twig
@@ -32,7 +32,7 @@
     {% endif %}
 {% endfor %}
 
-<h2 class="subtitle">{{ 'Actual budget'|trans }}</h2>
+<h3 class="subtitle">{{ 'Actual budget'|trans }}</h3>
 {% if actualCharges|length > 0 or actualResources|length > 0 %}
     {% include '@ChillBudget/Budget/_current_budget.html.twig' with {
         'actualResources': actualResources,
@@ -45,7 +45,7 @@
 {% endif %}
 
 {% if pastCharges|length > 0 or pastResources|length > 0 %}
-    <h2 class="subtitle">{{ 'Past budget'|trans }}</h2>
+    <h3 class="subtitle">{{ 'Past budget'|trans }}</h3>
     {% include '@ChillBudget/Budget/_past_budget.html.twig' with {
         'pastCharges': pastCharges,
         'pastResources': pastResources,
@@ -54,7 +54,7 @@
 {% endif %}
 
 {% if futureCharges|length > 0 or futureResources|length > 0 %}
-    <h2 class="subtitle">{{ 'Future budget'|trans }}</h2>
+    <h3 class="subtitle">{{ 'Future budget'|trans }}</h3>
     {% include '@ChillBudget/Budget/_future_budget.html.twig' with {
         'futureResources': futureResources,
         'futureCharges': futureCharges,
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig
index 27a77df1d..d8626aee2 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_current_budget.html.twig
@@ -1,20 +1,14 @@
 {% from '@ChillBudget/Budget/_macros.html.twig' import table_elements, table_results %}
 
-{#
-<h2 class="subtitle">{{ 'Actual budget'|trans }}</h2>
-#}
-
-<div class="mb-2">
-    <h4 class="family-title">{{ 'Actual resources'|trans }}</h4>
+<div class="my-4">
+    <h4 class="family-title resource"><i class="fa fa-fw fa-plus-square"></i>{{ 'Actual resources'|trans }}</h4>
     {% if actualResources|length > 0 %}
         {{ table_elements(actualResources, 'resource') }}
     {% else %}
         <span class="chill-no-data-statement">{{ 'No resources registered'|trans }}</span>
     {% endif %}
-</div>
 
-<div class="mb-2">
-    <h4 class="family-title">{{ 'Actual charges'|trans }}</h4>
+    <h4 class="family-title charge"><i class="fa fa-fw fa-minus-square"></i>{{ 'Actual charges'|trans }}</h4>
     {% if actualCharges|length > 0 %}
         {{ table_elements(actualCharges, 'charge') }}
     {% else %}
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_future_budget.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_future_budget.html.twig
index 1547d8749..62f4e3e96 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_future_budget.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_future_budget.html.twig
@@ -20,32 +20,23 @@
             aria-labelledby="heading_future_{{ entity.id }}"
             data-bs-parent="#future_{{ entity.id }}">
 
-            <div class="flex-table">
-                <h3 class="family-title">{{ 'Future resources'|trans }}</h3>
+            <div class="my-4">
+                <h4 class="family-title resource"><i class="fa fa-fw fa-plus-square"></i>{{ 'Future resources'|trans }}</h4>
 
                 {% if futureResources|length > 0 %}
-                    <div class="item-bloc">
-                        {{ table_elements(futureResources, 'resource') }}
-                    </div>
+                    {{ table_elements(futureResources, 'resource') }}
                 {% else %}
-                    <div class="item-bloc">
-                        <span class="chill-no-data-statement">{{ 'No future resources registered'|trans }}</span>
-                    </div>
+                    <span class="chill-no-data-statement">{{ 'No future resources registered'|trans }}</span>
                 {% endif %}
-            </div>
-            <div class="flex-table">
-                <h3 class="family-title">{{ 'Future charges'|trans }}</h3>
+
+                <h4 class="family-title charge"><i class="fa fa-fw fa-minus-square"></i>{{ 'Future charges'|trans }}</h4>
 
                 {% if futureCharges|length > 0 %}
-                    <div class="item-bloc">
-                        {{ table_elements(futureCharges, 'charge') }}
-                    </div>
+                    {{ table_elements(futureCharges, 'charge') }}
                 {% else %}
-                    <div class="item-bloc">
-                        <span class="chill-no-data-statement">{{ 'No future charges registered'|trans }}</span>
-                    </div>
+                    <span class="chill-no-data-statement">{{ 'No future charges registered'|trans }}</span>
                 {% endif %}
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_past_budget.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_past_budget.html.twig
index 14573048e..ad0a12755 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_past_budget.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_past_budget.html.twig
@@ -20,34 +20,24 @@
             aria-labelledby="heading_past_{{ entity.id }}"
             data-bs-parent="#past_{{ entity.id }}">
 
-            <div class="flex-table">
-                <h3 class="family-title">{{ 'Past resources'|trans }}</h3>
+            <div class="my-4">
+                <h4 class="family-title resource"><i class="fa fa-fw fa-plus-square"></i>{{ 'Past resources'|trans }}</h4>
 
                 {% if pastResources|length > 0 %}
-                    <div class="item-bloc">
-                        {{ table_elements(pastResources, 'resource') }}
-                    </div>
+                    {{ table_elements(pastResources, 'resource') }}
                 {% else %}
-                    <div class="item-bloc">
-                        <span class="chill-no-data-statement">{{ 'No past resources registered'|trans }}</span>
-                    </div>
+                    <span class="chill-no-data-statement">{{ 'No past resources registered'|trans }}</span>
                 {% endif %}
-            </div>
 
-            <div class="flex-table">
-                <h3 class="family-title">{{ 'Past charges'|trans }}</h3>
+                <h4 class="family-title charge"><i class="fa fa-fw fa-minus-square"></i>{{ 'Past charges'|trans }}</h4>
 
                 {% if pastCharges|length > 0 %}
-                    <div class="item-bloc">
-                        {{ table_elements(pastCharges, 'charge') }}
-                    </div>
+                    {{ table_elements(pastCharges, 'charge') }}
                 {% else %}
-                    <div class="item-bloc">
-                        <span class="chill-no-data-statement">{{ 'No past charges registered'|trans }}</span>
-                    </div>
+                    <span class="chill-no-data-statement">{{ 'No past charges registered'|trans }}</span>
                 {% endif %}
             </div>
         </div>
 
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Household/index.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Household/index.html.twig
index 310220df1..1df92b297 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Household/index.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Household/index.html.twig
@@ -24,16 +24,14 @@
 } %}
 
     {#
-<div class="flex-table">
-    <h3 class="family-title">{{ 'Budget calculator'|trans }}</h3>
-    <div class="item-bloc">
-        {{ table_results(wholeCharges, wholeResources) }}
-    </div>
+<div class="my-4">
+    <h4 class="family-title">{{ 'Budget calculator'|trans }}</h4>
+    {{ table_results(wholeCharges, wholeResources) }}
 </div>
 #}
 
 {% if household.getCurrentMembers|length > 0 %}
-    <h1 class="mt-5 mb-4">{{ 'Budget household members'|trans }}</h1>
+    <h1 class="my-5">{{ 'Budget household members'|trans }}</h1>
 
     {% for hm in household.getCurrentMembers %}
         {% set member = hm.person %}
@@ -57,6 +55,8 @@
                     aria-labelledby="heading_{{ member.id }}"
                     data-bs-parent="#nonCurrent">
 
+                        <h2 class="mt-4">{{ 'Budget for %name%'|trans({'%name%': member.firstName ~ " " ~ member.lastName }) }}</h2>
+
                         {% include 'ChillBudgetBundle:Budget:_budget.html.twig' with {
                             'resources': member.getBudgetResources,
                             'charges': member.getBudgetCharges,
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig
index c365b9b84..18d04b889 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Person/index.html.twig
@@ -24,7 +24,7 @@
 } %}
 
 <div class="mt-5">
-    <h2 class="subtitle">{{ 'Budget calculator'|trans }}</h2>
+    <h3 class="subtitle">{{ 'Budget calculator'|trans }}</h3>
     {{ table_results(charges, resources) }}
 </div>
 
diff --git a/src/Bundle/ChillBudgetBundle/translations/messages.fr.yml b/src/Bundle/ChillBudgetBundle/translations/messages.fr.yml
index 5d71f4228..73add43ed 100644
--- a/src/Bundle/ChillBudgetBundle/translations/messages.fr.yml
+++ b/src/Bundle/ChillBudgetBundle/translations/messages.fr.yml
@@ -9,17 +9,17 @@ See complete budget: Voir budget complet
 Hide budget: Masquer
 Hide budget of %name%: Masquer budget de %name%
 Resource element type: Nature de la ressource
-Actual budget: Éléments actuels du budget
+Actual budget: Éléments actuels
 Actual resources: Ressources actuelles
 Actual resources for %name%: Ressources actuelles de %name%
 Actual charges for %name%: Charges actuelles de %name%
 Actual charges: Charges actuelles
-Past budget: Éléments du budget passé
+Past budget: Éléments passés
 Show past budget: Montrer budget passé
 Show future budget: Montrer budget future
 Past resources: Ressources passées
 Past charges: Charges passées
-Future budget: Futurs éléments du budget
+Future budget: Éléments futurs
 Future resources: Ressources futures
 Future charges: Charges futures
 Budget element type: Nature

From cb0ff88318856f0b9369c1996b9e90596c85794f Mon Sep 17 00:00:00 2001
From: Mathieu Jaumotte <mathieu.jaumotte@champs-libres.coop>
Date: Mon, 24 Apr 2023 13:29:45 +0200
Subject: [PATCH 5/5] Fix action column width

---
 .../Resources/public/page/chillbudget.scss    | 24 ++++---------------
 .../Resources/views/Budget/_macros.html.twig  | 21 +++++++---------
 2 files changed, 14 insertions(+), 31 deletions(-)

diff --git a/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss b/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss
index cca1b1a4a..79f40dc76 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss
+++ b/src/Bundle/ChillBudgetBundle/Resources/public/page/chillbudget.scss
@@ -28,29 +28,15 @@ h4.family-title {
     }
 }
 
-.budget-table {
-    th.charge {
-        background-color: $col_charge;
-    }
-}
-.budget-table {
-    th.resource {
-        background-color: $col_resource;
-    }
-}
-.budget-table {
+table.budget-table {
     th, td {
         padding: 10px;
         text-align: right;
     }
-    td.column-wide {
-        width: 20%;
-    }
-    td.column-small {
-        width: 15%;
-        &.right {
-            align-items: right;
-        }
+    th.charge { background-color: $col_charge; }
+    th.resource { background-color: $col_resource; }
+    td.column-fixed {
+        width: 9.5em;
     }
 }
 
diff --git a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_macros.html.twig b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_macros.html.twig
index 42090984a..70e96d96c 100644
--- a/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_macros.html.twig
+++ b/src/Bundle/ChillBudgetBundle/Resources/views/Budget/_macros.html.twig
@@ -13,25 +13,22 @@
         {% for f in elements %}
         {% set total = total + f.amount %}
         <tr>
-            <td class="column-wide el-type">
-                <span class="badge-title">
-                    <span class="title_label title_label_{{ family }}"></span>
-                    {% if f.isResource %}
-                        <span class="title_action">{{ f.resource.name|localize_translatable_string }}<span>
-                    {% else %}
-                        <span class="title_action">{{ f.charge.name|localize_translatable_string }}<span>
-                    {% endif %}
-                </span>
+            <td class="el-type">
+                {% if f.isResource %}
+                    {{ f.resource.name|localize_translatable_string }}
+                {% else %}
+                    {{ f.charge.name|localize_translatable_string }}
+                {% endif %}
             </td>
-            <td class="column-small">{{ f.amount|format_currency('EUR') }}</td>
-            <td class="column-wide">
+            <td>{{ f.amount|format_currency('EUR') }}</td>
+            <td>
                 {% if f.endDate is not null %}
                     {{ f.startDate|format_date('short') ~ ' - ' ~ f.endDate|format_date('short') }}
                 {% else %}
                     {{ 'depuis le  ' ~ f.startDate|format_date('short') }}
                 {% endif %}
             </td>
-            <td class="column-small">
+            <td class="column-fixed">
                 <ul class="record_actions">
                     {% if is_granted('CHILL_BUDGET_ELEMENT_SEE', f) %}
                         <li>