From bb959a1ac125513c8c4902d99161665279448f4b Mon Sep 17 00:00:00 2001
From: Charles <ce.marguerite@sudalys.fr>
Date: Tue, 21 Oct 2025 16:38:19 +0200
Subject: [PATCH] petite refonte graphique

---
 .idea/php.xml                                 | 16 ++++
 HELPER.MD                                     | 23 ++++-
 assets/app.js                                 |  5 +-
 assets/controllers/organization_controller.js |  3 +-
 assets/controllers/user_controller.js         |  2 +-
 assets/styles/card.css                        |  4 +
 src/Controller/OrganizationController.php     |  2 +-
 src/Service/ActionService.php                 |  2 +-
 src/Service/UserService.php                   |  2 +
 .../application/InformationCard.html.twig     | 27 +++---
 templates/application/appSmall.html.twig      |  8 +-
 templates/application/edit.html.twig          |  1 -
 templates/application/index.html.twig         | 26 +++---
 templates/organization/activity.html.twig     |  2 +-
 templates/organization/edit.html.twig         |  6 +-
 templates/organization/index.html.twig        | 46 ++++++----
 templates/organization/new.html.twig          | 11 ++-
 templates/organization/show.html.twig         | 32 ++++---
 .../user/application/information.html.twig    | 25 +++---
 templates/user/edit.html.twig                 | 13 +--
 templates/user/index.html.twig                |  6 +-
 templates/user/indexTest.html.twig            | 42 ++++-----
 templates/user/new.html.twig                  | 16 ++--
 templates/user/organization/edit.html.twig    | 50 -----------
 .../userOrganizationInformation.html.twig     | 89 -------------------
 templates/user/show.html.twig                 | 80 ++++++++++-------
 templates/user/userInformation.html.twig      | 77 ++++++++--------
 templates/user/userList.html.twig             | 29 +++---
 28 files changed, 307 insertions(+), 338 deletions(-)
 create mode 100644 assets/styles/card.css
 delete mode 100644 templates/user/organization/edit.html.twig
 delete mode 100644 templates/user/organization/userOrganizationInformation.html.twig

diff --git a/.idea/php.xml b/.idea/php.xml
index 5aec874..d547306 100644
--- a/.idea/php.xml
+++ b/.idea/php.xml
@@ -10,6 +10,11 @@
     <option name="highlightLevel" value="WARNING" />
     <option name="transferred" value="true" />
   </component>
+  <component name="PhpCodeSniffer">
+    <phpcs_settings>
+      <phpcs_by_interpreter asDefaultInterpreter="true" interpreter_id="e61c7a46-7290-4f1b-ace7-5462f6da9ae0" timeout="30000" />
+    </phpcs_settings>
+  </component>
   <component name="PhpIncludePathManager">
     <include_path>
       <path value="$PROJECT_DIR$/vendor/symfony/twig-bridge" />
@@ -173,9 +178,15 @@
       <path value="$PROJECT_DIR$/vendor/guzzlehttp/guzzle" />
       <path value="$PROJECT_DIR$/vendor/mtdowling/jmespath.php" />
       <path value="$PROJECT_DIR$/vendor/psr/http-client" />
+      <path value="$PROJECT_DIR$/vendor/twig/extra-bundle" />
     </include_path>
   </component>
   <component name="PhpProjectSharedConfiguration" php_language_level="8.2" />
+  <component name="PhpStan">
+    <PhpStan_settings>
+      <phpstan_by_interpreter asDefaultInterpreter="true" interpreter_id="e61c7a46-7290-4f1b-ace7-5462f6da9ae0" timeout="60000" />
+    </PhpStan_settings>
+  </component>
   <component name="PhpStanOptionsConfiguration">
     <option name="transferred" value="true" />
   </component>
@@ -184,6 +195,11 @@
       <PhpUnitSettings configuration_file_path="$PROJECT_DIR$/phpunit.xml.dist" custom_loader_path="$PROJECT_DIR$/vendor/autoload.php" use_configuration_file="true" />
     </phpunit_settings>
   </component>
+  <component name="Psalm">
+    <Psalm_settings>
+      <psalm_fixer_by_interpreter asDefaultInterpreter="true" interpreter_id="e61c7a46-7290-4f1b-ace7-5462f6da9ae0" timeout="60000" />
+    </Psalm_settings>
+  </component>
   <component name="PsalmOptionsConfiguration">
     <option name="transferred" value="true" />
   </component>
diff --git a/HELPER.MD b/HELPER.MD
index 934bbfb..0daee14 100644
--- a/HELPER.MD
+++ b/HELPER.MD
@@ -14,4 +14,25 @@
 
 ### Tabulator
 - Certaines fonctions sont déjà disponibles (snippet) mais commentées, car on ne les utilise pas
-    - Exemples de sorting et filtering sont disponibles dans 'src/controller/organization.php' L.268
\ No newline at end of file
+    - Exemples de sorting et filtering sont disponibles dans 'src/controller/organization.php' L.268
+
+### Frontend:
+- Le Body/content de chaque page sont dans des div avec le style suivant :
+``` html
+     <div class="w-100 h-100 p-5 m-auto">
+```
+- L'espace entre les éléments cartes est avec l'un des styles suivants :
+``` html
+    <div class="mb-3">  <!-- margin bottom -->
+    <div class="mt-3">  <!-- margin top -->
+    <div class="me-3">  <!-- margin end/right -->
+    <div class="ms-3">  <!-- margin start/left -->
+    <div class="mx-3">  <!-- margin left and right -->
+    <div class="my-3">  <!-- margin top and bottom -->
+    <div class="m-3">  <!-- margin -->
+    <div class="d-flex gap-2">  <!-- gap entre les boutons -->
+```
+- Chaque élément est une carte afin de donner un style uniforme :
+``` html
+    <div class="card p-3">
+```
\ No newline at end of file
diff --git a/assets/app.js b/assets/app.js
index bc24b10..9d65ba7 100644
--- a/assets/app.js
+++ b/assets/app.js
@@ -11,8 +11,9 @@ import './styles/navbar.css';
 import './styles/sidebar.css';
 import './styles/choices.css'
 import 'choices.js/public/assets/styles/choices.min.css';
-import 'tabulator-tables/dist/css/tabulator.min.css'
-import './styles/tabulator.css'
+import 'tabulator-tables/dist/css/tabulator.min.css';
+import './styles/tabulator.css';
+import './styles/card.css';
 
 import 'bootstrap';
 import './js/template.js';
diff --git a/assets/controllers/organization_controller.js b/assets/controllers/organization_controller.js
index dba278f..d89b579 100644
--- a/assets/controllers/organization_controller.js
+++ b/assets/controllers/organization_controller.js
@@ -75,7 +75,8 @@ export default class extends Controller {
                     },
                     width: 100,
                 },
-                // TODO: regarder quel style est mieux
+                // TODO: regarder quel style est mieux entre les "hozAlign"
+                // TODO: regarder quel style est mieux avec/sans headerFilter
                 {title: "Nom", field: "name", headerFilter: "input", widthGrow: 2, vertAlign: "middle", headerHozAlign: "left"},
                 {title: "Email", field: "email", headerFilter: "input", widthGrow: 2, vertAlign: "middle", hozAlign: "center"},
                 {
diff --git a/assets/controllers/user_controller.js b/assets/controllers/user_controller.js
index b88a03a..f87daae 100644
--- a/assets/controllers/user_controller.js
+++ b/assets/controllers/user_controller.js
@@ -207,7 +207,7 @@ export default class extends Controller {
             ajaxConfig: "GET",
             pagination: true,
             paginationMode: "remote",
-            paginationSize: 25,
+            paginationSize: 10,
 
             ajaxResponse: (url, params, response) => response,
             paginationDataSent: {page: "page", size: "size"},
diff --git a/assets/styles/card.css b/assets/styles/card.css
new file mode 100644
index 0000000..d27de53
--- /dev/null
+++ b/assets/styles/card.css
@@ -0,0 +1,4 @@
+.card.no-header-bg .card-header{
+    background-color: transparent !important;
+    border-bottom: none;
+}
\ No newline at end of file
diff --git a/src/Controller/OrganizationController.php b/src/Controller/OrganizationController.php
index b84e6bd..5b7fd25 100644
--- a/src/Controller/OrganizationController.php
+++ b/src/Controller/OrganizationController.php
@@ -193,7 +193,7 @@ class OrganizationController extends AbstractController
 
         $apps = $this->organizationsService->appsAccess($allApps, $orgApps);
 
-        $actions = $this->entityManager->getRepository(Actions::class)->findBy(['Organization' => $organization]);
+        $actions = $this->entityManager->getRepository(Actions::class)->findBy(['Organization' => $organization], limit: 15);
         $activities = $this->actionService->formatActivities($actions);
 
         $this->actionService->createAction("View Organization", $actingUser, $organization, $organization->getName());
diff --git a/src/Service/ActionService.php b/src/Service/ActionService.php
index 1474569..f0a7a44 100644
--- a/src/Service/ActionService.php
+++ b/src/Service/ActionService.php
@@ -27,7 +27,7 @@ readonly class ActionService
         if ($diffInSeconds < 60 * 60) { // less than 1 hour
             return '#247208';
         }
-        return '#C76633';
+        return '#cc664c';
     }
 
     /**
diff --git a/src/Service/UserService.php b/src/Service/UserService.php
index 1594677..285b3f7 100644
--- a/src/Service/UserService.php
+++ b/src/Service/UserService.php
@@ -196,11 +196,13 @@ class UserService
 
             $orgId = $org->getId();
             $orgName = $org->getName();
+            $orgLogo = $org->getLogoUrl();
 
             if (!isset($grouped[$orgId])) {
                 $grouped[$orgId] = [
                     'id' => $orgId,
                     'name' => $orgName,
+                    'logo' => $orgLogo,
                     'users' => [],
                 ];
             }
diff --git a/templates/application/InformationCard.html.twig b/templates/application/InformationCard.html.twig
index 0619264..627a95e 100644
--- a/templates/application/InformationCard.html.twig
+++ b/templates/application/InformationCard.html.twig
@@ -1,22 +1,27 @@
 {% block body %}
 
-<div class="card">
-    <div class="card-header">
-        <div class="card-title">
-            <h3><img width=10% src="{{ asset(application.logoUrl) }}" alt="Logo {{ application.title }}">
-                {{ application.name }}</h3>
+    <div class="card no-header-bg">
+
+        <div class="card-header d-flex gap-2 mt-2">
+            <img class="rounded-circle " style="width:50px; height:50px;" src="{{ asset(application.logoUrl) }}"
+                 alt="Logo application">
+            <div class="card-title">
+                <h1>{{ application.name }}</h1>
+            </div>
         </div>
-    </div>
-    <div class="card-body d-flex flex-column align-items-center">
-        <p class="card-text">{{ application.description|raw }}</p>
+
+        <div class="card-body d-flex flex-column align-items-center">
+            <p class="card-text">{{ application.description|raw }}</p>
             <div>
-                <a href="http://{{ application.subDomain }}.solutions-easy.moi" class="btn btn-primary me-2">Accéder à l'application</a>
+                <a href="http://{{ application.subDomain }}.solutions-easy.moi" class="btn btn-primary me-2">Accéder à
+                    l'application</a>
                 {% if is_granted("ROLE_SUPER_ADMIN") %}
-                    <a href="{{ path('application_edit', {'id': application.id}) }}" class="btn btn-secondary">Modifier l'application</a>
+                    <a href="{{ path('application_edit', {'id': application.id}) }}" class="btn btn-secondary">Modifier
+                        l'application</a>
                 {% endif %}
             </div>
+        </div>
     </div>
-</div>
 
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/application/appSmall.html.twig b/templates/application/appSmall.html.twig
index 2cd60af..007701a 100644
--- a/templates/application/appSmall.html.twig
+++ b/templates/application/appSmall.html.twig
@@ -1,10 +1,10 @@
 {% block body %}
 
-    <div class="card">
-        <div class="card-header">
+    <div class="card ">
+        <div class="card-header d-flex gap-2">
+            <img class="rounded-circle " style="width:50px; height:50px;" src="{{ asset(application.entity.logoUrl) }}" alt="Logo application">
             <div class="card-title">
-                <h3><img width=10% src="{{ asset(application.entity.logoUrl) }}" alt="Logo application">
-                    {{ application.entity.name }}</h3>
+                <h1>{{ application.entity.name }}</h1>
             </div>
         </div>
         <div class="card-body d-flex flex-column align-items-center">
diff --git a/templates/application/edit.html.twig b/templates/application/edit.html.twig
index 4c58031..d694a73 100644
--- a/templates/application/edit.html.twig
+++ b/templates/application/edit.html.twig
@@ -8,7 +8,6 @@
             </div>
             <div class="card-body">
 
-                {# templates/application/edit.html.twig #}
                 <form method="post" action="{{ path('application_edit', {'id': apps.id}) }}" data-controller="application">
                     <input name="name" type="text" value="{{ apps.name }}" class="form-control mb-3" required>
 
diff --git a/templates/application/index.html.twig b/templates/application/index.html.twig
index bce3227..f5ac08e 100644
--- a/templates/application/index.html.twig
+++ b/templates/application/index.html.twig
@@ -5,19 +5,21 @@
 {% endblock %}
 
 {% block body %}
-    <div class="row m-5">
-        <div class="container mt-5">
-            <h1 class="mb-4">Bienvenue sur la suite Easy</h1>
-            <p class="lead">Ici, vous pouvez trouver toutes nos applications à un seul endroit !</p>
-        </div>
-
-        {% for application in applications %}
-            <div class="col-6 mb-3">
-                {% include 'application/InformationCard.html.twig' with {
-                    application: application
-                } %}
+    <div class="w-100 h-100 p-5 m-auto">
+        <div class="row m-5">
+            <div class="container mt-5">
+                <h1 class="mb-4">Bienvenue sur la suite Easy</h1>
+                <p class="lead">Ici, vous pouvez trouver toutes nos applications à un seul endroit !</p>
             </div>
-        {% endfor %}
+
+            {% for application in applications %}
+                <div class="col-6 mb-3">
+                    {% include 'application/InformationCard.html.twig' with {
+                        application: application
+                    } %}
+                </div>
+            {% endfor %}
+        </div>
     </div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/organization/activity.html.twig b/templates/organization/activity.html.twig
index b6d6bfd..3e8723f 100644
--- a/templates/organization/activity.html.twig
+++ b/templates/organization/activity.html.twig
@@ -10,7 +10,7 @@
                 <p>Aucune activité récente.</p>
             {% else %}
                 {% set sortedActivities = activities|sort((a, b) => a.date <=> b.date)|reverse %}
-                <ul class="list-group">
+                <ul class="list-group gap-2">
                     {% for activity in sortedActivities%}
                         {% include 'user/organization/userActivity.html.twig' with {
                             activityTime: activity.date,
diff --git a/templates/organization/edit.html.twig b/templates/organization/edit.html.twig
index be0f350..c086c1e 100644
--- a/templates/organization/edit.html.twig
+++ b/templates/organization/edit.html.twig
@@ -1,9 +1,9 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    <div class=" col-md-10 m-auto p-5">
-        <div class="card">
-            <div class="card-title shadow-sm p-3 d-flex justify-content-between align-items-center">
+    <div class="w-100 h-100 p-5 m-auto">
+        <div class="card p-3 m-3">
+            <div class="card-header border-0">
                 <h2>Modifier l'organisation</h2>
                 {% if is_granted("ROLE_SUPER_ADMIN") %}
 {#                <a href="{{ path('organization_delete', {'id': organization.id}) }}" class="btn btn-danger">Supprimer</a>#}
diff --git a/templates/organization/index.html.twig b/templates/organization/index.html.twig
index 6ff1ab3..bf208af 100644
--- a/templates/organization/index.html.twig
+++ b/templates/organization/index.html.twig
@@ -4,30 +4,38 @@
 
 {% block body %}
     <div class="w-100 h-100 p-5 m-auto">
-        <div class="d-flex justify-content-between align-items-center mb-4">
-            <h1>Gestion des organisations</h1>
-            {% if is_granted("ROLE_SUPER_ADMIN") %}
-                <a href="{{ path('organization_new') }}" class="btn btn-primary">Ajouter une organisation</a>
-            {% endif %}
-        </div>
-        {% if organizationsData|length == 0 %}
-            <tr>
-                <td colspan="4" class="text-center">Aucune organisation trouvée.</td>
-                <td colspan="4" class="text-center">
-                    <a href="{{ path('organization_new') }}" class="btn btn-primary">Créer une organisation</a>
-                </td>
-            </tr>
-        {% else %}
-            <div class="card">
-                <div class="card-body">
+        <div class="card p-3 m-3 border-0">
+            <div class="card-header d-flex justify-content-between align-items-center  border-0">
+                <div class="card-title">
+                    <h1>Gestion des organisations</h1>
+                </div>
+
+                {% if is_granted("ROLE_SUPER_ADMIN") %}
+                    <a href="{{ path('organization_new') }}" class="btn btn-primary">Ajouter une organisation</a>
+                {% endif %}
+            </div>
+
+
+            <div class="card-body ">
+                {% if organizationsData|length == 0 %}
+
+{#                style présent juste pour créer de l'espace #}
+                    <div class="div text-center my-5 py-5">
+                        <h1 class="my-5 ty-5"> Aucune organisation trouvée. </h1>
+                        <a href="{{ path('organization_new') }}" class="btn btn-primary">Créer une organisation</a>
+                    </div>
+
+                {% else %}
+
                     <div id="tabulator-org" data-controller="organization"
                          data-organization-data-value="{{ organizationsData|json_encode(constant("JSON_UNESCAPED_UNICODE"))|e("html_attr") }}"
                          data-organization-aws-value="{{ aws_url }}"></div>
-                </div>
+
+
+                {% endif %}
             </div>
 
-        {% endif %}
-
+        </div>
     </div>
 
 {% endblock %}
\ No newline at end of file
diff --git a/templates/organization/new.html.twig b/templates/organization/new.html.twig
index a20dac1..0058aaf 100644
--- a/templates/organization/new.html.twig
+++ b/templates/organization/new.html.twig
@@ -3,11 +3,14 @@
 {% block title %}Ajouter une organisation{% endblock %}
 
 {% block body %}
-    <div class=" col-md-10 m-auto p-5">
-        <div class="card">
-            <div class="card-title shadow-sm p-3 d-flex justify-content-between align-items-center">
-                <h1>Ajouter une organisation</h1>
+    <div class="w-100 h-100 p-5 m-auto">
+        <div class="card p-3 m-3">
+            <div class="card-header border-0">
+                <div class="card-title d-flex justify-content-between align-items-center">
+                    <h1>Ajouter une organisation</h1>
+                </div>
             </div>
+
             <div class="card-body">
                 <form method="post" action="{{ path('organization_new') }}" enctype="multipart/form-data">
                     {{ form_start(form) }}
diff --git a/templates/organization/show.html.twig b/templates/organization/show.html.twig
index 24c8fc2..b665df1 100644
--- a/templates/organization/show.html.twig
+++ b/templates/organization/show.html.twig
@@ -1,8 +1,8 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    <div class="col-md-12 m-auto p-5">
-        <div class="col d-flex justify-content-between align-items-center ">
+    <div class="w-100 h-100 p-5 m-auto">
+        <div class="col d-flex justify-content-between align-items-center">
             <div class="d-flex ">
                 {% if organization.logoUrl %}
                     <img src="{{ aws_url ~ organization.logoUrl }}" alt="Organization logo"
@@ -10,14 +10,14 @@
                 {% endif %}
                 <h1 class="mb-4 ms-3">{{ organization.name|title }} - Dashboard</h1>
             </div>
-            <div>
+            <div class="d-flex gap-2">
                 {% if is_granted("ROLE_SUPER_ADMIN") %}
                     <a href="{{ path('organization_edit', {'id': organization.id}) }}" class="btn btn-primary">Gérer
                         l'organisation</a>
                     <form method="POST" action="{{ path('organization_delete', {'id': organization.id}) }}"
                           onsubmit="return confirm('Vous allez supprimer cette organisation, êtes vous sûre?');"
                           style="display: inline-block;">
-                        <button class="btn btn-danger" type="submit">Supprimer l'organisation</button>
+                        <button class="btn btn-secondary" type="submit">Supprimer l'organisation</button>
                     </form>
                     {% if organization.active %}
                         <form method="POST" action="{{ path('organization_deactivate', {'id': organization.id}) }}"
@@ -39,11 +39,12 @@
             </div>
 
         </div>
-        {#        USER ROW #}
+{#        single row so that activity and users tabs are next to each other#}
         <div class="row">
+{#           User tables #}
             <div class="col-9">
-                <div class="row mb-4">
-                    <div class="col mb-3 mb-sm-0 card me-2">
+                <div class="row mb-3 d-flex gap-2 ">
+                    <div class="col mb-3 card">
                         <div class="card-header">
                             <h2>
                                 Nouveaux utilisateurs
@@ -58,7 +59,7 @@
                             </div>
                         </div>
                     </div>
-                    <div class="col mb-3 mb-sm-0 card">
+                    <div class="col mb-3 card">
                         <div class="card-header">
                             <h2>
                                 Administrateurs
@@ -74,7 +75,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="card mb-3 ">
+                <div class="row mb-3 card">
                     <div class="card-header">
                         <h2>
                             Mes utilisateurs
@@ -89,8 +90,10 @@
                         </div>
                     </div>
                 </div>
+
                 {#        APPLICATION ROW #}
-                <div class="row">
+{#                TODO: Weird gap not going away#}
+                <div class="row mb-3 ">
                     {% for application in applications %}
                         <div class="col-6 mb-3">
                             {% include 'application/appSmall.html.twig' with {
@@ -100,7 +103,7 @@
                     {% endfor %}
                 </div>
             </div>
-
+{# Activities col#}
             <div class="col-3 m-auto">
                 {% include 'organization/activity.html.twig' with {
                     title: 'Activités récentes',
@@ -109,9 +112,12 @@
             </div>
 
         </div>
-
-
+{#        Ne pas enlever le 2ème /div#}
     </div>
+    </div>
+
+
+
 
 {% endblock %}
 
diff --git a/templates/user/application/information.html.twig b/templates/user/application/information.html.twig
index bb2f536..7a93618 100644
--- a/templates/user/application/information.html.twig
+++ b/templates/user/application/information.html.twig
@@ -1,25 +1,26 @@
 {% block body %}
     {% set roles = uoa.roles %}
-
-    <div class="card col-6 mb-4 me-4">
-        <div class="card-header">
-            <div class="d-flex">
-                {% if uoa.application.logoUrl %}
-                    <img src="{{ asset(uoa.application.logoUrl) }}" alt="Logo {{ uoa.application.name }}"
-                         class="rounded-circle me-2" style="width:40px; height:40px;">
-                {% endif %}
-                <h1 class="mb-0">{{ uoa.application.name|title }}</h1>
+{#    TODO: compare style with/without border#}
+    <div class="card col-6">
+        <div class="card-header d-flex gap-2">
+            {% if uoa.application.logoUrl %}
+                <img src="{{ asset(uoa.application.logoUrl) }}" alt="Logo {{ uoa.application.name }}"
+                     class="rounded-circle " style="width:50px; height:50px;">
+            {% endif %}
+            <div class="card-title">
+                <h1>{{ uoa.application.name|title }}</h1>
             </div>
+
         </div>
         <div class="card-body">
             <div class="row">
-                <p><b> Description : </b>{{ uoa.application.description|default('Aucune description disponible.') }}</p>
+{#                TODO: pb avec le |raw retour à la ligne#}
+                <p><b> Description : </b>{{ uoa.application.descriptionSmall|default('Aucune description disponible.')|raw }}</p>
             </div>
             {% if is_granted('ROLE_ADMIN') %}
+{#                TODO: Can be turn into an ajax function#}
                 <form method="POST"
                       action="{{ path('user_application_role', { id : uoa.uoId }) }}"
-                      onsubmit="return confirm('Attention, si le role utilisateur ' +
-                       'n\'est pas attribué, l\'utilisateur ne pourra plus accéder à l\'application. Êtes-vous sûr ?');"
                       data-controller="user"
                       data-user-roles-array-value="{{ uoa.rolesArray|json_encode }}"
                       data-user-selected-role-ids-value="{{ uoa.selectedRoleIds|json_encode }}">
diff --git a/templates/user/edit.html.twig b/templates/user/edit.html.twig
index a747074..061eda3 100644
--- a/templates/user/edit.html.twig
+++ b/templates/user/edit.html.twig
@@ -1,12 +1,15 @@
 {% extends 'base.html.twig' %}
 
 {% block body %}
-    <div class=" col-md-10 m-auto p-5">
-    <div class="card">
-        <div class="card-title shadow-sm p-3 d-flex justify-content-between align-items-center">
-            <h2>Modifier l'utilisateur</h2>
-{#            <a href="{{ path('user_delete', {'id': user.id}) }}" class="btn btn-danger">Supprimer</a>#}
+    <div class="w-100 h-100 p-5 m-auto">
+    <div class="card p-3">
+        <div class="card-header d-flex justify-content-between align-items-center">
+            <div class="card-title">
+                <h2>Modifier l'utilisateur</h2>
+            </div>
+                <a href="{{ path('user_delete', {'id': user.id}) }}" class="btn btn-danger m-3">Supprimer</a>
         </div>
+
         <div class="card-body">
 
             {{ form_start(form, {'action': path('user_edit', {'id': user.id}), 'method': 'PUT'}) }}
diff --git a/templates/user/index.html.twig b/templates/user/index.html.twig
index 8ddb05e..c968b04 100644
--- a/templates/user/index.html.twig
+++ b/templates/user/index.html.twig
@@ -3,8 +3,9 @@
 {% block title %}User Profile{% endblock %}
 
 {% block body %}
-    <div class="w-100 h-100 p-5 m-auto" data-controller="user">
-        <div class="d-flex justify-content-between align-items-center mb-4">
+    <div class="w-100 h-100 p-5 m-auto">
+        {#            TODO: check for border-0#}
+        <div class="d-flex justify-content-between align-items-center mb-3">
             <h1>Gestion Utilisateurs</h1>
             {% if is_granted('ROLE_SUPER_ADMIN') %}
                 <a href="{{ path('user_new') }}" class="btn btn-primary">Ajouter un utilisateur</a>
@@ -21,6 +22,7 @@
                     {% include 'user/userList.html.twig' with {
                         title: org.name,
                         organizationId: org.id|default(null),
+                        logo: org.logo|default(null),
                         users: org.users
                     } %}
                 {% endfor %}
diff --git a/templates/user/indexTest.html.twig b/templates/user/indexTest.html.twig
index e47d0e6..21b685f 100644
--- a/templates/user/indexTest.html.twig
+++ b/templates/user/indexTest.html.twig
@@ -5,31 +5,33 @@
 {% block body %}
     {% if is_granted('ROLE_SUPER_ADMIN') %}
         <div class="w-100 h-100 p-5 m-auto">
-
-            <div class="d-flex justify-content-between align-items-center mb-4">
-                <h1>Gestion Utilisateurs</h1>
-                <a href="{{ path('user_new') }}" class="btn btn-primary">Ajouter un utilisateur</a>
-            </div>
-
-
-            {% if users|length == 0 %}
-                <div class="alert alert-info">
-                    <h4>Aucun utilisateur trouvé</h4>
-                </div>
-            {% else %}
-                <div class="card">
-                    <div class="card-body">
-                        <div id="tabulator-userList" data-controller="user"
-                             data-user-aws-value="{{ aws_url }}"
-                             data-user-list-value="true"
-                             data-user-test-value="true">
-                        </div>
+            <div class="card p-3 m-3 border-0">
+                <div class="card-header border-0">
+                    <div class="d-flex justify-content-between align-items-center mb-3 ">
+                        <h1>Gestion Utilisateurs</h1>
+                        <a href="{{ path('user_new') }}" class="btn btn-primary">Ajouter un utilisateur</a>
                     </div>
                 </div>
 
-            {% endif %}
+                {% if users|length == 0 %}
+                    <div class="alert alert-info">
+                        <h4>Aucun utilisateur trouvé</h4>
+                    </div>
+                {% else %}
+                    <div class="card border-0">
+                        <div class="card-body">
+                            <div id="tabulator-userList" data-controller="user"
+                                 data-user-aws-value="{{ aws_url }}"
+                                 data-user-list-value="true">
+                            </div>
+                        </div>
+                    </div>
+
+                {% endif %}
+            </div>
         </div>
 
+
     {% else %}
         <div class="w-100 h-100 p-5 m-auto">
             <div class="alert alert-warning">
diff --git a/templates/user/new.html.twig b/templates/user/new.html.twig
index 9008ce5..ef804fb 100644
--- a/templates/user/new.html.twig
+++ b/templates/user/new.html.twig
@@ -3,19 +3,21 @@
 {% block title %}Ajouter un utilisateur{% endblock %}
 
 {% block body %}
-    <div class=" col-md-10 m-auto p-5">
-        <div class="card">
-            <div class="card-title shadow-sm p-3 d-flex justify-content-between align-items-center">
-                <h1>Ajouter un utilisateur</h1>
+    <div class="w-100 h-100 p-5 m-auto">
+        <div class="card p-3">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <div class="card-title">
+                    <h1>Ajouter un utilisateur</h1>
+                </div>
             </div>
             <div class="card-body">
                 <form method="post" action="{{ path('user_new') }}" enctype="multipart/form-data">
                     {{ form_start(form) }}
                     {{ form_widget(form) }}
                     {% if organizationId is defined %}
-                    <div class="form-group">
-                        <input hidden type="text" value="{{ organizationId }}" name="organizationId">
-                    </div>
+                        <div class="form-group">
+                            <input hidden type="text" value="{{ organizationId }}" name="organizationId">
+                        </div>
                     {% endif %}
                     <button type="submit" class="btn btn-primary">Enregistrer</button>
                     {{ form_end(form) }}
diff --git a/templates/user/organization/edit.html.twig b/templates/user/organization/edit.html.twig
deleted file mode 100644
index 410cb5e..0000000
--- a/templates/user/organization/edit.html.twig
+++ /dev/null
@@ -1,50 +0,0 @@
-{% extends 'base.html.twig' %}
-
-
-
-{% block body %}
-
-    <div class="col-md-10 m-auto p-5">
-        <div class="card">
-            {% for uo in userOrganization %}
-            <div class="card-title shadow-sm p-3 d-flex justify-content-between align-items-center">
-                <h3>
-                    Modification de : <b>{{ user.name|capitalize }} {{ user.surname|capitalize }} </b> chez
-                    <b> {{ uo.organization.name }}</b>
-                </h3>
-                <a href="{{ path('user_organization_deactivate', {'id': uo.uoId}) }}" class="btn btn-danger">Supprimer</a>
-            </div>
-            <div class="card-body">
-                <form method="POST" action="{{ path('user_organization_edit', {'id' : uo.uoId}) }}"
-                      data-controller="user"
-                      data-user-roles-array-value="{{ rolesArray|json_encode }}"
-                      data-user-selected-role-ids-value="{{ selectedRoleIds|json_encode }}"
-                      data-user-applications-array-value="{{ appsArray|json_encode }}"
-                      data-user-selected-application-ids-value="{{ selectedAppIds|json_encode }}">
-
-                    <div class="mb-3">
-                        <div class="form-group mb-3">
-                            <label for="roles">Roles</label>
-                            <select class="choices" data-type="select-multiple" id="roles" name="roles[]" multiple>
-                            </select>
-                        </div>
-                        <div class="form-group mb-3">
-                            <label for="applications">Applications</label>
-                            <select class="choices" data-type="select-multiple" id="applications" name="applications[]"
-                                    multiple>
-                            </select>
-                        </div>
-                    </div>
-
-{#                    bouton d'envoie du formulaire#}
-
-                    <button type="submit" class="btn btn-primary">Modifier</button>
-{#                    <a href="{{ path('user_organization_list') }}" class="btn btn-secondary">Annuler</a>#}
-                </form>
-
-            </div>
-        </div>
-        {% endfor %}
-    </div>
-
-{% endblock %}
\ No newline at end of file
diff --git a/templates/user/organization/userOrganizationInformation.html.twig b/templates/user/organization/userOrganizationInformation.html.twig
deleted file mode 100644
index 7cf4fe8..0000000
--- a/templates/user/organization/userOrganizationInformation.html.twig
+++ /dev/null
@@ -1,89 +0,0 @@
-{% block body %}
-
-
-    <div class="card col-4 mt-3 me-3" >
-        <div class="card-title shadow-sm p-3 d-flex justify-content-between align-items-center">
-            {#  Affichage du nom de l'organisation et de l'icône de flèche #}
-            <div class="d-flex user-org-card"
-                 style="cursor:pointer;" data-bs-toggle="collapse"
-                 data-bs-target="#org-details-{{ organization.id }}" aria-expanded="false"
-                 aria-controls="org-details-{{ organization.id }}">
-                <h2 class=" pe-2">{{ organization.name|capitalize }}</h2>
-                <i class="pt-2" id="arrow-icon-{{ organization.id }}">
-                    {{ ux_icon('fa6-regular:circle-down', {height: '25px', width: '25px'})  }}
-                </i>
-            </div>
-            {% if is_granted("ROLE_ADMIN") %}
-            <a href="{{ path('user_organization_edit', {'id': uoId}) }}" class="btn btn-primary" >Modifier</a>
-            {% endif %}
-        </div>
-
-        {#    Information principale sur l'utilisateur dans l'organisation#}
-        <div class="card-body">
-            {#  Affichage du plus haut role #}
-            <p><b>Role:</b>
-                {% if roles|length > 0 %}
-                    {% set firstRole = roles[0] %}
-                        {% if firstRole.name == "SUPER ADMIN" %}
-                            <span class="badge bg-danger">Super Administrateur</span>
-                        {% elseif firstRole.name == "ADMIN" %}
-                            <span class="badge bg-danger">Administrateur</span>
-                        {% else %}
-                        <span class="badge bg-primary">{{ firstRole.name|capitalize }}</span>
-                    {% endif %}
-                {% else %}
-                    Aucun rôle
-                {% endif %}
-            </p>
-
-            {#  Affichage des applications dont l'utilisateur à accès #}
-            <div class="d-flex">
-            {% if apps is not empty %}
-                {% for app in apps %}
-                        <img src="{{ asset(app.logoUrl) }}" alt="Logo {{ app.name }}" class="img-fluid ms-2" style="height: 30px; width: 30px;">
-                {% endfor %}
-            {% else %}
-                Aucune application associée.
-            {% endif %}
-            </div>
-        </div>
-
-        {#  Détails supplémentaires sur l'organisation #}
-        <div class="collapse card-body border-top" id="org-details-{{ organization.id }}">
-            {% if roles|length > 1 %}
-                <p><b>Autres rôles:</b>
-                    {% for role in roles|slice(1) %}
-                        {% if role.name == "SUPER ADMIN"%}
-                            <span class="badge bg-danger">Super Administrateur</span>
-                        {% elseif role.name == "ADMIN" %}
-                            <span class="badge bg-danger">Administrateur</span>
-                        {% else %}
-                            <span class="badge bg-primary">{{ role.name|capitalize }}</span>
-                        {% endif %}
-                        {% if not loop.last %} - {% endif %}
-                    {% endfor %}
-                </p>
-            {% endif %}
-            <p><b>Membre depuis:</b> {{ organization.createdAt|date('d/m/Y') }}</p>
-        </div>
-    </div>
-
-{% endblock %}
-
-{% block javascript %}
-<script>
-    document.addEventListener('DOMContentLoaded', function() {
-    var collapseEl = document.getElementById('org-details-{{ organization.id }}');
-    var arrowEl = document.getElementById('arrow-icon-{{ organization.id }}');
-    if (collapseEl && arrowEl) {
-        collapseEl.addEventListener('show.bs.collapse', function () {
-            arrowEl.innerHTML = `{{ ux_icon('fa6-regular:circle-up', {height: '25px', width: '25px'})|e('js') }}`;
-        });
-        collapseEl.addEventListener('hide.bs.collapse', function () {
-            arrowEl.innerHTML = `{{ ux_icon('fa6-regular:circle-down', {height: '25px', width: '25px'})|e('js') }}`;
-        });
-    }
-    });
-
-</script>
-{% endblock %}
\ No newline at end of file
diff --git a/templates/user/show.html.twig b/templates/user/show.html.twig
index 2aafdb9..19e60eb 100644
--- a/templates/user/show.html.twig
+++ b/templates/user/show.html.twig
@@ -2,45 +2,61 @@
 
 {% block body %}
 
-    <div class="col-md-10 m-auto p-5">
+    <div class="w-100 h-100 p-5 m-auto">
+        <div class="card p-3 m-3 border-0">
 
-
-        {% if is_granted("ROLE_ADMIN") %}
-            <div class="col d-flex justify-content-between align-items-center ">
-                <h1 class="mb-4">Gestion Utilisateur</h1>
-                <div>
-                    {% if is_granted("ROLE_SUPER_ADMIN") %}
-                        <a href="{{ path('user_delete', {'id': user.id}) }}" class="btn btn-danger">Supprimer</a>
-
-                        {% if user.active %}
-                            <a href="{{ path('user_deactivate', {'id': user.id}) }}"
-                               class="btn btn-danger">Désactiver l'utilisateur</a>
-                        {% else %}
-                            <a href="{{ path('user_activate', {'id': user.id}) }}" class="btn btn-success">Activer l'utilisateur</a>
+            {% if is_granted("ROLE_ADMIN") %}
+                <div class="card-header border-0 d-flex justify-content-between align-items-center ">
+                    <div class="card-title">
+                        <h1>Gestion Utilisateur</h1>
+                    </div>
+                    <div class="d-flex gap-2">
+                        {% if is_granted("ROLE_SUPER_ADMIN") %}
+                            <a href="{{ path('user_delete', {'id': user.id}) }}"
+                               class="btn btn-secondary">Supprimer</a>
+                            {% if user.active %}
+                                <a href="{{ path('user_deactivate', {'id': user.id}) }}"
+                                   class="btn btn-secondary">Désactiver l'utilisateur</a>
+                            {% else %}
+                                <a href="{{ path('user_activate', {'id': user.id}) }}" class="btn btn-primary ">Activer
+                                    l'utilisateur</a>
+                            {% endif %}
                         {% endif %}
-                    {% endif %}
+                    </div>
+                </div>
+            {% endif %}
+
+            <div class="card-body">
+
+                {% include 'user/userInformation.html.twig' %}
+
+
+                <div class="card border-0 no-header-bg ">
+                    <div class="card-header">
+                        {% if orgs|length >0 %}
+                            <div class="card-title">
+                                <h1>Vos applications</h1>
+                            </div>
+                        {% else %}
+                            <div class="card-title">
+                                <h1>Aucune application</h1>
+                            </div>
+                        {% endif %}
+                    </div>
+
+                    <div class="d-flex gap-2 card-body">
+                        {% for uoa in uoas %}
+                            {% include 'user/application/information.html.twig' %}
+                        {% endfor %}
                 </div>
 
+                </div>
+
+
             </div>
-        {% endif %}
-        {% include 'user/userInformation.html.twig' %}
-        {% if orgs|length >0 %}
-
-            <h1 class="mt-5 mb-4">Vos applications</h1>
-
-        {% else %}
-            <h1 class="mt-5 mb-4">Aucune application</h1>
-        {% endif %}
-        <div class="d-flex ">
-            {% for uoa in uoas %}
-                {% include 'user/application/information.html.twig' %}
-            {% endfor %}
-
-
         </div>
-
-
     </div>
+
 {% endblock %}
 
 {% block title %}
diff --git a/templates/user/userInformation.html.twig b/templates/user/userInformation.html.twig
index bb7bab7..04b163c 100644
--- a/templates/user/userInformation.html.twig
+++ b/templates/user/userInformation.html.twig
@@ -1,41 +1,48 @@
 {% block body %}
-
-    <div class="card border-0">
-        <div class="card-title shadow-sm p-3 d-flex justify-content-between align-items-center">
-            <div class="d-flex">
-                {% if user.pictureUrl is not empty %}
-                        <img src="{{ aws_url ~ user.pictureUrl }}" alt="user" class="me-3 rounded-circle" style="width:40px; height:40px;">
-                {% endif %}
-
-                <h2>{{ user.surname|capitalize }} {{ user.name|capitalize }}</h2>
-            </div>
-
-            <div class="d-flex gap-2">
-                {% if organizationId is not null %}
-                    {% if uoActive %}
-                        <form method="post" action="{{ path('user_deactivate_organization', {'id': user.id}) }}"
-                              onsubmit="return confirm('Vous allez retirer l\'utilisateur de cette organisation, êtes vous sûre?');">
-                            <input type="hidden" name="organizationId" value="{{ organizationId }}">
-                            <button class="btn btn-danger" type="submit">Désactiver l'utilisateur de l'organisation</button>
-                        </form>
-                    {% else %}
-                        <form method="post" action="{{ path('user_activate_organization', {'id': user.id}) }}"
-                              onsubmit="return confirm('Vous allez activer cette utilisateur dans votre organisation, êtes vous sûre?');">
-                            <input type="hidden" name="organizationId" value="{{ organizationId }}">
-                            <button class="btn btn-primary" type="submit">Activer l'utilisateur de l'organisation</button>
-                        </form>
+     <div class="card no-header-bg border-0 ">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <div class="d-flex gap-2">
+                    {% if user.pictureUrl is not empty %}
+                        <img src="{{ aws_url ~ user.pictureUrl }}" alt="user" class="rounded-circle"
+                             style="width:40px; height:40px;">
                     {% endif %}
-                {% endif %}
-                <a href="{{ path('user_edit', {'id': user.id, 'organizationId': organizationId}) }}" class="btn btn-primary">Modifier</a>
+                    <div class="card-title ">
+                        <h2>{{ user.surname|capitalize }} {{ user.name|capitalize }}</h2>
+                    </div>
+                </div>
+
+                <div class="d-flex gap-2">
+                    {% if organizationId is not null %}
+                        {% if uoActive %}
+                            <form method="post" action="{{ path('user_deactivate_organization', {'id': user.id}) }}"
+                                  onsubmit="return confirm('Vous allez retirer l\'utilisateur de cette organisation, êtes vous sûre?');">
+                                <input type="hidden" name="organizationId" value="{{ organizationId }}">
+                                <button class="btn btn-secondary" type="submit">Désactiver l'utilisateur de l'organisation
+                                </button>
+                            </form>
+                        {% else %}
+                            <form method="post" action="{{ path('user_activate_organization', {'id': user.id}) }}"
+                                  onsubmit="return confirm('Vous allez activer cette utilisateur dans votre organisation, êtes vous sûre?');">
+                                <input type="hidden" name="organizationId" value="{{ organizationId }}">
+                                <button class="btn btn-primary" type="submit">Activer l'utilisateur de l'organisation
+                                </button>
+                            </form>
+                        {% endif %}
+                    {% endif %}
+                    <a href="{{ path('user_edit', {'id': user.id, 'organizationId': organizationId}) }}"
+                       class="btn btn-primary">Modifier</a>
+                </div>
+            </div>
+
+
+            <div class="card-body ">
+                <p><b>Email: </b>{{ user.email }}</p>
+                <p><b>Dernière connection: </b>{{ user.lastConnection|date('d/m/Y') }}
+                    à {{ user.lastConnection|date('H:m:s') }} </p>
+                <p><b>Compte crée le: </b>{{ user.createdAt|date('d/m/Y') }}</p>
+                <p><b>Numéro de téléphone: </b>{{ user.phoneNumber ? user.phoneNumber : 'Non renseigné' }}</p>
             </div>
         </div>
-        <div class="card-body">
-            <p><b>Email: </b>{{ user.email }}</p>
-            <p><b>Dernière connection: </b>{{ user.lastConnection|date('d/m/Y') }}
-                à {{ user.lastConnection|date('H:m:s') }} </p>
-            <p><b>Compte crée le: </b>{{ user.createdAt|date('d/m/Y') }}</p>
-            <p><b>Numéro de téléphone: </b>{{ user.phoneNumber ? user.phoneNumber : 'Non renseigné' }}</p>
-        </div>
-    </div>
+
 
 {% endblock %}
diff --git a/templates/user/userList.html.twig b/templates/user/userList.html.twig
index 4dd9a2d..5035ecc 100644
--- a/templates/user/userList.html.twig
+++ b/templates/user/userList.html.twig
@@ -1,26 +1,33 @@
 {% block body %}
 
-    <div class="card border-0 p-3 mb-4">
+    <div class="card p-3 mb-3">
 
         {% if title is defined %}
-            <div class="card-title d-flex justify-content-between align-items-center ">
-                <h3>{{ title }}</h3>
-                {% if organizationId %}
+            <div class="card-header">
+                <div class="card-title d-flex align-items-center ">
+                    {% if logo %}
+                        <img src="{{ aws_url ~ logo }}" alt="Organization Logo" style="height: 50px; width: 50px;" class="rounded-circle">
 
-                {% endif %}
+                    {% endif %}
+                    <h3 class="ms-3">{{ title|capitalize }}</h3>
+                    {% if organizationId %}
+
+                    {% endif %}
+                </div>
             </div>
+
         {% endif %}
         <div class="card-body">
 
             <table class="table align-middle ">
-                <thead class="table-light">
+                <thead>
                 <tr>
-                    <th>Picture</th>
-                    <th>Surname</th>
-                    <th>Name</th>
+                    <th>Profile</th>
+                    <th>Nom</th>
+                    <th>Prénom</th>
                     <th>Email</th>
                     <th>Statut</th>
-                    <th>Visualiser</th>
+                    <th>Action</th>
                 </tr>
                 </thead>
                 <tbody>
@@ -57,7 +64,7 @@
                                             <span class="badge bg-secondary">Inactif</span>
                                         {% endif %}
                                     {% else %}
-                                        <span class="badge bg-danger">Désactivé</span>
+                                        <span class="badge bg-secondary">Désactivé</span>
                                     {% endif %}
                                     {#                        if no organization link #}
                                 {% else %}