From 1e2a6d046189389ee87b40b024e9e8d055f6a351 Mon Sep 17 00:00:00 2001
From: Colin Darie <colin@darie.eu>
Date: Tue, 6 Feb 2024 17:43:20 +0100
Subject: [PATCH] fix(manager): update templates and make everything works

---
 .scss-lint.yml                                |   1 +
 app/assets/stylesheets/manager.scss           |  16 +++
 app/dashboards/zone_dashboard.rb              |   7 +-
 .../application/_pagination.html.haml         |   6 +-
 .../administrateur_confirmations/new.html.erb |   6 +-
 .../manager/administrateurs/_form.html.erb    |  44 ++++++
 .../manager/administrateurs/_form.html.haml   |  13 --
 .../manager/administrateurs/show.html.erb     |  35 +++--
 .../manager/administrateurs/show.html.haml    |  15 --
 app/views/manager/application/index.html.erb  |   5 +-
 .../bill_signatures/_collection.html.erb      |  68 ----------
 .../manager/confirmation_urls/new.html.erb    |   8 +-
 app/views/manager/dossiers/show.html.erb      |  33 +++--
 .../manager/dossiers/transfer_edit.html.erb   |   4 +-
 .../dubious_procedures/_collection.html.erb   |  24 +++-
 .../dubious_procedures/_index_header.html.erb |  17 +++
 ...ndex_header.erb => _index_header.html.erb} |   0
 app/views/manager/gestionnaires/show.html.erb |  44 ++++--
 .../groupe_gestionnaires/show.html.erb        |  45 +++---
 app/views/manager/instructeurs/show.html.erb  |  48 ++++---
 .../outdated_procedures/_collection.html.erb  |  62 ++++-----
 .../outdated_procedures/index.html.erb        |   2 +-
 app/views/manager/procedures/show.html.erb    | 128 +++++++++---------
 app/views/manager/users/show.html.erb         |  54 +++++---
 app/views/manager/zones/index.html.erb        |  70 ----------
 25 files changed, 381 insertions(+), 374 deletions(-)
 create mode 100644 app/views/manager/administrateurs/_form.html.erb
 delete mode 100644 app/views/manager/administrateurs/_form.html.haml
 delete mode 100644 app/views/manager/administrateurs/show.html.haml
 delete mode 100644 app/views/manager/bill_signatures/_collection.html.erb
 create mode 100644 app/views/manager/dubious_procedures/_index_header.html.erb
 rename app/views/manager/gestionnaires/{_index_header.erb => _index_header.html.erb} (100%)
 delete mode 100644 app/views/manager/zones/index.html.erb

diff --git a/.scss-lint.yml b/.scss-lint.yml
index dd6d398cf..2c32e2bef 100644
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -2,6 +2,7 @@ exclude:
   - 'app/assets/stylesheets/reset.scss'
   - 'app/assets/stylesheets/direct_uploads.scss'
   - 'app/assets/stylesheets/dsfr_override.scss'
+  - 'app/assets/stylesheets/manager.scss'
 
 linters:
   BangFormat:
diff --git a/app/assets/stylesheets/manager.scss b/app/assets/stylesheets/manager.scss
index facc768ac..7480fddd7 100644
--- a/app/assets/stylesheets/manager.scss
+++ b/app/assets/stylesheets/manager.scss
@@ -55,3 +55,19 @@
   color: #A10005;
   font-size: 18px;
 }
+
+.main-content {
+  &__header {
+    .button_to {
+      display: inline;
+    }
+
+    .buttons {
+      text-align: right;
+    }
+
+    .button {
+      margin-bottom: 4px;
+    }
+  }
+}
diff --git a/app/dashboards/zone_dashboard.rb b/app/dashboards/zone_dashboard.rb
index cec854dd1..692c03300 100644
--- a/app/dashboards/zone_dashboard.rb
+++ b/app/dashboards/zone_dashboard.rb
@@ -48,6 +48,11 @@ class ZoneDashboard < Administrate::BaseDashboard
   # across all pages of the admin dashboard.
   #
   def display_resource(zone)
-    "Zone #{zone.current_label}"
+    case zone
+    when NullZone
+      "Aucune zone"
+    else
+      "Zone #{zone.current_label}"
+    end
   end
 end
diff --git a/app/views/administrate/application/_pagination.html.haml b/app/views/administrate/application/_pagination.html.haml
index 6160626fb..731a09cb5 100644
--- a/app/views/administrate/application/_pagination.html.haml
+++ b/app/views/administrate/application/_pagination.html.haml
@@ -1,6 +1,6 @@
 - if resources.singleton_class.included_modules.include?(Kaminari::PaginatableWithoutCount)
   %nav.pagination
-    = link_to_prev_page resources, t("views.pagination.previous"), param_name: "_page"
-    = link_to_next_page resources, t("views.pagination.next"), param_name: "_page"
+    = link_to_prev_page resources, t("views.pagination.previous").html_safe, param_name: "_page"
+    = link_to_next_page resources, t("views.pagination.next").html_safe, param_name: "_page"
 - else
-  = paginate resources, param_name: "_page", views_prefix: 'shared'
+  = paginate resources, param_name: local_assigns.fetch(:param_name) { "_page" }
diff --git a/app/views/manager/administrateur_confirmations/new.html.erb b/app/views/manager/administrateur_confirmations/new.html.erb
index 83321e600..80574e0be 100644
--- a/app/views/manager/administrateur_confirmations/new.html.erb
+++ b/app/views/manager/administrateur_confirmations/new.html.erb
@@ -1,9 +1,13 @@
 <% content_for(:title) { "Confirmation d'ajout d'un administrateur" } %>
 
-<header class="main-content__header" role="banner">
+<header class="main-content__header">
   <h1 class="main-content__page-title">
     <%= content_for(:title) %>
   </h1>
+
+  <div>
+    <%= link_to t("administrate.actions.back"), :back, class: "button" %>
+  </div>
 </header>
 
 <section class="main-content__body">
diff --git a/app/views/manager/administrateurs/_form.html.erb b/app/views/manager/administrateurs/_form.html.erb
new file mode 100644
index 000000000..86accec48
--- /dev/null
+++ b/app/views/manager/administrateurs/_form.html.erb
@@ -0,0 +1,44 @@
+<%= form_for([namespace, Administrateur.new(user: User.new)], html: { class: "form" }) do |f| %>
+  <% if page.resource.errors.any? %>
+    <div id="error_explanation">
+      <h2>
+        <%= t(
+          "administrate.form.errors",
+          pluralized_errors: pluralize(page.resource.errors.count, t("administrate.form.error")),
+          resource_name: display_resource_name(page.resource_name, singular: true)
+        ) %>
+      </h2>
+
+      <ul>
+        <% page.resource.errors.full_messages.each do |message| %>
+          <li class="flash-error"><%= message %></li>
+        <% end %>
+      </ul>
+    </div>
+  <% end %>
+
+  <% page.attributes(controller.action_name).each do |title, attributes| -%>
+    <fieldset class="<%= "field-unit--nested" if title.present? %>">
+      <% if title.present? %>
+        <legend><%= t "helpers.label.#{f.object_name}.#{title}", default: title %></legend>
+      <% end %>
+
+      <% attributes.each do |attribute| %>
+        <div class="field-unit field-unit--<%= attribute.html_class %> field-unit--<%= requireness(attribute) %>">
+          <%= render_field attribute, f: f %>
+
+          <% hint_key = "administrate.field_hints.#{page.resource_name}.#{attribute.name}" %>
+          <% if I18n.exists?(hint_key) -%>
+            <div class="field-unit__hint">
+              <%= I18n.t(hint_key) %>
+            </div>
+          <% end -%>
+        </div>
+      <% end %>
+    </fieldset>
+  <% end -%>
+
+  <div class="form-actions">
+    <%= f.submit %>
+  </div>
+<% end %>
diff --git a/app/views/manager/administrateurs/_form.html.haml b/app/views/manager/administrateurs/_form.html.haml
deleted file mode 100644
index fb64c934a..000000000
--- a/app/views/manager/administrateurs/_form.html.haml
+++ /dev/null
@@ -1,13 +0,0 @@
-= form_for([namespace, Administrateur.new(user: User.new)], html: { class: "form" }) do |f|
-  - if page.resource.errors.any?
-    #error_explanation
-      %h2
-        = t("administrate.form.errors", pluralized_errors: pluralize(page.resource.errors.count, t("administrate.form.error")), resource_name: display_resource_name(page.resource_name))
-      %ul
-        - page.resource.errors.full_messages.each do |message|
-          %li.flash-error= message
-  - page.attributes.each do |attribute|
-    %div{ :class => "field-unit field-unit--#{attribute.html_class}" }
-      = render_field attribute, f: f
-  .form-actions
-    = f.submit
diff --git a/app/views/manager/administrateurs/show.html.erb b/app/views/manager/administrateurs/show.html.erb
index ab68a1f80..972bff22f 100644
--- a/app/views/manager/administrateurs/show.html.erb
+++ b/app/views/manager/administrateurs/show.html.erb
@@ -19,7 +19,7 @@ as well as a link to its edit page.
 <% content_for(:title) { t("administrate.actions.show_resource", name: page.page_title) } %>
 <% procedure = page.resource %>
 
-<header class="main-content__header" role="banner">
+<header class="main-content__header">
   <h1 class="main-content__page-title">
     <%= content_for(:title) %>
   </h1>
@@ -29,31 +29,38 @@ as well as a link to its edit page.
       t("administrate.actions.edit_resource", name: page.page_title),
       [:edit, namespace, page.resource],
       class: "button",
-    ) if valid_action? :edit %>
+    ) if accessible_action?(page.resource, :edit) %>
   </div>
 
   <div>
     <% if page.resource.invitation_expired? %>
       <%= link_to "renvoyer l'invitation", reinvite_manager_administrateur_path(page.resource), method: :post, class: "button" %>
     <% end %>
-    <%= button_to "supprimer", delete_manager_administrateur_path(page.resource), method: :delete, disabled: !page.resource.can_be_deleted?, class: "button", data: { turbo_confirm: "Confirmez-vous la suppression de l'administrateur ?" }, title: page.resource.can_be_deleted? ? "Supprimer" : "Cet administrateur a des démarches dont il est le seul admin et ne peut être supprimé" %>
+    <%= button_to t("administrate.actions.destroy"), delete_manager_administrateur_path(page.resource), method: :delete, disabled: !page.resource.can_be_deleted?, class: "button button--danger", data: { turbo_confirm: "Confirmez-vous la suppression de l'administrateur ?" }, title: page.resource.can_be_deleted? ? "Supprimer" : "Cet administrateur a des démarches dont il est le seul admin et ne peut être supprimé" %>
   </div>
-
 </header>
 
 <section class="main-content__body">
-  <%= render partial: 'manager/application/user_meta', locals: {user: page.resource&.user} %>
+  <%= render partial: 'manager/application/user_meta', locals: { user: page.resource&.user } %>
   <dl>
-    <% page.attributes.each do |attribute| %>
-      <dt class="attribute-label" id="<%= attribute.name %>">
-      <%= t(
-        "helpers.label.#{resource_name}.#{attribute.name}",
-        default: attribute.name.titleize,
-      ) %>
-      </dt>
+    <% page.attributes.each do |title, attributes| %>
+      <fieldset class="<%= "field-unit--nested" if title.present? %>">
+        <% if title.present? %>
+          <legend><%= t "helpers.label.#{page.resource_name}.#{title}", default: title %></legend>
+        <% end %>
 
-      <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
-          ><%= render_field attribute, page: page %></dd>
+        <% attributes.each do |attribute| %>
+          <dt class="attribute-label" id="<%= attribute.name %>">
+          <%= t(
+            "helpers.label.#{resource_name}.#{attribute.name}",
+            default: page.resource.class.human_attribute_name(attribute.name),
+          ) %>
+          </dt>
+
+          <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
+              ><%= render_field attribute, page: page %></dd>
+        <% end %>
+      </fieldset>
     <% end %>
   </dl>
 </section>
diff --git a/app/views/manager/administrateurs/show.html.haml b/app/views/manager/administrateurs/show.html.haml
deleted file mode 100644
index 83f37d42b..000000000
--- a/app/views/manager/administrateurs/show.html.haml
+++ /dev/null
@@ -1,15 +0,0 @@
-- content_for(:title) { page.page_title }
-
-%header.header
-  %h1.header__heading= content_for(:title)
-  .header__actions
-    - if page.resource.invitation_expired?
-      = link_to "renvoyer l'invitation", reinvite_manager_administrateur_path(page.resource), method: :post, class: "button"
-
-%dl
-  - page.attributes.each do |attribute|
-    %dt.attribute-label
-      = t("helpers.label.#{resource_name}.#{attribute.name}", default: attribute.name.titleize)
-
-    %dd.attribute-data{ class: "attribute-data--#{attribute.html_class}" }
-      = render_field attribute
diff --git a/app/views/manager/application/index.html.erb b/app/views/manager/application/index.html.erb
index 9201f1d60..740c7c292 100644
--- a/app/views/manager/application/index.html.erb
+++ b/app/views/manager/application/index.html.erb
@@ -40,7 +40,8 @@ It renders the `_table` partial to display details about the resources.
     resources: resources,
     table_title: "page-title"
   ) %>
-  <%= render("pagination", resources: resources) %>
+
+<%= render "pagination", resources: resources %>
 </section>
 
-<%= render("index_footer") %>
+<%= render("index_footer") %><%# our footer %>
diff --git a/app/views/manager/bill_signatures/_collection.html.erb b/app/views/manager/bill_signatures/_collection.html.erb
deleted file mode 100644
index aea9f28c7..000000000
--- a/app/views/manager/bill_signatures/_collection.html.erb
+++ /dev/null
@@ -1,68 +0,0 @@
-<%#
-# Collection
-
-This partial is used on the `index` and `show` pages
-to display a collection of resources in an HTML table.
-
-## Local variables:
-
-- `collection_presenter`:
-  An instance of [Administrate::Page::Collection][1].
-  The table presenter uses `ResourceDashboard::COLLECTION_ATTRIBUTES` to determine
-  the columns displayed in the table
-- `resources`:
-  An ActiveModel::Relation collection of resources to be displayed in the table.
-  By default, the number of resources is limited by pagination
-  or by a hard limit to prevent excessive page load times
-
-[1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Collection
-%>
-
-<table aria-labelledby="<%= table_title %>">
-  <thead>
-    <tr>
-      <% collection_presenter.attribute_types.each do |attr_name, attr_type| %>
-        <th class="cell-label
-        cell-label--<%= attr_type.html_class %>
-        cell-label--<%= collection_presenter.ordered_html_class(attr_name) %>"
-        scope="col"
-        role="columnheader"
-        aria-sort="<%= sort_order(collection_presenter.ordered_html_class(attr_name)) %>">
-        <%= link_to(sanitized_order_params(page, collection_field_name).merge(
-          collection_presenter.order_params_for(attr_name, key: collection_field_name)
-        )) do %>
-        <%= t(
-          "helpers.label.#{collection_presenter.resource_name}.#{attr_name}",
-          default: attr_name.to_s,
-        ).titleize %>
-            <% if collection_presenter.ordered_by?(attr_name) %>
-              <span class="cell-label__sort-indicator cell-label__sort-indicator--<%= collection_presenter.ordered_html_class(attr_name) %>">
-                <svg aria-hidden="true">
-                  <use xlink:href="#icon-up-caret" />
-                </svg>
-              </span>
-            <% end %>
-          <% end %>
-        </th>
-      <% end %>
-      <% [valid_action?(:edit, collection_presenter.resource_name),
-          valid_action?(:destroy, collection_presenter.resource_name)].count(true).times do %>
-        <th scope="col"></th>
-      <% end %>
-    </tr>
-  </thead>
-
-  <tbody>
-    <% resources.each do |resource| %>
-      <tr class="js-table-row"
-          tabindex="0"
-          >
-        <% collection_presenter.attributes_for(resource).each do |attribute| %>
-          <td class="cell-data cell-data--<%= attribute.html_class %>">
-            <%= render_field attribute %>
-          </td>
-        <% end %>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
diff --git a/app/views/manager/confirmation_urls/new.html.erb b/app/views/manager/confirmation_urls/new.html.erb
index fbcb59819..ccd4a72ff 100644
--- a/app/views/manager/confirmation_urls/new.html.erb
+++ b/app/views/manager/confirmation_urls/new.html.erb
@@ -1,9 +1,13 @@
 <% content_for(:title) { "Ajout d'un administrateur" } %>
 
-<header class="main-content__header" role="banner">
+<header class="main-content__header">
   <h1 class="main-content__page-title">
     <%= content_for(:title) %>
   </h1>
+
+  <div>
+    <%= link_to t("administrate.actions.back"), :back, class: "button" %>
+  </div>
 </header>
 
 <section class="main-content__body">
@@ -14,7 +18,7 @@
     <dt class="attribute-label">
       Lien
     </dt>
-    
+
     <dd class="attribute-data">
       <%= @url %>
     </dd>
diff --git a/app/views/manager/dossiers/show.html.erb b/app/views/manager/dossiers/show.html.erb
index 2e14a79f0..609c52d56 100644
--- a/app/views/manager/dossiers/show.html.erb
+++ b/app/views/manager/dossiers/show.html.erb
@@ -19,7 +19,7 @@ as well as a link to its edit page.
 <% content_for(:title) { t("administrate.actions.show_resource", name: page.page_title) } %>
 <% dossier = page.resource %>
 
-<header class="main-content__header" role="banner">
+<header class="main-content__header">
   <h1 class="main-content__page-title">
     <%= content_for(:title) %>
     <% if dossier.hidden_for_administration? && !dossier.brouillon? %>
@@ -31,7 +31,7 @@ as well as a link to its edit page.
       "Transférer le dossier",
       [:transfer_edit, namespace, page.resource],
       class: "button",
-    ) if valid_action? :transfer_edit %>
+    ) if accessible_action?(page.resource, :transfer_edit) %>
   </div>
 </header>
 
@@ -45,17 +45,26 @@ as well as a link to its edit page.
       </p>
     <% end %>
   </div>
-  <dl>
-    <% page.attributes.each do |attribute| %>
-      <dt class="attribute-label" id="<%= attribute.name %>">
-      <%= t(
-        "helpers.label.#{resource_name}.#{attribute.name}",
-        default: attribute.name.titleize,
-      ) %>
-      </dt>
 
-      <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
-          ><%= render_field attribute, page: page %></dd>
+  <dl>
+    <% page.attributes.each do |title, attributes| %>
+      <fieldset class="<%= "field-unit--nested" if title.present? %>">
+        <% if title.present? %>
+          <legend><%= t "helpers.label.#{page.resource_name}.#{title}", default: title %></legend>
+        <% end %>
+
+        <% attributes.each do |attribute| %>
+          <dt class="attribute-label" id="<%= attribute.name %>">
+          <%= t(
+            "helpers.label.#{resource_name}.#{attribute.name}",
+            default: page.resource.class.human_attribute_name(attribute.name),
+          ) %>
+          </dt>
+
+          <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
+              ><%= render_field attribute, page: page %></dd>
+        <% end %>
+      </fieldset>
     <% end %>
   </dl>
 </section>
diff --git a/app/views/manager/dossiers/transfer_edit.html.erb b/app/views/manager/dossiers/transfer_edit.html.erb
index bf2216774..7fcb26555 100644
--- a/app/views/manager/dossiers/transfer_edit.html.erb
+++ b/app/views/manager/dossiers/transfer_edit.html.erb
@@ -1,6 +1,6 @@
 <% content_for(:title) { "Transfert d'un dossier vers un autre utilisateur" } %>
 
-<header class="main-content__header" role="banner">
+<header class="main-content__header">
   <h1 class="main-content__page-title">
     <%= content_for(:title) %>
   </h1>
@@ -35,7 +35,7 @@
         <label for="user_email">A qui souhaitez-vous transferer le dossier ?</label>
       </div>
       <div class="field-unit__field">
-        <input type="text" name="email"  required placeholder="chouette.gars@laposte.net">
+        <input type="text" name="email" required placeholder="chouette.gars@laposte.net">
       </div>
 
     </div>
diff --git a/app/views/manager/dubious_procedures/_collection.html.erb b/app/views/manager/dubious_procedures/_collection.html.erb
index 8c0258e56..cb2b41962 100644
--- a/app/views/manager/dubious_procedures/_collection.html.erb
+++ b/app/views/manager/dubious_procedures/_collection.html.erb
@@ -24,22 +24,36 @@ to display a collection of resources in an HTML table.
       <% collection_presenter.attribute_types.each do |attr_name, attr_type| %>
         <th class="cell-label
         cell-label--<%= attr_type.html_class %>
-        cell-label--<%= collection_presenter.ordered_html_class(attr_name) %>"
+        cell-label--<%= collection_presenter.ordered_html_class(attr_name) %>
+        cell-label--<%= "#{collection_presenter.resource_name}_#{attr_name}" %>"
         scope="col"
-        role="columnheader"
         aria-sort="<%= sort_order(collection_presenter.ordered_html_class(attr_name)) %>">
         <%= t(
           "helpers.label.#{collection_presenter.resource_name}.#{attr_name}",
-          default: resource_class.human_attribute_name(attr_name),
-        ).titleize %>
+          default: resource_class.human_attribute_name(attr_name).titleize,
+        ) %>
+          <% if collection_presenter.ordered_by?(attr_name) %>
+            <span class="cell-label__sort-indicator cell-label__sort-indicator--<%= collection_presenter.ordered_html_class(attr_name) %>">
+              <svg aria-hidden="true">
+                <use xlink:href="#icon-up-caret" />
+              </svg>
+            </span>
+          <% end %>
         </th>
       <% end %>
+      <%= render(
+        "collection_header_actions",
+        collection_presenter: collection_presenter,
+        page: page,
+        resources: resources,
+        table_title: "page-title"
+      ) %>
     </tr>
   </thead>
 
   <tbody>
     <% resources.each do |resource| %>
-      <tr class="js-table-row" >
+      <tr class="js-table-row">
         <% collection_presenter.attributes_for(resource).each do |attribute| %>
           <td class="cell-data cell-data--<%= attribute.html_class %>">
             <a href="<%= manager_procedure_url(resource.id) -%>"
diff --git a/app/views/manager/dubious_procedures/_index_header.html.erb b/app/views/manager/dubious_procedures/_index_header.html.erb
new file mode 100644
index 000000000..9207b5e4d
--- /dev/null
+++ b/app/views/manager/dubious_procedures/_index_header.html.erb
@@ -0,0 +1,17 @@
+<% content_for(:title) do %>
+  <%= display_resource_name(page.resource_name) %>
+<% end %>
+
+<header class="main-content__header">
+  <h1 class="main-content__page-title" id="page-title">
+    <%= content_for(:title) %>
+  </h1>
+
+  <% if show_search_bar %>
+    <%= render(
+      "search",
+      search_term: search_term,
+      resource_name: display_resource_name(page.resource_name)
+    ) %>
+  <% end %>
+</header>
diff --git a/app/views/manager/gestionnaires/_index_header.erb b/app/views/manager/gestionnaires/_index_header.html.erb
similarity index 100%
rename from app/views/manager/gestionnaires/_index_header.erb
rename to app/views/manager/gestionnaires/_index_header.html.erb
diff --git a/app/views/manager/gestionnaires/show.html.erb b/app/views/manager/gestionnaires/show.html.erb
index 795746d26..75f75058f 100644
--- a/app/views/manager/gestionnaires/show.html.erb
+++ b/app/views/manager/gestionnaires/show.html.erb
@@ -18,7 +18,7 @@ as well as a link to its edit page.
 
 <% content_for(:title) { t("administrate.actions.show_resource", name: page.page_title) } %>
 
-<header class="main-content__header" role="banner">
+<header class="main-content__header">
   <h1 class="main-content__page-title">
     <%= content_for(:title) %>
   </h1>
@@ -30,25 +30,39 @@ as well as a link to its edit page.
       class: "button",
     ) if accessible_action?(page.resource, :edit) %>
 
-  </div>
-  <div>
-    <%= button_to "Supprimer", delete_manager_gestionnaire_path(page.resource), method: :delete, disabled: !page.resource.can_be_deleted?, class: "button", data: { confirm: "Confirmez-vous la suppression du gestionnaire ?" }, title: page.resource.can_be_deleted? ? "Supprimer" : "Ce gestionnaire ne peut etre supprimé car il est le seul gestionnaire d'un groupe racine" %>
+  <%= button_to(
+    t("administrate.actions.destroy"),
+    [namespace, page.resource],
+    method: :delete,
+    disabled: !page.resource.can_be_deleted?,
+    class: "button button--danger",
+    data: { confirm: "Confirmez-vous la suppression du gestionnaire ?" },
+    title: page.resource.can_be_deleted? ? "Supprimer" : "Ce gestionnaire ne peut etre supprimé car il est le seul gestionnaire d'un groupe racine") %>
   </div>
 </header>
 
 <section class="main-content__body">
-  <%= render partial: 'manager/application/user_meta', locals: {user: page.resource&.user} %>
-  <dl>
-    <% page.attributes.each do |attribute| %>
-      <dt class="attribute-label" id="<%= attribute.name %>">
-      <%= t(
-        "helpers.label.#{resource_name}.#{attribute.name}",
-        default: page.resource.class.human_attribute_name(attribute.name),
-      ) %>
-      </dt>
+  <%= render partial: 'manager/application/user_meta', locals: { user: page.resource&.user } %>
 
-      <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
-          ><%= render_field attribute, page: page %></dd>
+  <dl>
+    <% page.attributes.each do |title, attributes| %>
+      <fieldset class="<%= "field-unit--nested" if title.present? %>">
+        <% if title.present? %>
+          <legend><%= t "helpers.label.#{page.resource_name}.#{title}", default: title %></legend>
+        <% end %>
+
+        <% attributes.each do |attribute| %>
+          <dt class="attribute-label" id="<%= attribute.name %>">
+          <%= t(
+            "helpers.label.#{resource_name}.#{attribute.name}",
+            default: page.resource.class.human_attribute_name(attribute.name),
+          ) %>
+          </dt>
+
+          <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
+              ><%= render_field attribute, page: page %></dd>
+        <% end %>
+      </fieldset>
     <% end %>
   </dl>
 </section>
diff --git a/app/views/manager/groupe_gestionnaires/show.html.erb b/app/views/manager/groupe_gestionnaires/show.html.erb
index 659206d7d..d4ecf6ddc 100644
--- a/app/views/manager/groupe_gestionnaires/show.html.erb
+++ b/app/views/manager/groupe_gestionnaires/show.html.erb
@@ -18,7 +18,7 @@ as well as a link to its edit page.
 
 <% content_for(:title) { t("administrate.actions.show_resource", name: page.page_title) } %>
 
-<header class="main-content__header" role="banner">
+<header class="main-content__header">
   <h1 class="main-content__page-title">
     <%= content_for(:title) %>
   </h1>
@@ -42,26 +42,33 @@ as well as a link to its edit page.
 
 <section class="main-content__body">
   <dl>
-    <% page.attributes.each do |attribute| %>
-      <dt class="attribute-label" id="<%= attribute.name %>">
-      <%= t(
-        "helpers.label.#{resource_name}.#{attribute.name}",
-        default: page.resource.class.human_attribute_name(attribute.name),
-      ) %>
-      </dt>
+    <% page.attributes.each do |title, attributes| %>
+      <fieldset class="<%= "field-unit--nested" if title.present? %>">
+        <% if title.present? %>
+          <legend><%= t "helpers.label.#{page.resource_name}.#{title}", default: title %></legend>
+        <% end %>
 
-      <dd class="attribute-data attribute-data--<%=attribute.html_class%>">
-          <% if attribute.name == 'gestionnaires' %>
-
-          <%= render(
-            "collection_gestionnaires",
-            page: page,
-            attribute: attribute
+        <% attributes.each do |attribute| %>
+          <dt class="attribute-label" id="<%= attribute.name %>">
+          <%= t(
+            "helpers.label.#{resource_name}.#{attribute.name}",
+            default: page.resource.class.human_attribute_name(attribute.name),
           ) %>
-          <% else %>
-          <%= render_field attribute, page: page %>
-          <% end %>
-      </dd>
+          </dt>
+
+          <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
+            ><% if attribute.name == 'gestionnaires' %>
+              <%= render(
+                "collection_gestionnaires",
+                page: page,
+                attribute: attribute
+              ) %>
+            <% else %>
+              <%= render_field attribute, page: page %>
+            <% end %>
+          </dd>
+        <% end %>
+      </fieldset>
     <% end %>
   </dl>
 </section>
diff --git a/app/views/manager/instructeurs/show.html.erb b/app/views/manager/instructeurs/show.html.erb
index ba6af8ea7..4ce7efb4b 100644
--- a/app/views/manager/instructeurs/show.html.erb
+++ b/app/views/manager/instructeurs/show.html.erb
@@ -19,7 +19,7 @@ as well as a link to its edit page.
 <% content_for(:title) { t("administrate.actions.show_resource", name: page.page_title) } %>
 <% instructeur = page.resource %>
 
-<header class="main-content__header" role="banner">
+<header class="main-content__header">
   <h1 class="main-content__page-title">
     <%= content_for(:title) %>
   </h1>
@@ -30,29 +30,41 @@ as well as a link to its edit page.
       [:edit, namespace, page.resource],
       class: "button",
     ) if valid_action?(:edit) && show_action?(:edit, page.resource) %>
-  </div>
 
-  <div>
-      <%= link_to 'Réinviter', reinvite_manager_instructeur_path(instructeur), method: :post, class: 'button' %>
-  </div>
-  <div>
-    <%= button_to "Supprimer", delete_manager_instructeur_path(page.resource), method: :delete, disabled: !page.resource.can_be_deleted?, class: "button", data: { turbo_confirm: "Confirmez-vous la suppression de l'instructeur ?" }, title: page.resource.can_be_deleted? ? "Supprimer" : "Cet instructeur est administrateur ou a des démarches dont il est le seul instructeur et ne peut être supprimé" %>
+    <%= link_to 'Réinviter', reinvite_manager_instructeur_path(instructeur), method: :post, class: 'button' %>
+
+    <%= button_to("Supprimer",
+                  delete_manager_instructeur_path(page.resource),
+                  method: :delete,
+                  disabled: !page.resource.can_be_deleted?,
+                  class: "button button--danger",
+                  data: { turbo_confirm: "Confirmez-vous la suppression de l'instructeur ?" },
+                  title: page.resource.can_be_deleted? ? "Supprimer" : "Cet instructeur est administrateur ou a des démarches dont il est le seul instructeur et ne peut être supprimé") %>
   </div>
 </header>
 
 <section class="main-content__body">
-  <%= render partial: 'manager/application/user_meta', locals: {user: page.resource&.user} %>
-  <dl>
-    <% page.attributes.each do |attribute| %>
-      <dt class="attribute-label" id="<%= attribute.name %>">
-      <%= t(
-        "helpers.label.#{resource_name}.#{attribute.name}",
-        default: attribute.name.titleize,
-      ) %>
-      </dt>
+  <%= render partial: 'manager/application/user_meta', locals: { user: page.resource&.user } %>
 
-      <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
-          ><%= render_field attribute, page: page %></dd>
+  <dl>
+    <% page.attributes.each do |title, attributes| %>
+      <fieldset class="<%= "field-unit--nested" if title.present? %>">
+        <% if title.present? %>
+          <legend><%= t "helpers.label.#{page.resource_name}.#{title}", default: title %></legend>
+        <% end %>
+
+        <% attributes.each do |attribute| %>
+          <dt class="attribute-label" id="<%= attribute.name %>">
+          <%= t(
+            "helpers.label.#{resource_name}.#{attribute.name}",
+            default: page.resource.class.human_attribute_name(attribute.name),
+          ) %>
+          </dt>
+
+          <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
+              ><%= render_field attribute, page: page %></dd>
+        <% end %>
+      </fieldset>
     <% end %>
   </dl>
 </section>
diff --git a/app/views/manager/outdated_procedures/_collection.html.erb b/app/views/manager/outdated_procedures/_collection.html.erb
index 1ccef277e..1a966d96b 100644
--- a/app/views/manager/outdated_procedures/_collection.html.erb
+++ b/app/views/manager/outdated_procedures/_collection.html.erb
@@ -18,14 +18,15 @@ to display a collection of resources in an HTML table.
 [1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Collection
 %>
 
-<div class="bt-3">
+<div style="padding: 1em">
   <%= form_with(url: manager_outdated_procedures_path, method: :get) do |f| %>
     <h2>Nombre de démarches sans auto archivage des dossiers: <%= @records_per_page %></h2>
     <h2>Nombre de dossiers archivable parmis ces démarches: <%= resources.sum(&:dossiers_close_to_expiration) %> </h2>
-    <%= f.select :records_per_page, options_for_select([["10", "10"], ["100", "100"], ["1000", "1000"]], @records_per_page) %>
+    <%= f.select :records_per_page, options_for_select([["10", "10"], ["100", "100"], ["1000", "1000"]], @records_per_page), {}, style: "width: auto" %>
     <%= f.submit "Mettre a jour le nombre de démarche a archiver", class: 'button button--nav' %>
   <% end %>
 </div>
+
 <%= form_with(url: bulk_update_manager_outdated_procedures_path, method: :patch) do |f| %>
   <table aria-labelledby="<%= table_title %>">
     <thead data-controller="outdated" >
@@ -34,17 +35,17 @@ to display a collection of resources in an HTML table.
         <% collection_presenter.attribute_types.each do |attr_name, attr_type| %>
           <th class="cell-label
           cell-label--<%= attr_type.html_class %>
-          cell-label--<%= collection_presenter.ordered_html_class(attr_name) %>"
+          cell-label--<%= collection_presenter.ordered_html_class(attr_name) %>
+          cell-label--<%= "#{collection_presenter.resource_name}_#{attr_name}" %>"
           scope="col"
-          role="columnheader"
           aria-sort="<%= sort_order(collection_presenter.ordered_html_class(attr_name)) %>">
           <%= link_to(sanitized_order_params(page, collection_field_name).merge(
             collection_presenter.order_params_for(attr_name, key: collection_field_name)
           )) do %>
           <%= t(
             "helpers.label.#{collection_presenter.resource_name}.#{attr_name}",
-            default: resource_class.human_attribute_name(attr_name),
-          ).titleize %>
+            default: resource_class.human_attribute_name(attr_name).titleize,
+          ) %>
               <% if collection_presenter.ordered_by?(attr_name) %>
                 <span class="cell-label__sort-indicator cell-label__sort-indicator--<%= collection_presenter.ordered_html_class(attr_name) %>">
                   <svg aria-hidden="true">
@@ -55,23 +56,28 @@ to display a collection of resources in an HTML table.
             <% end %>
           </th>
         <% end %>
-        <% [valid_action?(:edit, collection_presenter.resource_name),
-            valid_action?(:destroy, collection_presenter.resource_name)].count(true).times do %>
-          <th scope="col"></th>
-        <% end %>
+        <%= render(
+          "collection_header_actions",
+          collection_presenter: collection_presenter,
+          page: page,
+          resources: resources,
+          table_title: "page-title"
+        ) %>
       </tr>
     </thead>
 
     <tbody>
       <% resources.each do |resource| %>
-        <tr class=""
-            <% if show_action? :show, resource %>
+        <tr
+            <% if accessible_action?(resource, :show) %>
               <%= %(tabindex=0 role=link data-url=#{polymorphic_path([namespace, resource])}) %>
             <% end %>
             >
-            <td><%= f.check_box "procedure[ids][#{resource.id}]", checked: false %></td>
+
+          <td><%= f.check_box "procedure[ids][#{resource.id}]", checked: false %></td>
+
           <% collection_presenter.attributes_for(resource).each do |attribute| %>
-            <td class="js-table-row cell-data cell-data--<%= attribute.html_class %>">
+            <td class="cell-data cell-data--<%= attribute.html_class %>">
               <% if show_action? :show, resource -%>
                 <a href="<%= polymorphic_path([namespace, resource]) -%>"
                    tabindex="-1"
@@ -85,26 +91,18 @@ to display a collection of resources in an HTML table.
             </td>
           <% end %>
 
-          <% if valid_action? :edit, collection_presenter.resource_name %>
-            <td><%= link_to(
-              t("administrate.actions.edit"),
-              [:edit, namespace, resource],
-              class: "action-edit",
-            ) if show_action? :edit, resource%></td>
-          <% end %>
-
-          <% if valid_action? :destroy, collection_presenter.resource_name %>
-            <td><%= link_to(
-              t("administrate.actions.destroy"),
-              [namespace, resource],
-              class: "text-color-red",
-              method: :delete,
-              data: { confirm: t("administrate.actions.confirm") }
-            ) if show_action? :destroy, resource %></td>
-          <% end %>
+          <%= render(
+            "collection_item_actions",
+            collection_presenter: collection_presenter,
+            collection_field_name: collection_field_name,
+            page: page,
+            namespace: namespace,
+            resource: resource,
+            table_title: "page-title"
+          ) %>
         </tr>
       <% end %>
     </tbody>
   </table>
-<%= f.submit "Activer l'archivage automatique des démarches sélectionnée" %>
+<%= f.submit "Activer l'archivage automatique des démarches sélectionnée", style: "margin: 1em"%>
 <% end %>
diff --git a/app/views/manager/outdated_procedures/index.html.erb b/app/views/manager/outdated_procedures/index.html.erb
index cd956b8a5..8317246ba 100644
--- a/app/views/manager/outdated_procedures/index.html.erb
+++ b/app/views/manager/outdated_procedures/index.html.erb
@@ -62,5 +62,5 @@ It renders the `_table` partial to display details about the resources.
     table_title: "page-title"
   ) %>
 
-  <%= paginate resources, param_name: '_page' %>
+  <%= render "pagination", resources: resources %>
 </section>
diff --git a/app/views/manager/procedures/show.html.erb b/app/views/manager/procedures/show.html.erb
index f3ab35375..38e6919e9 100644
--- a/app/views/manager/procedures/show.html.erb
+++ b/app/views/manager/procedures/show.html.erb
@@ -18,7 +18,7 @@ as well as a link to its edit page.
 <% content_for(:title) { t("administrate.actions.show_resource", name: page.page_title) } %>
 <% procedure = page.resource %>
 
-<header class="main-content__header" role="banner">
+<header class="main-content__header">
   <h1 class="main-content__page-title">
     <%= content_for(:title) %>
     <% if procedure.discarded? %>
@@ -26,94 +26,98 @@ as well as a link to its edit page.
     <% end %>
   </h1>
 
-  <div>
+  <div class="buttons">
     <%= link_to(
       t("administrate.actions.edit_resource", name: page.page_title),
       [:edit, namespace, page.resource],
       class: "button",
     ) if valid_action? :edit %>
-  </div>
 
-  <div>
-    <%= link_to 'aperçu', apercu_admin_procedure_path(procedure), class: 'button' %>
+    <%= link_to 'Aperçu', apercu_admin_procedure_path(procedure), class: 'button' %>
 
     <% if !procedure.whitelisted? %>
-      <%= link_to 'whitelister', whitelist_manager_procedure_path(procedure), method: :post, class: 'button' %>
+      <%= link_to 'Whitelister', whitelist_manager_procedure_path(procedure), method: :post, class: 'button' %>
     <% end %>
 
     <% if procedure.hidden_as_template? %>
-      <%= link_to 'autoriser l\'affichage dans les modèles', unhide_as_template_manager_procedure_path(procedure), method: :post, class: 'button' %>
+      <%= link_to 'Autoriser l\'affichage dans les modèles', unhide_as_template_manager_procedure_path(procedure), method: :post, class: 'button' %>
     <% else %>
-      <%= link_to 'masquer l\'affichage dans les modèles', hide_as_template_manager_procedure_path(procedure), method: :post, class: 'button' %>
+      <%= link_to 'Masquer l\'affichage dans les modèles', hide_as_template_manager_procedure_path(procedure), method: :post, class: 'button' %>
     <% end %>
 
     <% if procedure.can_be_deleted_by_manager? %>
-      <%= link_to 'Supprimer la démarche', discard_manager_procedure_path(procedure), method: :post, class: 'button', data: { confirm: "Confirmez-vous la suppression de la démarche ?" } %>
+      <%= link_to 'Supprimer la démarche', discard_manager_procedure_path(procedure), method: :post, class: 'button button--danger', data: { confirm: "Confirmez-vous la suppression de la démarche ?" } %>
     <% elsif procedure.discarded? %>
       <%= link_to 'Restaurer la démarche', restore_manager_procedure_path(procedure), method: :post, class: 'button', data: { confirm: "Confirmez-vous la restauration de la démarche ?" } %>
     <% end %>
-  <div>
-
+  </div>
 </header>
 
 <section class="main-content__body">
   <dl>
-    <% page.attributes.each do |attribute| %>
-      <dt class="attribute-label" id="<%= attribute.name %>">
-      <%= t(
-        "helpers.label.#{resource_name}.#{attribute.name}",
-        default: attribute.name.titleize,
-      ) %>
-      </dt>
+    <% page.attributes.each do |title, attributes| %>
+      <fieldset class="<%= "field-unit--nested" if title.present? %>">
+        <% if title.present? %>
+          <legend><%= t "helpers.label.#{page.resource_name}.#{title}", default: title %></legend>
+        <% end %>
 
-      <dd class="attribute-data attribute-data--<%=attribute.html_class%>">
-        <%= render_field attribute, page: page %>
-        <% if attribute.name == 'administrateurs' %>
-          <%= form_tag(add_administrateur_with_confirmation_manager_procedure_path(procedure), style: 'margin-top: 1rem;') do %>
-            <%= email_field_tag(:email, '', placeholder: 'Email', autocapitalize: 'off', autocorrect: 'off', spellcheck: 'false', style: 'margin-bottom: 1rem;width:24rem;') %>
-            <button>Ajouter un administrateur (pour toujours)</button>
-            <p>J'utilise cette option ETQ support quand un usager a besoin de devenir administrateur sur une démarche</p>
-          <% end %>
-          <% if procedure.administrateurs.any? { |admin| admin.email == current_super_admin.email } %>
-            <p style="margin-top: 20px;">Vous êtes administrateur de cette démarche. Aller à la démarche
-              <%= link_to("ETQ admin", admin_procedure_path(procedure), **external_link_attributes) %>
-              ou
-              <%= link_to("ETQ instructeur", instructeur_procedure_path(procedure), **external_link_attributes) %>.</p>
-            <%= link_to 'Me retirer de cette démarche', delete_administrateur_manager_procedure_path(procedure), method: :put, class: 'button' %>
-          <% else %>
-            <%= form_tag(add_administrateur_and_instructeur_manager_procedure_path(procedure), style: 'margin-top: 1rem;') do %>
-              <button>Devenir administrateur &amp; instructeur (pour la journée)</button>
-              <p>J'utilise cette option temporairement à des fins de support.</p>
+        <% attributes.each do |attribute| %>
+          <dt class="attribute-label" id="<%= attribute.name %>">
+          <%= t(
+            "helpers.label.#{resource_name}.#{attribute.name}",
+            default: attribute.name.titleize,
+          ) %>
+          </dt>
 
+          <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
+              ><%= render_field attribute, page: page %>
+            <% if attribute.name == 'administrateurs' %>
+              <%= form_tag(add_administrateur_with_confirmation_manager_procedure_path(procedure), style: 'margin-top: 1rem;') do %>
+                <%= email_field_tag(:email, '', placeholder: 'Email', autocapitalize: 'off', autocorrect: 'off', spellcheck: 'false', style: 'margin-bottom: 1rem;width:24rem;') %>
+                <button>Ajouter un administrateur (pour toujours)</button>
+                <p>J'utilise cette option ETQ support quand un usager a besoin de devenir administrateur sur une démarche</p>
+              <% end %>
+              <% if procedure.administrateurs.any? { |admin| admin.email == current_super_admin.email } %>
+                <p style="margin-top: 20px;">Vous êtes administrateur de cette démarche. Aller à la démarche
+                  <%= link_to("ETQ admin", admin_procedure_path(procedure), **external_link_attributes) %>
+                  ou
+                  <%= link_to("ETQ instructeur", instructeur_procedure_path(procedure), **external_link_attributes) %>.</p>
+                <%= link_to 'Me retirer de cette démarche', delete_administrateur_manager_procedure_path(procedure), method: :put, class: 'button' %>
+              <% else %>
+                <%= form_tag(add_administrateur_and_instructeur_manager_procedure_path(procedure), style: 'margin-top: 1rem;') do %>
+                  <button>Devenir administrateur &amp; instructeur (pour la journée)</button>
+                  <p>J'utilise cette option temporairement à des fins de support.</p>
+
+                <% end %>
+              <% end %>
+
+            <% elsif attribute.name == 'tags' %>
+              <%= form_for procedure, url: add_tags_manager_procedure_path(procedure), html: { class: 'form procedure-form__column--form fr-background-alt--blue-france mt-1' }  do %>
+                <%=  hidden_field_tag 'procedure[tags]', nil %>
+                <%=  react_component("ComboMultiple",
+                      options: Procedure.tags,
+                      selected: procedure.tags,
+                      disabled: [],
+                      label: 'Tags',
+                      group: '.procedure-form__column--form',
+                      name: 'tags',
+                      describedby: 'procedure-tags',
+                      acceptNewValues: true) %>
+                <button class="mt-1">Ajouter des tags</button>
+              <% end %>
+
+            <% elsif attribute.name == 'template' %>
+              <%= form_for procedure, url: update_template_status_manager_procedure_path(procedure), html: { method: :patch, class: 'procedure-form__column--form fr-background-alt--blue-france mt-1', id: 'template-form' } do |f| %>
+                <%= f.label :template, 'Marquer comme modèle', for: 'template_checkbox' %>
+                <%= f.check_box :template, id: 'template_checkbox', onchange: 'this.form.submit();' %>
+              <% end %>
             <% end %>
-          <% end %>
+          </dd>
         <% end %>
-        <% if attribute.name == 'tags' %>
 
-          <%= form_for procedure, url: add_tags_manager_procedure_path(procedure), html: { class: 'form procedure-form__column--form fr-background-alt--blue-france mt-1' }  do %>
-            <%=  hidden_field_tag 'procedure[tags]', nil %>
-            <%=  react_component("ComboMultiple",
-                  options: Procedure.tags,
-                  selected: procedure.tags,
-                  disabled: [],
-                  label: 'Tags',
-                  group: '.procedure-form__column--form',
-                  name: 'tags',
-                  describedby: 'procedure-tags',
-                  acceptNewValues: true) %>
-            <button class="mt-1">Ajouter des tags</button>
-          <% end %>
-        <% end %>
-        <% if attribute.name == 'template' %>
-          <%= form_for procedure, url: update_template_status_manager_procedure_path(procedure), html: { method: :patch, class: 'procedure-form__column--form fr-background-alt--blue-france mt-1', id: 'template-form' } do |f| %>
-            <%= f.label :template, 'Marquer comme modèle', for: 'template_checkbox' %>
-            <%= f.check_box :template, id: 'template_checkbox', onchange: 'this.form.submit();' %>
-          <% end %>
-        <% end %>
-      </dd>
+        <dd class="attribute-data">
+          <a class="button" href="<%= export_mail_brouillons_manager_procedure_url(procedure) %>">Télécharger un export CSV contenant les emails des demandeurs ayant effectué une demandes en brouillon</a></dd>
+      </fieldset>
     <% end %>
-    <dd class="attribute-data">
-      <a class="button" href="<%= export_mail_brouillons_manager_procedure_url(procedure) %>">Télécharger un export CSV contenant les emails des demandeurs ayant effectué une demandes en brouillon</a>
-    </dd>
   </dl>
 </section>
diff --git a/app/views/manager/users/show.html.erb b/app/views/manager/users/show.html.erb
index 9a0fa57ee..41f353302 100644
--- a/app/views/manager/users/show.html.erb
+++ b/app/views/manager/users/show.html.erb
@@ -19,19 +19,26 @@ as well as a link to its edit page.
 <% content_for(:title) { t("administrate.actions.show_resource", name: page.page_title) } %>
 <% user = page.resource %>
 
-<header class="main-content__header" role="banner">
+<header class="main-content__header">
   <h1 class="main-content__page-title" style="<%= "background-color: red;color: white;" if user.blocked_at %>">
     <%= content_for(:title) %>
     <%= "Bloqué" if user.blocked_at %>
   </h1>
 
-  <div>
-    <%= button_to "modifier", edit_manager_user_path(page.resource), method: :get, class: "button" %>
-  </div>
-  <div>
-    <%= button_to "supprimer", delete_manager_user_path(page.resource), method: :delete, disabled: !page.resource.can_be_deleted?, class: "button", data: { turbo_confirm: "Confirmez-vous la suppression de l'utilisateur ?" }, title: page.resource.can_be_deleted? ? "Supprimer" : "Cet utilisateur ne peut être supprimé. Il a des dossiers dont l'instruction a commencé ou il est administrateur ou instructeur" %>
-  </div>
-  <div>
+  <div class="buttons">
+    <%= link_to(
+      "Modifier",
+      edit_manager_user_path(page.resource),
+      class: "button") %>
+
+    <%= button_to(t("administrate.actions.destroy"),
+                  delete_manager_user_path(page.resource),
+                  method: :delete,
+                  disabled: !page.resource.can_be_deleted?,
+                  class: "button button--danger",
+                  data: { turbo_confirm: "Confirmez-vous la suppression de l'utilisateur ?" },
+                  title: page.resource.can_be_deleted? ? "Supprimer" : "Cet utilisateur ne peut être supprimé. Il a des dossiers dont l'instruction a commencé ou il est administrateur ou instructeur") %>
+
     <% if !user.confirmed? %>
       <%= link_to('Renvoyer l’email de confirmation', [:resend_confirmation_instructions, namespace, page.resource], method: :post, class: 'button') %>
     <% end %>
@@ -39,18 +46,27 @@ as well as a link to its edit page.
 </header>
 
 <section class="main-content__body">
-  <%= render partial: 'manager/application/user_meta', locals: {user: user} %>
-  <dl>
-    <% page.attributes.each do |attribute| %>
-      <dt class="attribute-label" id="<%= attribute.name %>">
-      <%= t(
-        "helpers.label.#{resource_name}.#{attribute.name}",
-        default: attribute.name.titleize,
-      ) %>
-      </dt>
+  <%= render partial: 'manager/application/user_meta', locals: { user: user } %>
 
-      <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
-          ><%= render_field attribute, page: page %></dd>
+  <dl>
+    <% page.attributes.each do |title, attributes| %>
+      <fieldset class="<%= "field-unit--nested" if title.present? %>">
+        <% if title.present? %>
+          <legend><%= t "helpers.label.#{page.resource_name}.#{title}", default: title %></legend>
+        <% end %>
+
+        <% attributes.each do |attribute| %>
+          <dt class="attribute-label" id="<%= attribute.name %>">
+          <%= t(
+            "helpers.label.#{resource_name}.#{attribute.name}",
+            default: page.resource.class.human_attribute_name(attribute.name),
+          ) %>
+          </dt>
+
+          <dd class="attribute-data attribute-data--<%=attribute.html_class%>"
+              ><%= render_field attribute, page: page %></dd>
+        <% end %>
+      </fieldset>
     <% end %>
   </dl>
 </section>
diff --git a/app/views/manager/zones/index.html.erb b/app/views/manager/zones/index.html.erb
deleted file mode 100644
index fbf35930a..000000000
--- a/app/views/manager/zones/index.html.erb
+++ /dev/null
@@ -1,70 +0,0 @@
-<%#
-# Index
-
-This view is the template for the index page.
-It is responsible for rendering the search bar, header and pagination.
-It renders the `_table` partial to display details about the resources.
-
-## Local variables:
-
-- `page`:
-  An instance of [Administrate::Page::Collection][1].
-  Contains helper methods to help display a table,
-  and knows which attributes should be displayed in the resource's table.
-- `resources`:
-  An instance of `ActiveRecord::Relation` containing the resources
-  that match the user's search criteria.
-  By default, these resources are passed to the table partial to be displayed.
-- `search_term`:
-  A string containing the term the user has searched for, if any.
-- `show_search_bar`:
-  A boolean that determines if the search bar should be shown.
-
-[1]: http://www.rubydoc.info/gems/administrate/Administrate/Page/Collection
-%>
-
-<% content_for(:title) do %>
-  <%= display_resource_name(page.resource_name) %>
-<% end %>
-
-<header class="main-content__header" role="banner">
-  <h1 class="main-content__page-title" id="page-title">
-    <%= content_for(:title) %>
-  </h1>
-
-  <div>
-    <%= link_to "Procedures sans zone renseignée", manager_zone_path(id: 'nil') %>
-  </div>
-
-  <% if show_search_bar %>
-    <%= render(
-      "search",
-      search_term: search_term,
-      resource_name: display_resource_name(page.resource_name)
-    ) %>
-  <% end %>
-
-  <div>
-    <%= link_to(
-      t(
-        "administrate.actions.new_resource",
-        name: display_resource_name(page.resource_name, singular: true).downcase
-      ),
-      [:new, namespace, page.resource_path.to_sym],
-      class: "button",
-    ) if valid_action?(:new) && show_action?(:new, new_resource) %>
-  </div>
-</header>
-
-<section class="main-content__body main-content__body--flush">
-  <%= render(
-    "collection",
-    collection_presenter: page,
-    collection_field_name: resource_name,
-    page: page,
-    resources: resources,
-    table_title: "page-title"
-  ) %>
-
-  <%= paginate resources, param_name: '_page' %>
-</section>