From 3d3e691d60cd3ede4a516eabb9b922d48b661f53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20TR=C3=89BEL=20=28Perso=29?=
 <stephane.trebel@gmail.com>
Date: Thu, 21 May 2026 16:37:36 +0200
Subject: [PATCH 1/2] chore(client): explicitely add eslint as a devDep

---
 apps/client/package.json |   1 +
 pnpm-lock.yaml           | 107 ++++++++++++++-------------------------
 2 files changed, 39 insertions(+), 69 deletions(-)

diff --git a/apps/client/package.json b/apps/client/package.json
index 89898f957..6512158b5 100644
--- a/apps/client/package.json
+++ b/apps/client/package.json
@@ -60,6 +60,7 @@
     "@vitest/coverage-v8": "^4.1.5",
     "@vue/eslint-config-typescript": "^14.7.0",
     "chalk": "^5.6.2",
+    "eslint": "^10.1.0",
     "eslint-plugin-vue": "^10.8.0",
     "jsdom": "^25.0.1",
     "rimraf": "^6.1.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5281124de..b9e7dc1d8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,6 +135,9 @@ importers:
       chalk:
         specifier: ^5.6.2
         version: 5.6.2
+      eslint:
+        specifier: ^10.1.0
+        version: 10.3.0(jiti@2.6.1)
       eslint-plugin-vue:
         specifier: ^10.8.0
         version: 10.8.0(@stylistic/eslint-plugin@5.10.0(eslint@10.3.0(jiti@2.6.1)))(@typescript-eslint/parser@8.59.2(eslint@10.3.0(jiti@2.6.1))(typescript@5.9.3))(eslint@10.3.0(jiti@2.6.1))(vue-eslint-parser@10.4.0(eslint@10.3.0(jiti@2.6.1)))
@@ -2306,10 +2309,6 @@ packages:
     resolution: {integrity: sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/object-schema@3.0.3':
-    resolution: {integrity: sha512-iM869Pugn9Nsxbh/YHRqYiqd23AmIbxJOcpUMOuWCVNdoQJ5ZtwL6h3t0bcZzJUlC3Dq9jCFCESBZnX0GTv7iQ==}
-    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
-
   '@eslint/object-schema@3.0.5':
     resolution: {integrity: sha512-vqTaUEgxzm+YDSdElad6PiRoX4t8VGDjCtt05zn4nU810UIx/uNEV7/lZJ6KwFThKZOzOxzXy48da+No7HZaMw==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -2461,10 +2460,6 @@ packages:
     resolution: {integrity: sha512-xS8HAzhRSQXqMfD779EgbZmPcgkaNW8Hf2anrwvvPYb9Tt0vP9CtzOqj+8GYSOUQqgcRFejmCR9WoAgZJamB1g==}
     engines: {pnpm: '>=8'}
 
-  '@humanfs/core@0.19.1':
-    resolution: {integrity: sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==}
-    engines: {node: '>=18.18.0'}
-
   '@humanfs/core@0.19.2':
     resolution: {integrity: sha512-UhXNm+CFMWcbChXywFwkmhqjs3PRCmcSa/hfBgLIb7oQ5HNb1wS0icWsGtSAUNgefHeI+eBrA8I1fxmbHsGdvA==}
     engines: {node: '>=18.18.0'}
@@ -4711,9 +4706,6 @@ packages:
   ajv@8.17.1:
     resolution: {integrity: sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==}
 
-  ajv@8.18.0:
-    resolution: {integrity: sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==}
-
   ajv@8.20.0:
     resolution: {integrity: sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA==}
 
@@ -4906,10 +4898,6 @@ packages:
   brace-expansion@2.1.0:
     resolution: {integrity: sha512-TN1kCZAgdgweJhWWpgKYrQaMNHcDULHkWwQIspdtjV4Y5aurRdZpjAqn6yX3FPqTA9ngHCc4hJxMAMgGfve85w==}
 
-  brace-expansion@5.0.4:
-    resolution: {integrity: sha512-h+DEnpVvxmfVefa4jFbCf5HdH5YMDXRsmKflpf1pILZWRFlTbJpxeU55nJl4Smt5HQaGzg1o6RHFPJaOqnmBDg==}
-    engines: {node: 18 || 20 || >=22}
-
   brace-expansion@5.0.6:
     resolution: {integrity: sha512-kLpxurY4Z4r9sgMsyG0Z9uzsBlgiU/EFKhj/h91/8yHu0edo7XuixOIH3VcJ8kkxs6/jPzoI6U9Vj3WqbMQ94g==}
     engines: {node: 18 || 20 || >=22}
@@ -9581,8 +9569,8 @@ snapshots:
       '@apidevtools/json-schema-ref-parser': 14.0.1
       '@apidevtools/openapi-schemas': 2.1.0
       '@apidevtools/swagger-methods': 3.0.2
-      ajv: 8.18.0
-      ajv-draft-04: 1.0.0(ajv@8.18.0)
+      ajv: 8.20.0
+      ajv-draft-04: 1.0.0(ajv@8.20.0)
       call-me-maybe: 1.0.2
       openapi-types: 12.1.3
 
@@ -10853,9 +10841,9 @@ snapshots:
 
   '@eslint/config-array@0.23.3':
     dependencies:
-      '@eslint/object-schema': 3.0.3
+      '@eslint/object-schema': 3.0.5
       debug: 4.4.3(supports-color@5.5.0)
-      minimatch: 10.2.4
+      minimatch: 10.2.5
     transitivePeerDependencies:
       - supports-color
 
@@ -10873,7 +10861,7 @@ snapshots:
 
   '@eslint/config-helpers@0.5.3':
     dependencies:
-      '@eslint/core': 1.1.1
+      '@eslint/core': 1.2.1
 
   '@eslint/config-helpers@0.5.5':
     dependencies:
@@ -10925,8 +10913,6 @@ snapshots:
 
   '@eslint/object-schema@2.1.7': {}
 
-  '@eslint/object-schema@3.0.3': {}
-
   '@eslint/object-schema@3.0.5': {}
 
   '@eslint/plugin-kit@0.4.1':
@@ -10936,7 +10922,7 @@ snapshots:
 
   '@eslint/plugin-kit@0.6.1':
     dependencies:
-      '@eslint/core': 1.1.1
+      '@eslint/core': 1.2.1
       levn: 0.4.1
 
   '@eslint/plugin-kit@0.7.1':
@@ -10954,8 +10940,8 @@ snapshots:
 
   '@fastify/ajv-compiler@3.6.0':
     dependencies:
-      ajv: 8.18.0
-      ajv-formats: 2.1.1(ajv@8.18.0)
+      ajv: 8.20.0
+      ajv-formats: 2.1.1(ajv@8.20.0)
       fast-uri: 2.4.0
 
   '@fastify/ajv-compiler@4.0.5':
@@ -11160,15 +11146,13 @@ snapshots:
 
   '@himenon/argocd-typescript-openapi@1.2.2': {}
 
-  '@humanfs/core@0.19.1': {}
-
   '@humanfs/core@0.19.2':
     dependencies:
       '@humanfs/types': 0.15.0
 
   '@humanfs/node@0.16.7':
     dependencies:
-      '@humanfs/core': 0.19.1
+      '@humanfs/core': 0.19.2
       '@humanwhocodes/retry': 0.4.3
 
   '@humanfs/node@0.16.8':
@@ -11449,10 +11433,10 @@ snapshots:
 
   '@kubernetes-models/validate@4.0.0':
     dependencies:
-      ajv: 8.18.0
-      ajv-formats: 2.1.1(ajv@8.18.0)
-      ajv-formats-draft2019: 1.6.1(ajv@8.18.0)
-      ajv-i18n: 4.2.0(ajv@8.18.0)
+      ajv: 8.20.0
+      ajv-formats: 2.1.1(ajv@8.20.0)
+      ajv-formats-draft2019: 1.6.1(ajv@8.20.0)
+      ajv-i18n: 4.2.0(ajv@8.20.0)
       is-cidr: 4.0.2
       tslib: 2.8.1
     optionalDependencies:
@@ -14025,7 +14009,7 @@ snapshots:
       '@typescript-eslint/types': 8.57.0
       '@typescript-eslint/visitor-keys': 8.57.0
       debug: 4.4.3(supports-color@5.5.0)
-      minimatch: 10.2.4
+      minimatch: 10.2.5
       semver: 7.7.4
       tinyglobby: 0.2.15
       ts-api-utils: 2.4.0(typescript@5.9.3)
@@ -14565,45 +14549,41 @@ snapshots:
 
   agent-base@7.1.4: {}
 
-  ajv-draft-04@1.0.0(ajv@8.18.0):
+  ajv-draft-04@1.0.0(ajv@8.20.0):
     optionalDependencies:
-      ajv: 8.18.0
+      ajv: 8.20.0
 
-  ajv-formats-draft2019@1.6.1(ajv@8.18.0):
+  ajv-formats-draft2019@1.6.1(ajv@8.20.0):
     dependencies:
-      ajv: 8.18.0
+      ajv: 8.20.0
       punycode: 2.3.1
       schemes: 1.4.0
       smtp-address-parser: 1.1.0
       uri-js: 4.4.1
 
-  ajv-formats@2.1.1(ajv@8.18.0):
+  ajv-formats@2.1.1(ajv@8.20.0):
     optionalDependencies:
-      ajv: 8.18.0
+      ajv: 8.20.0
 
   ajv-formats@3.0.1(ajv@8.17.1):
     optionalDependencies:
       ajv: 8.17.1
 
-  ajv-formats@3.0.1(ajv@8.18.0):
-    optionalDependencies:
-      ajv: 8.18.0
-
   ajv-formats@3.0.1(ajv@8.20.0):
     optionalDependencies:
       ajv: 8.20.0
 
-  ajv-i18n@4.2.0(ajv@8.18.0):
+  ajv-i18n@4.2.0(ajv@8.20.0):
     dependencies:
-      ajv: 8.18.0
+      ajv: 8.20.0
 
-  ajv-keywords@3.5.2(ajv@6.14.0):
+  ajv-keywords@3.5.2(ajv@6.15.0):
     dependencies:
-      ajv: 6.14.0
+      ajv: 6.15.0
 
-  ajv-keywords@5.1.0(ajv@8.18.0):
+  ajv-keywords@5.1.0(ajv@8.20.0):
     dependencies:
-      ajv: 8.18.0
+      ajv: 8.20.0
       fast-deep-equal: 3.1.3
 
   ajv@6.14.0:
@@ -14627,13 +14607,6 @@ snapshots:
       json-schema-traverse: 1.0.0
       require-from-string: 2.0.2
 
-  ajv@8.18.0:
-    dependencies:
-      fast-deep-equal: 3.1.3
-      fast-uri: 3.1.0
-      json-schema-traverse: 1.0.0
-      require-from-string: 2.0.2
-
   ajv@8.20.0:
     dependencies:
       fast-deep-equal: 3.1.3
@@ -14841,10 +14814,6 @@ snapshots:
     dependencies:
       balanced-match: 1.0.2
 
-  brace-expansion@5.0.4:
-    dependencies:
-      balanced-match: 4.0.4
-
   brace-expansion@5.0.6:
     dependencies:
       balanced-match: 4.0.4
@@ -16029,8 +15998,8 @@ snapshots:
   fast-json-stringify@5.16.1:
     dependencies:
       '@fastify/merge-json-schemas': 0.1.1
-      ajv: 8.18.0
-      ajv-formats: 3.0.1(ajv@8.18.0)
+      ajv: 8.20.0
+      ajv-formats: 3.0.1(ajv@8.20.0)
       fast-deep-equal: 3.1.3
       fast-uri: 2.4.0
       json-schema-ref-resolver: 1.0.1
@@ -16459,7 +16428,7 @@ snapshots:
 
   glob@13.0.0:
     dependencies:
-      minimatch: 10.2.4
+      minimatch: 10.2.5
       minipass: 7.1.3
       path-scurry: 2.0.2
 
@@ -17672,7 +17641,7 @@ snapshots:
 
   minimatch@10.2.4:
     dependencies:
-      brace-expansion: 5.0.4
+      brace-expansion: 5.0.6
 
   minimatch@10.2.5:
     dependencies:
@@ -18665,15 +18634,15 @@ snapshots:
   schema-utils@3.3.0:
     dependencies:
       '@types/json-schema': 7.0.15
-      ajv: 6.14.0
-      ajv-keywords: 3.5.2(ajv@6.14.0)
+      ajv: 6.15.0
+      ajv-keywords: 3.5.2(ajv@6.15.0)
 
   schema-utils@4.3.3:
     dependencies:
       '@types/json-schema': 7.0.15
-      ajv: 8.18.0
-      ajv-formats: 2.1.1(ajv@8.18.0)
-      ajv-keywords: 5.1.0(ajv@8.18.0)
+      ajv: 8.20.0
+      ajv-formats: 2.1.1(ajv@8.20.0)
+      ajv-keywords: 5.1.0(ajv@8.20.0)
 
   schemes@1.4.0:
     dependencies:

From fffc64af406cfcdf83de10a074cd0554c58099e8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?St=C3=A9phane=20TR=C3=89BEL=20=28Perso=29?=
 <stephane.trebel@gmail.com>
Date: Thu, 21 May 2026 16:41:01 +0200
Subject: [PATCH 2/2] chore(client): fix custom role management

---
 .../client/src/components/ProjectRoleForm.vue |  91 +++++----
 apps/client/src/views/ProjectDashboard.vue    | 193 +++++++++++++-----
 2 files changed, 187 insertions(+), 97 deletions(-)

diff --git a/apps/client/src/components/ProjectRoleForm.vue b/apps/client/src/components/ProjectRoleForm.vue
index d145bee1b..ce466ec4f 100644
--- a/apps/client/src/components/ProjectRoleForm.vue
+++ b/apps/client/src/components/ProjectRoleForm.vue
@@ -1,6 +1,12 @@
 <script lang="ts" setup>
 import type { Member, ProjectRoleBigint, ProjectV2 } from '@cpn-console/shared'
-import { isManagedRoleType, isSystemRoleType, PROJECT_PERMS, projectPermsDetails, shallowEqual } from '@cpn-console/shared'
+import {
+  isManagedRoleType,
+  isSystemRoleType,
+  PROJECT_PERMS,
+  projectPermsDetails,
+  shallowEqual,
+} from '@cpn-console/shared'
 import { computed, ref } from 'vue'
 
 const props = defineProps<{
@@ -33,17 +39,17 @@ const isSystem = computed(() => isSystemRoleType(role.value.type))
 const isManaged = computed(() => isManagedRoleType(role.value.type))
 
 const isUpdated = computed(() => {
-  if (role.value.isEveryone) return props.permissions !== role.value.permissions
+  if (role.value.isEveryone)
+    return props.permissions !== role.value.permissions
   return !shallowEqual(props, role.value)
 })
 
 const tabListName = 'Liste d’onglet'
 const tabTitles = computed(() => [
   { title: 'Général', icon: 'ri:checkbox-circle-line', tabId: 'general' },
-  ...(
-    isManaged.value
-      ? [{ title: 'Membres', icon: 'ri:checkbox-circle-line', tabId: 'members' }]
-      : []),
+  ...(isManaged.value
+    ? [{ title: 'Membres', icon: 'ri:checkbox-circle-line', tabId: 'members' }]
+    : []),
   { title: 'Fermer', icon: 'ri:close-line', tabId: 'close' },
 ])
 
@@ -67,10 +73,14 @@ function updateChecked(checked: boolean, value: bigint) {
     :tab-titles="tabTitles"
     class="mb-5"
   >
-    <DsfrTabContent
-      panel-id="general"
-      tab-id="general"
-    >
+    <DsfrTabContent panel-id="general" tab-id="general">
+      <DsfrNotice
+        v-if="!role.isEveryone && !isSystem"
+        class="mb-5"
+        style="width: fit-content"
+        title="Les rôles personnalisés d'un projet ne concernent que la Console, pas les services externes !"
+        type="warning"
+      />
       <h6>Nom du rôle</h6>
       <DsfrInput
         v-model="role.name"
@@ -79,14 +89,9 @@ function updateChecked(checked: boolean, value: bigint) {
         class="mb-5"
         :disabled="role.isEveryone || isSystem"
       />
-      <h6>Permissions</h6>
-      <div
-        v-for="scope in projectPermsDetails"
-        :key="scope.name"
-      >
-        <p
-          class="mb-3 ml-2 font-bold font-underline"
-        >
+      <h6>Permissions de la Console</h6>
+      <div v-for="scope in projectPermsDetails" :key="scope.name">
+        <p class="mb-3 ml-2 font-bold font-underline">
           {{ scope.name }}
         </p>
         <DsfrCheckbox
@@ -98,8 +103,14 @@ function updateChecked(checked: boolean, value: bigint) {
           :label="perm?.label"
           :hint="perm?.hint"
           :name="perm.key"
-          :disabled="isSystem || (role.permissions & PROJECT_PERMS.MANAGE && perm.key !== 'MANAGE')"
-          @update:model-value="(checked: boolean) => updateChecked(checked, PROJECT_PERMS[perm.key])"
+          :disabled="
+            isSystem
+              || (role.permissions & PROJECT_PERMS.MANAGE && perm.key !== 'MANAGE')
+          "
+          @update:model-value="
+            (checked: boolean) =>
+              updateChecked(checked, PROJECT_PERMS[perm.key])
+          "
         />
       </div>
       <DsfrButton
@@ -118,15 +129,11 @@ function updateChecked(checked: boolean, value: bigint) {
         @click="$emit('delete')"
       />
     </DsfrTabContent>
-    <DsfrTabContent
-      panel-id="members"
-      tab-id="members"
-    >
-      <template
-        v-if="props.isEveryone"
-      >
+    <DsfrTabContent panel-id="members" tab-id="members">
+      <template v-if="props.isEveryone">
         <DsfrNotice
           class="mb-5"
+          style="width: fit-content"
           title="Le rôle par défaut 'Tout le monde' inclut tous les utilisateurs de l'équipe"
         />
         <DsfrCheckbox
@@ -141,9 +148,7 @@ function updateChecked(checked: boolean, value: bigint) {
           :model-value="true"
         />
       </template>
-      <template
-        v-else
-      >
+      <template v-else>
         <DsfrCheckbox
           v-for="member in role.allMembers"
           :id="`${member.userId}-cbx`"
@@ -153,25 +158,29 @@ function updateChecked(checked: boolean, value: bigint) {
           :label="`${member.lastName} ${member.firstName}`"
           :hint="member.email"
           :model-value="member.roleIds.includes(role.id)"
-          @update:model-value="(checked: boolean) => $emit('updateMemberRoles', checked, member.userId)"
+          @update:model-value="
+            (checked: boolean) =>
+              $emit('updateMemberRoles', checked, member.userId)
+          "
         />
       </template>
-      <template
-        v-if="!role.allMembers.length"
-      >
-        <div>
-          Vous n'avez pas d'utilisateur dans votre projet
-        </div>
+      <template v-if="!role.allMembers.length">
+        <div>Vous n'avez pas d'utilisateur dans votre projet</div>
         <DsfrButton
           label="Gérer l'équipe"
           class="mt-5"
-          @click="router.push({ name: 'Team' })"
+          @click="
+            router.push({
+              name: 'Project',
+              query: { tab: 'team' },
+              replace: true,
+              force: true,
+            })
+          "
         />
       </template>
     </DsfrTabContent>
-    <div
-      class="ms-8"
-    >
+    <div class="ms-8">
       <DsfrTabContent
         panel-id="close"
         tab-id="close"
diff --git a/apps/client/src/views/ProjectDashboard.vue b/apps/client/src/views/ProjectDashboard.vue
index 5b348887a..d411ed7e7 100644
--- a/apps/client/src/views/ProjectDashboard.vue
+++ b/apps/client/src/views/ProjectDashboard.vue
@@ -13,14 +13,17 @@ import { useUserStore } from '@/stores/user.js'
 import { useZoneStore } from '@/stores/zone.js'
 import { getRandomId } from '@/utils/func.js'
 
-const props = withDefaults(defineProps<{
-  projectSlug: ProjectV2['slug']
-  parentRoute: string
-  asProfile: 'user' | 'admin'
-  tab?: DashboardPanelTabs
-}>(), {
-  tab: 'resources',
-})
+const props = withDefaults(
+  defineProps<{
+    projectSlug: ProjectV2['slug']
+    parentRoute: string
+    asProfile: 'user' | 'admin'
+    tab?: DashboardPanelTabs
+  }>(),
+  {
+    tab: 'resources',
+  },
+)
 
 const projectStore = useProjectStore()
 const zoneStore = useZoneStore()
@@ -51,16 +54,63 @@ onBeforeMount(async () => {
 
 const tabListName = 'Liste d’onglet'
 
-type DashboardPanelTabs = 'resources' | 'services' | 'team' | 'roles' | 'logs' | 'clusters' | 'configuration'
-interface TabTitle { title: string, icon: `${string}:${string}`, tabId: `tab-${DashboardPanelTabs}`, panelId: `panel-${DashboardPanelTabs}` }
+type DashboardPanelTabs
+  = | 'resources'
+    | 'services'
+    | 'team'
+    | 'roles'
+    | 'logs'
+    | 'clusters'
+    | 'configuration'
+interface TabTitle {
+  title: string
+  icon: `${string}:${string}`
+  tabId: `tab-${DashboardPanelTabs}`
+  panelId: `panel-${DashboardPanelTabs}`
+}
 
-const resourcesTitle: TabTitle = { title: 'Ressources', icon: 'ri:shapes-line', tabId: 'tab-resources', panelId: 'panel-resources' }
-const servicesTitle: TabTitle = { title: 'Services externes', icon: 'ri:flow-chart', tabId: 'tab-services', panelId: 'panel-services' }
-const teamTitle: TabTitle = { title: 'Équipe', icon: 'ri:team-line', tabId: 'tab-team', panelId: 'panel-team' }
-const rolesTitle: TabTitle = { title: 'Rôles', icon: 'ri:admin-line', tabId: 'tab-roles', panelId: 'panel-roles' }
-const logsTitle: TabTitle = { title: 'Journaux', icon: 'ri:newspaper-line', tabId: 'tab-logs', panelId: 'panel-logs' }
-const clustersTitle: TabTitle = { title: 'Clusters', icon: 'ri:server-line', tabId: 'tab-clusters', panelId: 'panel-clusters' }
-const configurationTitle: TabTitle = { title: 'Configuration', icon: 'ri:settings-5-line', tabId: 'tab-configuration', panelId: 'panel-configuration' }
+const resourcesTitle: TabTitle = {
+  title: 'Ressources',
+  icon: 'ri:shapes-line',
+  tabId: 'tab-resources',
+  panelId: 'panel-resources',
+}
+const servicesTitle: TabTitle = {
+  title: 'Services externes',
+  icon: 'ri:flow-chart',
+  tabId: 'tab-services',
+  panelId: 'panel-services',
+}
+const teamTitle: TabTitle = {
+  title: 'Équipe',
+  icon: 'ri:team-line',
+  tabId: 'tab-team',
+  panelId: 'panel-team',
+}
+const rolesTitle: TabTitle = {
+  title: 'Rôles',
+  icon: 'ri:admin-line',
+  tabId: 'tab-roles',
+  panelId: 'panel-roles',
+}
+const logsTitle: TabTitle = {
+  title: 'Journaux',
+  icon: 'ri:newspaper-line',
+  tabId: 'tab-logs',
+  panelId: 'panel-logs',
+}
+const clustersTitle: TabTitle = {
+  title: 'Clusters',
+  icon: 'ri:server-line',
+  tabId: 'tab-clusters',
+  panelId: 'panel-clusters',
+}
+const configurationTitle: TabTitle = {
+  title: 'Configuration',
+  icon: 'ri:settings-5-line',
+  tabId: 'tab-configuration',
+  panelId: 'panel-configuration',
+}
 const tabTitles: TabTitle[] = [
   resourcesTitle,
   servicesTitle,
@@ -71,10 +121,20 @@ const tabTitles: TabTitle[] = [
   configurationTitle,
 ]
 
-const activeTab = ref(Math.max(tabTitles.findIndex(tab => `tab-${router.currentRoute.value.query?.tab}` === tab.tabId), 0))
+function findTab() {
+  return Math.max(
+    tabTitles.findIndex(
+      tab => `tab-${router.currentRoute.value.query?.tab}` === tab.tabId,
+    ),
+    0,
+  )
+}
+
+const activeTab = ref(findTab())
 const saveProjectState = ref({
   isProcessing: false,
 })
+const currentRoute = useRoute()
 
 async function refreshMembers() {
   await project.value.Members.list()
@@ -88,6 +148,10 @@ async function leaveProject() {
   await refreshMembers()
 }
 
+watch(currentRoute, () => {
+  activeTab.value = findTab()
+})
+
 watch(activeTab, (tabIndex) => {
   const tabId = tabTitles[tabIndex].tabId
   if (tabId) {
@@ -117,9 +181,7 @@ async function saveProject() {
 </script>
 
 <template>
-  <div
-    class="w-full flex gap-4 justify-end fr-mb-1w"
-  >
+  <div class="w-full flex gap-4 justify-end fr-mb-1w">
     <DsfrButton
       v-if="project"
       title="Revenir à la liste des projets"
@@ -135,15 +197,33 @@ async function saveProject() {
       <ProjectBanner
         :model-value="project.description"
         :project="project"
-        :can-edit-description="asProfile === 'user' && ProjectAuthorized.Manage({ projectPermissions: project.myPerms })"
-        @update:model-value="(desc: string | undefined) => { project.description = desc }"
+        :can-edit-description="
+          asProfile === 'user'
+            && ProjectAuthorized.Manage({ projectPermissions: project.myPerms })
+        "
+        @update:model-value="
+          (desc: string | undefined) => {
+            project.description = desc;
+          }
+        "
         @save-description="saveProject"
       />
       <ProjectAction
         :project="project"
-        :hide-replay="asProfile === 'user' && !ProjectAuthorized.ReplayHooks({ projectPermissions: project.myPerms })"
-        :hide-archive="asProfile === 'user' && !ProjectAuthorized.Manage({ projectPermissions: project.myPerms })"
-        :hide-secrets="asProfile === 'user' && !ProjectAuthorized.SeeSecrets({ projectPermissions: project.myPerms })"
+        :hide-replay="
+          asProfile === 'user'
+            && !ProjectAuthorized.ReplayHooks({
+              projectPermissions: project.myPerms,
+            })
+        "
+        :hide-archive="
+          asProfile === 'user'
+            && !ProjectAuthorized.Manage({ projectPermissions: project.myPerms })
+        "
+        :hide-secrets="
+          asProfile === 'user'
+            && !ProjectAuthorized.SeeSecrets({ projectPermissions: project.myPerms })
+        "
         :hide-lock="asProfile === 'user'"
         class="px-4"
         @archive="archive"
@@ -175,21 +255,29 @@ async function saveProject() {
             :project="project"
             :permission-target="asProfile"
             :display-global="asProfile !== 'admin'"
-            :disabled="asProfile === 'user' && !ProjectAuthorized.Manage({ projectPermissions: project.myPerms })"
+            :disabled="
+              asProfile === 'user'
+                && !ProjectAuthorized.Manage({ projectPermissions: project.myPerms })
+            "
           />
         </DsfrTabContent>
 
-        <DsfrTabContent
-          :panel-id="teamTitle.panelId"
-          :tab-id="teamTitle.tabId"
-        >
+        <DsfrTabContent :panel-id="teamTitle.panelId" :tab-id="teamTitle.tabId">
           <TeamCt
             :key="project.id + teamId"
             :user-profile="userStore.userProfile"
             :project="project"
             :members="project.members"
-            :can-manage="asProfile === 'admin' || ProjectAuthorized.ManageMembers({ projectPermissions: project.myPerms })"
-            :can-transfer="asProfile === 'admin' || project.ownerId === userStore.userProfile?.id"
+            :can-manage="
+              asProfile === 'admin'
+                || ProjectAuthorized.ManageMembers({
+                  projectPermissions: project.myPerms,
+                })
+            "
+            :can-transfer="
+              asProfile === 'admin'
+                || project.ownerId === userStore.userProfile?.id
+            "
             @refresh="refreshMembers"
             @leave="leaveProject"
             @transfer="unSelectProject"
@@ -202,26 +290,22 @@ async function saveProject() {
         >
           <div>
             <template
-              v-if="asProfile === 'admin' || ProjectAuthorized.ManageRoles({ projectPermissions: project.myPerms })"
+              v-if="
+                asProfile === 'admin'
+                  || ProjectAuthorized.ManageRoles({
+                    projectPermissions: project.myPerms,
+                  })
+              "
             >
-              <ProjectRoles
-                :key="project.id"
-                :project="project"
-              />
+              <ProjectRoles :key="project.id" :project="project" />
             </template>
-            <p
-              v-else
-              data-testid="insuficientPermsRoles"
-            >
+            <p v-else data-testid="insuficientPermsRoles">
               Vous n'avez pas les permissions pour afficher ces ressources
             </p>
           </div>
         </DsfrTabContent>
 
-        <DsfrTabContent
-          :panel-id="logsTitle.panelId"
-          :tab-id="logsTitle.tabId"
-        >
+        <DsfrTabContent :panel-id="logsTitle.panelId" :tab-id="logsTitle.tabId">
           <ProjectLogsViewer
             :key="project.id"
             :project="project"
@@ -232,10 +316,7 @@ async function saveProject() {
           :panel-id="clustersTitle.panelId"
           :tab-id="clustersTitle.tabId"
         >
-          <ProjectClustersInfos
-            :key="project.id"
-            :project="project"
-          />
+          <ProjectClustersInfos :key="project.id" :project="project" />
         </DsfrTabContent>
         <DsfrTabContent
           :panel-id="configurationTitle.panelId"
@@ -248,16 +329,16 @@ async function saveProject() {
             primary
             class="fr-mt-2w"
             :disabled="saveProjectState.isProcessing"
-            :icon="saveProjectState.isProcessing
-              ? { name: 'ri:refresh-line', animation: 'spin' }
-              : 'ri:send-plane-line'"
+            :icon="
+              saveProjectState.isProcessing
+                ? { name: 'ri:refresh-line', animation: 'spin' }
+                : 'ri:send-plane-line'
+            "
             @click="saveProject()"
           />
         </DsfrTabContent>
       </DsfrTabs>
-      <OperationPanel
-        :project="project"
-      />
+      <OperationPanel :project="project" />
     </div>
   </template>
 </template>