From 7d609c808562a7859d03cb7d811fe1090bfceacd Mon Sep 17 00:00:00 2001
From: Gaelle <gaelle@bimdata.io>
Date: Thu, 21 May 2026 17:51:40 +0200
Subject: [PATCH] test feature naming template

---
 .../files/files-manager/FilesManager.vue      |  83 +++-
 .../FilesManagerActions.vue                   |  28 +-
 .../GedFileUpload.integration.vue             | 172 +++++++
 .../NamingConventionPanel.vue                 | 449 +++++++++++++++++
 .../files-naming-template/NamingRulesList.vue | 405 ++++++++++++++++
 .../NamingSegmentRow.vue                      | 273 +++++++++++
 .../files-naming-template/NamingTemplate.vue  | 158 ++++++
 .../NamingViolationBanner.vue                 | 315 ++++++++++++
 .../NamingViolationModal.vue                  | 458 ++++++++++++++++++
 .../files-naming-template/SPEC.md             | 214 ++++++++
 .../namingConventionService.js                | 256 ++++++++++
 .../namingConventionService.test.js           | 250 ++++++++++
 .../namingConventionStore.js                  | 216 +++++++++
 .../useNamingConvention.js                    | 183 +++++++
 .../file-actions-cell/FileActionsCell.vue     |  81 ++--
 .../files/folder-table/FoldersTable.vue       |   2 +
 src/i18n/lang/fr.json                         |   6 +-
 17 files changed, 3495 insertions(+), 54 deletions(-)
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/GedFileUpload.integration.vue
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/NamingConventionPanel.vue
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/NamingRulesList.vue
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/NamingSegmentRow.vue
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/NamingTemplate.vue
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/NamingViolationBanner.vue
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/NamingViolationModal.vue
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/SPEC.md
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/namingConventionService.js
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/namingConventionService.test.js
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/namingConventionStore.js
 create mode 100644 src/components/specific/files/files-manager/files-naming-template/useNamingConvention.js

diff --git a/src/components/specific/files/files-manager/FilesManager.vue b/src/components/specific/files/files-manager/FilesManager.vue
index d92904645..186e2dca1 100644
--- a/src/components/specific/files/files-manager/FilesManager.vue
+++ b/src/components/specific/files/files-manager/FilesManager.vue
@@ -11,6 +11,7 @@
         :initialSearchText="searchText"
         @update:searchText="searchText = $event"
         @upload-files="uploadFiles"
+        @open-naming-template="openNamingTemplateManager"
       />
       <div class="files-manager__content">
         <transition name="slide-fade-left">
@@ -90,6 +91,7 @@
             @manage-access="openAccessManager"
             @open-tag-manager="openTagManager"
             @open-versioning-manager="openVersioningManager"
+            @open-naming-template="openNamingTemplateManager"
             @open-visa-manager="openVisaManager"
             @remove-model="removeModel"
             @row-drop="({ event, data }) => uploadFiles(event, data)"
@@ -143,6 +145,24 @@
             :folder="folderToManage"
             @close="closeSidePanel"
           />
+          <NamingTemplate
+            v-else-if="showNamingTemplateManager"
+            :cloudPk="currentSpace.id"
+            :projectPk="project.id"
+            :currentFolder="folderToManage"
+            @close="closeNamingTemplateManager"
+            @file-uploaded="$emit('upload-files', $event)"
+          />
+          <!-- <NamingRulesList
+            v-else-if="showNamingTemplateManager"
+            :rules="rules"
+            :currentFolder="currentFolder"
+            :projectPk="projectPk"
+            @assignment-saved="onAssignmentSaved"
+            @create="panelMode = 'create'"
+            @edit="startEditRule"
+            @close="closeNamingTemplateManager"
+          /> -->
           <VisaMain
             v-else-if="showVisaManager"
             :project="project"
@@ -230,9 +250,14 @@ import SubscriptionModal from "../../subscriptions/subscription-modal/Subscripti
 import TagsMain from "../../tags/tags-main/TagsMain.vue";
 import VersioningMain from "../../versioning/versioning-main/VersioningMain.vue";
 import VisaMain from "../../visa/visa-main/VisaMain.vue";
+
+import NamingTemplate from "./files-naming-template/NamingTemplate.vue";
+import NamingRulesList from "./files-naming-template/NamingRulesList.vue";
 import VisasDeleteModal from "./visas-delete-modal/VisasDeleteModal.vue";
 import VisasTable from "../visas-table/VisasTable.vue";
 
+import { useNamingConventionStore } from "./files-naming-template/namingConventionStore.js";
+
 export default {
   components: {
     AllFilesTable,
@@ -250,6 +275,8 @@ export default {
     VisaMain,
     VisasTable,
     VisasDeleteModal,
+    NamingTemplate,
+    NamingRulesList,
   },
   props: {
     spaceSubInfo: {
@@ -273,6 +300,23 @@ export default {
     const { currentSpace } = useSpaces();
     const { openModal, closeModal } = useAppModal();
 
+    const cloudPk = props.project.cloud.id;
+    const projectPk = props.project.id;
+    const panelMode = ref("list"); // 'list' | 'create' | 'edit'
+
+    const store = useNamingConventionStore();
+    const { rules } = store;
+    store.fetchRules(cloudPk.value, projectPk.value);
+
+    function startEditRule(rule) {
+      editingRule.value = rule;
+      panelMode.value = "edit";
+    }
+
+    function onAssignmentSaved(rule) {
+      console.log("Assignment saved:", rule);
+    }
+
     const { spaceProjects } = useProjects();
     const { gedFilesTab, gedTargetFolder } = useSession();
 
@@ -301,7 +345,7 @@ export default {
           if (selectedFileTab.value.id === "folders") {
             // WARNING displayedRows is name from DS, may change
             const folderFiles = filesTable.value.filesTable.displayedRows.map((row) => row.data);
-            documentList = folderFiles.filter(f => !isFolder(f));
+            documentList = folderFiles.filter((f) => !isFolder(f));
           }
           if (selectedFileTab.value.id === "files") {
             documentList = filesTable.value.displayedListFiles;
@@ -498,11 +542,13 @@ export default {
     const showVersioningManager = ref(false);
     const showVisaManager = ref(false);
     const showTagManager = ref(false);
+    const showNamingTemplateManager = ref(false);
     const managers = {
       visa: showVisaManager,
       versioning: showVersioningManager,
       access: showAccessManager,
       tag: showTagManager,
+      namingTemplate: showNamingTemplateManager,
     };
     const setManagerVisibility = (manager, value) => {
       Object.values(managers).forEach((ref) => (ref.value = false));
@@ -567,6 +613,33 @@ export default {
       }, 100);
     };
 
+    const openNamingTemplateManager = (folder) => {
+      folderToManage.value = folder;
+      setManagerVisibility("namingTemplate", true);
+      console.log("Opening naming template manager for folder:", folder);
+      console.log(folderToManage.value);
+      openSidePanel();
+      stopCurrentFilesWatcher = watch(
+        () => currentFiles.value,
+        (files) => {
+          const newFolder = files.find((file) => file.id === folder.id);
+          if (newFolder) {
+            folderToManage.value = newFolder;
+          } else {
+            closeNamingTemplateManager();
+          }
+        },
+      );
+    };
+    const closeNamingTemplateManager = () => {
+      stopCurrentFilesWatcher();
+      closeSidePanel();
+      setTimeout(() => {
+        showNamingTemplateManager.value = false;
+        folderToManage.value = null;
+      }, 100);
+    };
+
     const openTagManager = (file) => {
       openSidePanel();
       if (file.file_name) {
@@ -575,6 +648,7 @@ export default {
         showAccessManager.value = false;
         showVisaManager.value = false;
         showVersioningManager.value = false;
+        showNamingTemplateManager.value = false;
       }
     };
     const closeTagManager = () => {
@@ -806,7 +880,10 @@ export default {
       searchText,
       selectedFileTab,
       selection,
+      rules,
+      projectPk,
       showAccessManager,
+      showNamingTemplateManager,
       showDeleteModal,
       showTagManager,
       showVersioningManager,
@@ -816,6 +893,7 @@ export default {
       closeAccessManager,
       closeDeleteModal,
       closeSidePanel,
+      closeNamingTemplateManager,
       closeTagManager,
       closeVersioningManager,
       closeVisaManager,
@@ -829,6 +907,8 @@ export default {
       goVisasView,
       isFullTotal,
       moveFiles,
+      onAssignmentSaved,
+      startEditRule,
       onFileSelected,
       openAccessManager,
       openFileDeleteModal,
@@ -838,6 +918,7 @@ export default {
       onTabChange,
       openTagManager,
       openVersioningManager,
+      openNamingTemplateManager,
       openVisaManager,
       removeModel,
       removeModels,
diff --git a/src/components/specific/files/files-manager/files-manager-actions/FilesManagerActions.vue b/src/components/specific/files/files-manager/files-manager-actions/FilesManagerActions.vue
index f2228ba58..888cd01d2 100644
--- a/src/components/specific/files/files-manager/files-manager-actions/FilesManagerActions.vue
+++ b/src/components/specific/files/files-manager/files-manager-actions/FilesManagerActions.vue
@@ -16,6 +16,7 @@
           </template>
         </BIMDataDropdownMenu>
       </template>
+
       <FolderCreationButton
         data-guide="btn-new-folder"
         class="files-manager__actions__btn-new-folder"
@@ -42,7 +43,7 @@
           $t(
             `ProjectOverview.uploadDisableMessage.${
               isFullTotal(spaceSubInfo) ? 'size' : 'permission'
-            }`
+            }`,
           )
         "
       >
@@ -157,7 +158,7 @@ export default {
       required: true,
     },
   },
-  emits: ["open-subscription-modal", "update:searchText", "upload-files"],
+  emits: ["open-subscription-modal", "update:searchText", "upload-files", "open-naming-template"],
   setup(props, { emit }) {
     const { t } = useI18n();
     const { isUserOrga, isProjectAdmin, isProjectGuest, hasAdminPerm } = useUser();
@@ -165,11 +166,7 @@ export default {
 
     const shouldSubscribe = inject("shouldSubscribe");
 
-
-    const {
-      downloadFiles: download,
-      projectFileStructure,
-    } = useFiles();
+    const { downloadFiles: download, projectFileStructure } = useFiles();
 
     const downloadFiles = async (files) => {
       await download(props.project, files);
@@ -188,7 +185,14 @@ export default {
           {
             name: t("FilesManager.gedDownload"),
             action: () => downloadFiles([projectFileStructure.value]),
-          }
+          },
+          {
+            name: t("FilesManager.namingConvention"),
+            action: () => {
+              emit("open-naming-template", props.currentFolder);
+              dropdown.value.displayed = false;
+            },
+          },
         );
       }
 
@@ -228,17 +232,17 @@ export default {
     const isLargeLayout = computed(
       () =>
         (isProjectAdmin(props.project) && !isXXXL.value) ||
-        (!isProjectAdmin(props.project) && !isMidXXL.value)
+        (!isProjectAdmin(props.project) && !isMidXXL.value),
     );
     const isMediumLayout = computed(
       () =>
         (isProjectAdmin(props.project) && !isXL.value && isXXXL.value) ||
-        (!isProjectAdmin(props.project) && !isMD.value && isMidXXL.value)
+        (!isProjectAdmin(props.project) && !isMD.value && isMidXXL.value),
     );
 
-    const searchText = ref(props.initialSearchText || '');
+    const searchText = ref(props.initialSearchText || "");
     watch(searchText, (newValue) => {
-      emit('update:searchText', newValue);
+      emit("update:searchText", newValue);
     });
 
     return {
diff --git a/src/components/specific/files/files-manager/files-naming-template/GedFileUpload.integration.vue b/src/components/specific/files/files-manager/files-naming-template/GedFileUpload.integration.vue
new file mode 100644
index 000000000..074e50747
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/GedFileUpload.integration.vue
@@ -0,0 +1,172 @@
+<!-- 
+  GedFileUpload.vue — Integration example
+  Shows how to wire naming convention check into the existing upload flow.
+  
+  This is NOT a full replacement of your existing upload component.
+  Copy the relevant sections into your actual GedView or FileUpload component.
+-->
+<template>
+  <div class="ged-upload-example">
+    <!-- ① Soft-mode banner (non-blocking) -->
+    <NamingViolationBanner
+      v-if="showBanner"
+      :violations="violations"
+      @dismiss="onBannerDismiss"
+      @apply-renames="onBannerApplyRenames"
+      @rename="handleSoftRename"
+    />
+
+    <!-- ② Your existing upload trigger (unchanged) -->
+    <!-- <BIMDataButton @click="triggerUpload">
+      <BIMDataIcon name="upload" />
+      Charger un fichier
+    </BIMDataButton>
+    <input ref="fileInput" type="file" multiple hidden @change="onFilesSelected" /> -->
+
+    <!-- ③ Strict-mode blocking modal -->
+    <NamingViolationModal
+      v-if="showModal"
+      :violations="strictViolations"
+      @confirm="onModalConfirm"
+      @cancel="onModalCancel"
+    />
+
+    <!-- ④ Naming convention panel (side panel) -->
+    <div v-if="showNamingPanel" class="naming-side-panel" style="position: absolute; z-index: 10">
+      <!-- Toggle between list and create/edit -->
+      <NamingConventionPanel
+        v-if="panelMode === 'create' || panelMode === 'edit'"
+        :editing-rule="editingRule"
+        :cloud-pk="cloudPk"
+        :project-pk="projectPk"
+        @close="closeNamingPanel"
+        @saved="onRuleSaved"
+        @go-back="panelMode = 'list'"
+      />
+      <NamingRulesList
+        v-else
+        :rules="rules"
+        :current-folder="currentFolder"
+        :project-pk="projectPk"
+        @close="closeNamingPanel"
+        @create="panelMode = 'create'"
+        @edit="startEditRule"
+        @assignment-saved="onAssignmentSaved"
+      />
+    </div>
+
+    <!-- ⑤ Trigger for naming panel (place this in your GED toolbar) -->
+    <BIMDataButton ghost @click="showNamingPanel = !showNamingPanel">
+      <BIMDataIcon name="convention" />
+      Gestion des conventions de nommage
+    </BIMDataButton>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useNamingConventionStore } from "./namingConventionStore.js";
+import { useNamingConvention } from "./useNamingConvention.js";
+import NamingViolationBanner from "./NamingViolationBanner.vue";
+import NamingViolationModal from "./NamingViolationModal.vue";
+import NamingConventionPanel from "./NamingConventionPanel.vue";
+import NamingRulesList from "./NamingRulesList.vue";
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+const props = defineProps({
+  cloudPk: { type: [String, Number], required: true },
+  projectPk: { type: [String, Number], required: true },
+  currentFolder: { type: Object, default: null },
+});
+
+// ─── Store ────────────────────────────────────────────────────────────────────
+
+const store = useNamingConventionStore();
+const { rules } = store;
+
+// Load rules on mount
+store.fetchRules(props.cloudPk, props.projectPk);
+
+// ─── Naming convention hook ───────────────────────────────────────────────────
+
+const {
+  violations,
+  strictViolations,
+  showBanner,
+  showModal,
+  checkBeforeUpload,
+  onModalConfirm,
+  onModalCancel,
+  onBannerDismiss,
+  onBannerApplyRenames,
+} = useNamingConvention(() => props.currentFolder);
+
+// ─── Upload flow ──────────────────────────────────────────────────────────────
+
+const fileInput = ref(null);
+
+function triggerUpload() {
+  fileInput.value?.click();
+}
+
+async function onFilesSelected(event) {
+  const files = Array.from(event.target.files);
+  if (!files.length) return;
+
+  try {
+    // ← This is the key integration point
+    const { files: finalFiles } = await checkBeforeUpload(files);
+    // Proceed with your actual upload logic here
+    await uploadFiles(finalFiles);
+  } catch {
+    // User cancelled (strict modal)
+    console.log("Upload cancelled");
+  } finally {
+    // Reset input so same files can be re-selected
+    event.target.value = "";
+  }
+}
+
+async function uploadFiles(files) {
+  // Your existing upload implementation
+  // e.g.: await gedStore.uploadDocuments(props.currentFolder.id, files);
+  console.log(
+    "Uploading files:",
+    files.map((f) => f.name),
+  );
+}
+
+function handleSoftRename({ item, newName }) {
+  // Call API to rename the already-uploaded file
+  // e.g.: await gedStore.renameDocument(item.file.id, newName);
+  console.log("Soft rename:", item.file.name, "→", newName);
+}
+
+// ─── Naming panel ─────────────────────────────────────────────────────────────
+
+const showNamingPanel = ref(false);
+const panelMode = ref("list"); // 'list' | 'create' | 'edit'
+const editingRule = ref(null);
+
+function closeNamingPanel() {
+  showNamingPanel.value = false;
+  panelMode.value = "list";
+  editingRule.value = null;
+}
+
+function startEditRule(rule) {
+  editingRule.value = rule;
+  panelMode.value = "edit";
+}
+
+function onRuleSaved(rule) {
+  console.log("Rule saved:", rule);
+  panelMode.value = "list";
+  editingRule.value = null;
+}
+
+function onAssignmentSaved(rule) {
+  console.log("Assignment saved:", rule);
+}
+</script>
diff --git a/src/components/specific/files/files-manager/files-naming-template/NamingConventionPanel.vue b/src/components/specific/files/files-manager/files-naming-template/NamingConventionPanel.vue
new file mode 100644
index 000000000..da2c3d5cc
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/NamingConventionPanel.vue
@@ -0,0 +1,449 @@
+<template>
+  <div class="naming-panel">
+    <!-- Header -->
+    <div class="naming-panel__header">
+      <BIMDataButton @click="$emit('go-back')">
+        <BIMDataIcon name="arrow" size="xs" />
+      </BIMDataButton>
+      <span>{{ editingRule ? "Modifier la règle" : "Convention de nommage" }}</span>
+      <button class="naming-panel__close" @click="$emit('close')">
+        <BIMDataIcon name="close" size="xs" />
+      </button>
+    </div>
+
+    <div class="naming-panel__body">
+      <!-- ① Nom de la règle -->
+      <section class="naming-panel__section">
+        <div class="naming-panel__step">
+          <span class="naming-panel__step-num">1</span>
+          <span class="naming-panel__step-label">Nom de la règle</span>
+        </div>
+        <BIMDataInput v-model="form.name" placeholder="Nom" :error="errors.name" />
+      </section>
+
+      <!-- ② Type de séparateur -->
+      <section class="naming-panel__section">
+        <div class="naming-panel__step">
+          <span class="naming-panel__step-num">2</span>
+          <span class="naming-panel__step-label">Type de séparateur</span>
+        </div>
+        <div class="naming-panel__separators">
+          <label
+            v-for="sep in SEPARATOR_TYPES"
+            :key="sep.value"
+            class="naming-panel__sep-option"
+            :class="{ active: form.separator === sep.value }"
+          >
+            <input type="radio" :value="sep.value" v-model="form.separator" hidden />
+            {{ sep.label }}
+          </label>
+        </div>
+      </section>
+
+      <!-- ③ Structure de la règle -->
+      <section class="naming-panel__section">
+        <div class="naming-panel__step">
+          <span class="naming-panel__step-num">3</span>
+          <span class="naming-panel__step-label">Structure de la règle</span>
+        </div>
+
+        <!-- Live preview -->
+        <div v-if="livePattern" class="naming-panel__preview">
+          <span>Aperçu&nbsp;:</span>
+          <code>{{ livePattern }}</code>
+        </div>
+
+        <!-- Segment list -->
+        <div class="naming-panel__segments">
+          <NamingSegmentRow
+            v-for="(seg, idx) in form.segments"
+            :key="seg._id"
+            :segment="seg"
+            :index="idx"
+            :separator="form.separator"
+            :custom-lists="customLists"
+            @update="updateSegment(idx, $event)"
+            @remove="removeSegment(idx)"
+            @move-up="moveSegment(idx, -1)"
+            @move-down="moveSegment(idx, 1)"
+          />
+        </div>
+
+        <!-- Add segment buttons -->
+        <div class="naming-panel__add-btns">
+          <button class="btn-add-seg" @click="addSegment('n_chars')">+ N caractères</button>
+          <button class="btn-add-seg" @click="addSegment('bounded')">+ Valeurs bornées</button>
+          <button class="btn-add-seg" @click="addSegment('list')">+ Liste</button>
+        </div>
+      </section>
+
+      <!-- Mode stricte / souple -->
+      <section class="naming-panel__section naming-panel__section--mode">
+        <div class="naming-panel__mode-toggle">
+          <label class="naming-panel__checkbox-label">
+            <BIMDataCheckbox v-model="isStrict" />
+            <span>Règle stricte</span>
+          </label>
+          <p class="naming-panel__mode-hint">
+            <template v-if="isStrict">
+              Les fichiers dont le nom ne correspond pas à cette règle seront bloqués à l'import.
+              L'utilisateur devra les renommer avant de valider.
+            </template>
+            <template v-else>
+              Si vous cochez cette case, vous devrez changer le nom de l'intégralité des fichiers
+              qui ne correspondent pas à cette nouvelle règle.
+            </template>
+          </p>
+        </div>
+
+        <!-- Recursive option -->
+        <label class="naming-panel__checkbox-label naming-panel__checkbox-label--sub">
+          <BIMDataCheckbox v-model="form.recursive" />
+          <span>Règle récursive</span>
+        </label>
+        <p class="naming-panel__mode-hint naming-panel__mode-hint--sub">
+          Si vous cochez cette case, cette règle s'appliquera également aux fichiers contenus dans
+          les sous-dossiers de votre dossier principal.
+        </p>
+      </section>
+    </div>
+
+    <!-- Footer -->
+    <div class="naming-panel__footer">
+      <BIMDataButton ghost color="secondary" @click="$emit('close')"> Annuler </BIMDataButton>
+      <BIMDataButton fill color="primary" :loading="saving" :disabled="!isFormValid" @click="save">
+        <BIMDataIcon name="save" size="xs" />
+        Enregistrer la règle
+      </BIMDataButton>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { useNamingConventionStore } from "./namingConventionStore.js";
+import {
+  SEPARATOR_TYPES,
+  SEGMENT_TYPES,
+  RULE_MODES,
+  buildHumanReadablePattern,
+} from "./namingConventionService.js";
+import NamingSegmentRow from "./NamingSegmentRow.vue";
+
+// ─── Props / Emits ────────────────────────────────────────────────────────────
+
+const props = defineProps({
+  editingRule: { type: Object, default: null },
+  cloudPk: { type: [String, Number], required: true },
+  projectPk: { type: [String, Number], required: true },
+});
+
+const emit = defineEmits(["close", "saved", "go-back"]);
+
+// ─── Store ────────────────────────────────────────────────────────────────────
+
+const store = useNamingConventionStore();
+const { customLists } = store;
+
+// ─── Form State ───────────────────────────────────────────────────────────────
+
+const defaultForm = () => ({
+  name: "",
+  separator: "-",
+  segments: [],
+  recursive: false,
+  folder_ids: [],
+});
+
+const form = ref(defaultForm());
+const isStrict = ref(false);
+const saving = ref(false);
+const errors = ref({});
+
+// Populate form when editing
+watch(
+  () => props.editingRule,
+  (rule) => {
+    if (rule) {
+      form.value = {
+        ...defaultForm(),
+        ...rule,
+        segments: (rule.segments || []).map((s) => ({ ...s, _id: s._id || uid() })),
+      };
+      isStrict.value = rule.mode === RULE_MODES.STRICT;
+    } else {
+      form.value = defaultForm();
+      isStrict.value = false;
+    }
+  },
+  { immediate: true },
+);
+
+// ─── Computed ─────────────────────────────────────────────────────────────────
+
+const livePattern = computed(() => {
+  if (!form.value.segments.length) return "";
+  try {
+    return buildHumanReadablePattern(form.value);
+  } catch {
+    return "";
+  }
+});
+
+const isFormValid = computed(() => form.value.name.trim() !== "" && form.value.segments.length > 0);
+
+// ─── Segment Management ───────────────────────────────────────────────────────
+
+function addSegment(type) {
+  const seg = {
+    _id: uid(),
+    type,
+    config: getDefaultConfig(type),
+  };
+  form.value.segments.push(seg);
+}
+
+function getDefaultConfig(type) {
+  switch (type) {
+    case SEGMENT_TYPES.N_CHARS:
+      return { min: null, max: null };
+    case SEGMENT_TYPES.BOUNDED:
+      return { min: 1, max: 50 };
+    case SEGMENT_TYPES.LIST:
+      return { listId: null, values: [] };
+    default:
+      return {};
+  }
+}
+
+function updateSegment(idx, data) {
+  form.value.segments[idx] = { ...form.value.segments[idx], ...data };
+}
+
+function removeSegment(idx) {
+  form.value.segments.splice(idx, 1);
+}
+
+function moveSegment(idx, dir) {
+  const target = idx + dir;
+  if (target < 0 || target >= form.value.segments.length) return;
+  const segs = [...form.value.segments];
+  [segs[idx], segs[target]] = [segs[target], segs[idx]];
+  form.value.segments = segs;
+}
+
+// ─── Save ─────────────────────────────────────────────────────────────────────
+
+async function save() {
+  errors.value = {};
+  if (!form.value.name.trim()) {
+    errors.value.name = "Le nom est requis";
+    return;
+  }
+
+  saving.value = true;
+  try {
+    const payload = {
+      ...form.value,
+      id: props.editingRule?.id,
+      mode: isStrict.value ? RULE_MODES.STRICT : RULE_MODES.SOFT,
+    };
+    const saved = await store.saveRule(props.cloudPk, props.projectPk, payload);
+    emit("saved", saved);
+  } finally {
+    saving.value = false;
+  }
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+let _uidCounter = 0;
+function uid() {
+  return `seg_${++_uidCounter}_${Date.now()}`;
+}
+</script>
+
+<style lang="scss" scoped>
+.naming-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--color-white);
+  font-size: var(--font-size-s);
+
+  &__header {
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-unit);
+    font-weight: 600;
+    font-size: var(--font-size-m);
+
+    .naming-panel__close {
+      margin-left: auto;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--color-granite);
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        color: var(--color-primary);
+      }
+    }
+  }
+
+  &__body {
+    flex: 1;
+    overflow-y: auto;
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+
+  &__section {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__step {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__step-num {
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    color: white;
+    font-size: 12px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  &__step-label {
+    font-weight: 600;
+    color: var(--color-granite-dark);
+  }
+
+  &__separators {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  &__sep-option {
+    padding: 6px 12px;
+    border-radius: 4px;
+    border: 1px solid var(--color-silver);
+    cursor: pointer;
+    user-select: none;
+    transition: all 0.15s ease;
+    font-family: monospace;
+    font-size: var(--font-size-s);
+    color: var(--color-granite);
+
+    &.active {
+      border-color: var(--color-primary);
+      background: var(--color-primary-lighter);
+      color: var(--color-primary);
+      font-weight: 600;
+    }
+
+    &:hover:not(.active) {
+      border-color: var(--color-granite-light);
+    }
+  }
+
+  &__preview {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--color-silver-lighter);
+    border-radius: 4px;
+    font-size: 12px;
+    color: var(--color-granite);
+
+    code {
+      font-family: monospace;
+      font-weight: 600;
+      color: var(--color-primary);
+      font-size: 13px;
+    }
+  }
+
+  &__segments {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &__add-btns {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+  }
+
+  &__mode-toggle {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  &__checkbox-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    font-weight: 500;
+
+    &--sub {
+      margin-top: 8px;
+    }
+  }
+
+  &__mode-hint {
+    font-size: 12px;
+    color: var(--color-granite);
+    line-height: 1.5;
+    padding-left: 28px;
+
+    &--sub {
+      margin-top: -4px;
+    }
+  }
+
+  &__footer {
+    padding: 12px 16px;
+    border-top: 1px solid var(--color-silver-light);
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+}
+
+.btn-add-seg {
+  padding: 5px 10px;
+  border-radius: 4px;
+  border: 1px dashed var(--color-silver);
+  background: transparent;
+  color: var(--color-primary);
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s;
+
+  &:hover {
+    border-color: var(--color-primary);
+    background: var(--color-primary-lighter);
+  }
+}
+</style>
diff --git a/src/components/specific/files/files-manager/files-naming-template/NamingRulesList.vue b/src/components/specific/files/files-manager/files-naming-template/NamingRulesList.vue
new file mode 100644
index 000000000..1cef88cd3
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/NamingRulesList.vue
@@ -0,0 +1,405 @@
+<template>
+  <div class="rules-list">
+    <!-- Header -->
+    <div class="rules-list__header">
+      <BIMDataIcon name="convention" size="s" />
+      <span>Gestion des conventions de nommage</span>
+      <button class="rules-list__close" @click="$emit('close')">
+        <BIMDataIcon name="close" size="xs" />
+      </button>
+    </div>
+
+    <!-- Toolbar -->
+    <div class="rules-list__toolbar">
+      <span class="rules-list__title">Liste des règles</span>
+      <BIMDataButton fill color="primary" size="s" @click="$emit('create')">
+        <BIMDataIcon name="plus" size="xs" />
+        ajouter une règle
+      </BIMDataButton>
+    </div>
+
+    <!-- Search -->
+    <div class="rules-list__search">
+      <BIMDataSearch v-model="search" placeholder="Search" />
+    </div>
+
+    <!-- Empty state -->
+    <div v-if="!filteredRules.length" class="rules-list__empty">
+      <BIMDataIcon name="convention" size="l" />
+      <p>Aucune règle de nommage définie</p>
+      <BIMDataButton ghost color="primary" size="s" @click="$emit('create')">
+        Créer une première règle
+      </BIMDataButton>
+    </div>
+
+    <!-- Rule items -->
+    <div class="rules-list__items" v-else>
+      <div
+        v-for="rule in filteredRules"
+        :key="rule.id"
+        class="rule-item"
+        :class="{
+          'rule-item--selected': selectedRuleId === rule.id,
+          'rule-item--strict': rule.mode === 'strict',
+        }"
+      >
+        <label class="rule-item__radio">
+          <input type="radio" :value="rule.id" v-model="selectedRuleId" hidden />
+          <span class="rule-item__radio-dot" />
+        </label>
+
+        <div class="rule-item__info">
+          <div class="rule-item__header">
+            <BIMDataIcon name="convention" size="xs" />
+            <span class="rule-item__name" :title="rule.name">{{ rule.name }}</span>
+            <span v-if="rule.mode === 'strict'" class="rule-item__badge rule-item__badge--strict">
+              strict
+            </span>
+            <button class="rule-item__edit" @click.stop="$emit('edit', rule)" title="Modifier">
+              <BIMDataIcon name="edit" size="xs" />
+            </button>
+          </div>
+          <div class="rule-item__meta">
+            <BIMDataUserAvatar :user="{ name: rule.creator_name || '?' }" size="xxs" />
+            <span class="rule-item__creator">{{ rule.creator_email || rule.creator_name }}</span>
+            <code class="rule-item__pattern">{{ rule.pattern }}</code>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Folder assignment (shown when a rule is selected) -->
+    <transition name="slide-up">
+      <div v-if="selectedRule" class="rules-list__assign">
+        <p class="rules-list__assign-label">
+          Appliquer
+          <strong>{{ selectedRule.name }}</strong>
+          au dossier actuel&nbsp;:
+        </p>
+        <div class="rules-list__assign-actions">
+          <BIMDataCheckbox
+            :model-value="isAssignedToCurrentFolder"
+            @update:model-value="toggleAssignment"
+          />
+          <span>{{ currentFolder?.name || "Dossier courant" }}</span>
+        </div>
+        <label class="naming-panel__checkbox-label">
+          <BIMDataCheckbox v-model="selectedRule.recursive" @change="saveRecursive" />
+          <span class="rules-list__recursive-label">Règle récursive</span>
+        </label>
+        <p class="rules-list__recursive-hint">
+          Si vous cochez cette case, cette règle s'appliquera également aux fichiers contenus dans
+          les sous-dossiers de votre dossier principal.
+        </p>
+        <BIMDataButton
+          fill
+          color="primary"
+          size="s"
+          class="rules-list__save-btn"
+          @click="saveAssignment"
+        >
+          <BIMDataIcon name="save" size="xs" />
+          Enregistrer la règle
+        </BIMDataButton>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+import { useNamingConventionStore } from "./namingConventionStore.js";
+
+const props = defineProps({
+  rules: { type: Array, default: () => [] },
+  currentFolder: { type: Object, default: null },
+  projectPk: { type: [String, Number], required: true },
+});
+
+const emit = defineEmits(["close", "create", "edit", "assignment-saved"]);
+
+const store = useNamingConventionStore();
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const search = ref("");
+const selectedRuleId = ref(null);
+
+// ─── Computed ─────────────────────────────────────────────────────────────────
+
+const filteredRules = computed(() => {
+  if (!search.value.trim()) return props.rules;
+  const q = search.value.toLowerCase();
+  return props.rules.filter(
+    (r) => r.name?.toLowerCase().includes(q) || r.pattern?.toLowerCase().includes(q),
+  );
+});
+
+const selectedRule = computed(() => props.rules.find((r) => r.id === selectedRuleId.value) || null);
+
+const isAssignedToCurrentFolder = computed(() => {
+  if (!selectedRule.value || !props.currentFolder) return false;
+  return selectedRule.value.folder_ids?.includes(props.currentFolder.id);
+});
+
+// ─── Actions ──────────────────────────────────────────────────────────────────
+
+function toggleAssignment(val) {
+  if (!selectedRule.value || !props.currentFolder) return;
+  if (val) {
+    store.assignRuleToFolder(selectedRule.value.id, props.currentFolder.id);
+  } else {
+    store.unassignRuleFromFolder(selectedRule.value.id, props.currentFolder.id);
+  }
+}
+
+async function saveAssignment() {
+  if (!selectedRule.value) return;
+  await store.saveRule(null, props.projectPk, selectedRule.value);
+  emit("assignment-saved", selectedRule.value);
+}
+
+async function saveRecursive() {
+  if (!selectedRule.value) return;
+  await store.saveRule(null, props.projectPk, selectedRule.value);
+}
+</script>
+
+<style lang="scss" scoped>
+.rules-list {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: var(--color-white);
+  font-size: var(--font-size-s);
+
+  &__header {
+    margin-bottom: 12px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    font-size: var(--font-size-m);
+    justify-content: space-between;
+
+    .rules-list__close {
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--color-granite);
+      display: flex;
+      align-items: center;
+
+      &:hover {
+        color: var(--color-primary);
+      }
+    }
+  }
+
+  &__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 16px 6px;
+  }
+
+  &__title {
+    font-weight: 600;
+    font-size: var(--font-size-s);
+    color: var(--color-granite-dark);
+  }
+
+  &__search {
+    padding: 0 16px 8px;
+  }
+
+  &__empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 12px;
+    padding: 32px 16px;
+    color: var(--color-granite);
+    text-align: center;
+    font-size: var(--font-size-s);
+  }
+
+  &__items {
+    flex: 1;
+    overflow-y: auto;
+    padding: 0 8px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  &__assign {
+    padding: 12px 16px;
+    border-top: 1px solid var(--color-silver-light);
+    background: var(--color-silver-lighter);
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__assign-label {
+    font-size: var(--font-size-s);
+    color: var(--color-granite-dark);
+  }
+
+  &__assign-actions {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  &__recursive-label {
+    font-weight: 500;
+  }
+
+  &__recursive-hint {
+    font-size: 12px;
+    color: var(--color-granite);
+    line-height: 1.4;
+  }
+
+  &__save-btn {
+    align-self: flex-end;
+  }
+}
+
+.rule-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 10px;
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 0.1s;
+
+  &:hover {
+    background: var(--color-silver-lighter);
+  }
+
+  &--selected {
+    background: var(--color-primary-lighter);
+    border: 1px solid var(--color-primary-light);
+  }
+
+  &--strict .rule-item__name {
+    color: var(--color-primary);
+  }
+
+  &__radio {
+    display: flex;
+    align-items: center;
+    padding-top: 2px;
+    cursor: pointer;
+  }
+
+  &__radio-dot {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    border: 2px solid var(--color-silver);
+    display: block;
+    flex-shrink: 0;
+    transition: all 0.1s;
+
+    .rule-item--selected & {
+      border-color: var(--color-primary);
+      background: var(--color-primary);
+      box-shadow: inset 0 0 0 3px white;
+    }
+  }
+
+  &__info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__name {
+    font-weight: 500;
+    font-size: var(--font-size-s);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex: 1;
+  }
+
+  &__badge {
+    font-size: 10px;
+    padding: 1px 6px;
+    border-radius: 10px;
+    font-weight: 600;
+    flex-shrink: 0;
+
+    &--strict {
+      background: var(--color-red-lighter);
+      color: var(--color-red);
+    }
+  }
+
+  &__edit {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-granite-light);
+    padding: 2px;
+    display: flex;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 0.1s;
+    flex-shrink: 0;
+
+    .rule-item:hover & {
+      opacity: 1;
+    }
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+
+  &__meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 4px;
+  }
+
+  &__creator {
+    font-size: 11px;
+    color: var(--color-granite);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 120px;
+  }
+
+  &__pattern {
+    font-family: monospace;
+    font-size: 11px;
+    color: var(--color-primary);
+    background: var(--color-primary-lighter);
+    padding: 1px 5px;
+    border-radius: 3px;
+    white-space: nowrap;
+  }
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.2s ease;
+}
+.slide-up-enter-from,
+.slide-up-leave-to {
+  transform: translateY(10px);
+  opacity: 0;
+}
+</style>
diff --git a/src/components/specific/files/files-manager/files-naming-template/NamingSegmentRow.vue b/src/components/specific/files/files-manager/files-naming-template/NamingSegmentRow.vue
new file mode 100644
index 000000000..e20c770f3
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/NamingSegmentRow.vue
@@ -0,0 +1,273 @@
+<template>
+  <div class="seg-row">
+    <!-- Drag handle -->
+    <div class="seg-row__drag">
+      <BIMDataIcon name="drag" size="xs" />
+    </div>
+
+    <!-- Separator indicator (not for first segment) -->
+    <div v-if="index > 0" class="seg-row__sep">{{ separator }}</div>
+
+    <!-- Type badge -->
+    <div class="seg-row__type" :class="`seg-row__type--${segment.type}`">
+      {{ typeLabel }}
+    </div>
+
+    <!-- Config inputs -->
+    <div class="seg-row__config">
+      <!-- N caractères -->
+      <template v-if="segment.type === 'n_chars'">
+        <BIMDataInput
+          :value="segment.config.min"
+          placeholder="Min"
+          type="number"
+          size="s"
+          class="seg-row__input seg-row__input--sm"
+          @input="updateConfig('min', $event.target.value)"
+        />
+        <span class="seg-row__range-sep">–</span>
+        <BIMDataInput
+          :value="segment.config.max"
+          placeholder="Max"
+          type="number"
+          size="s"
+          class="seg-row__input seg-row__input--sm"
+          @input="updateConfig('max', $event.target.value)"
+        />
+      </template>
+
+      <!-- Valeurs bornées -->
+      <template v-else-if="segment.type === 'bounded'">
+        <BIMDataInput
+          :value="segment.config.min"
+          placeholder="Min"
+          type="number"
+          size="s"
+          class="seg-row__input seg-row__input--sm"
+          @input="updateConfig('min', Number($event.target.value))"
+        />
+        <span class="seg-row__range-sep">–</span>
+        <BIMDataInput
+          :value="segment.config.max"
+          placeholder="Max"
+          type="number"
+          size="s"
+          class="seg-row__input seg-row__input--sm"
+          @input="updateConfig('max', Number($event.target.value))"
+        />
+      </template>
+
+      <!-- Liste -->
+      <template v-else-if="segment.type === 'list'">
+        <select
+          class="seg-row__select"
+          :value="segment.config.listId"
+          @change="onListSelect($event.target.value)"
+        >
+          <option value="">Select de la liste</option>
+          <option
+            v-for="list in customLists"
+            :key="list.id"
+            :value="list.id"
+          >
+            {{ list.name }}
+          </option>
+        </select>
+        <button class="seg-row__manage-list" @click="$emit('manage-list')">
+          <BIMDataIcon name="settings" size="xs" />
+        </button>
+      </template>
+    </div>
+
+    <!-- Actions -->
+    <div class="seg-row__actions">
+      <button
+        class="seg-row__action"
+        :disabled="index === 0"
+        @click="$emit('move-up')"
+        title="Monter"
+      >
+        <BIMDataIcon name="chevron" size="xs" style="transform: rotate(180deg)" />
+      </button>
+      <button
+        class="seg-row__action"
+        @click="$emit('move-down')"
+        title="Descendre"
+      >
+        <BIMDataIcon name="chevron" size="xs" />
+      </button>
+      <button class="seg-row__action seg-row__action--delete" @click="$emit('remove')" title="Supprimer">
+        <BIMDataIcon name="delete" size="xs" />
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+
+const props = defineProps({
+  segment: { type: Object, required: true },
+  index: { type: Number, required: true },
+  separator: { type: String, default: "-" },
+  customLists: { type: Array, default: () => [] },
+});
+
+const emit = defineEmits(["update", "remove", "move-up", "move-down", "manage-list"]);
+
+const typeLabel = computed(() => {
+  switch (props.segment.type) {
+    case "n_chars": return "N car.";
+    case "bounded": return "Borné";
+    case "list": return "Liste";
+    default: return "?";
+  }
+});
+
+function updateConfig(key, value) {
+  emit("update", {
+    config: { ...props.segment.config, [key]: value },
+  });
+}
+
+function onListSelect(listId) {
+  const list = props.customLists.find((l) => l.id === listId);
+  emit("update", {
+    config: {
+      ...props.segment.config,
+      listId,
+      values: list?.values || [],
+    },
+  });
+}
+</script>
+
+<style lang="scss" scoped>
+.seg-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 10px;
+  background: var(--color-silver-lighter);
+  border-radius: 6px;
+  border: 1px solid var(--color-silver-light);
+
+  &__drag {
+    cursor: grab;
+    color: var(--color-granite-light);
+    flex-shrink: 0;
+  }
+
+  &__sep {
+    font-family: monospace;
+    font-size: 14px;
+    font-weight: 700;
+    color: var(--color-granite);
+    flex-shrink: 0;
+    min-width: 14px;
+    text-align: center;
+  }
+
+  &__type {
+    font-size: 11px;
+    font-weight: 600;
+    padding: 2px 8px;
+    border-radius: 12px;
+    flex-shrink: 0;
+    white-space: nowrap;
+
+    &--n_chars {
+      background: #e8f4fd;
+      color: #1a73e8;
+    }
+    &--bounded {
+      background: #fef3e2;
+      color: #f57c00;
+    }
+    &--list {
+      background: #e8f5e9;
+      color: #2e7d32;
+    }
+  }
+
+  &__config {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+  }
+
+  &__input {
+    &--sm {
+      width: 64px;
+    }
+  }
+
+  &__range-sep {
+    color: var(--color-granite);
+    font-size: 12px;
+  }
+
+  &__select {
+    flex: 1;
+    padding: 5px 8px;
+    border: 1px solid var(--color-silver);
+    border-radius: 4px;
+    font-size: 12px;
+    background: white;
+    color: var(--color-granite-dark);
+
+    &:focus {
+      outline: none;
+      border-color: var(--color-primary);
+    }
+  }
+
+  &__manage-list {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-granite);
+    padding: 4px;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      color: var(--color-primary);
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: 2px;
+    flex-shrink: 0;
+  }
+
+  &__action {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-granite);
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    transition: all 0.1s;
+
+    &:hover:not(:disabled) {
+      background: var(--color-silver-light);
+      color: var(--color-granite-dark);
+    }
+
+    &:disabled {
+      opacity: 0.3;
+      cursor: not-allowed;
+    }
+
+    &--delete:hover:not(:disabled) {
+      background: var(--color-red-lighter);
+      color: var(--color-red);
+    }
+  }
+}
+</style>
diff --git a/src/components/specific/files/files-manager/files-naming-template/NamingTemplate.vue b/src/components/specific/files/files-manager/files-naming-template/NamingTemplate.vue
new file mode 100644
index 000000000..1c3d7c0ea
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/NamingTemplate.vue
@@ -0,0 +1,158 @@
+<template>
+  <div class="ged-upload-example">
+    <!-- ① Soft-mode banner (non-blocking) -->
+    <NamingViolationBanner
+      v-if="showBanner"
+      :violations="violations"
+      @dismiss="onBannerDismiss"
+      @apply-renames="onBannerApplyRenames"
+      @rename="handleSoftRename"
+    />
+
+    <!-- ③ Strict-mode blocking modal -->
+    <NamingViolationModal
+      v-if="showModal"
+      :violations="strictViolations"
+      @confirm="onModalConfirm"
+      @cancel="onModalCancel"
+    />
+
+    <!-- ④ Naming convention panel (side panel) -->
+    <div class="naming-side-panel">
+      <!-- Toggle between list and create/edit -->
+      <NamingConventionPanel
+        v-if="panelMode === 'create' || panelMode === 'edit'"
+        :editing-rule="editingRule"
+        :cloud-pk="cloudPk"
+        :project-pk="projectPk"
+        @close="closeNamingPanel"
+        @go-back="panelMode = 'list'"
+        @saved="onRuleSaved"
+      />
+      <NamingRulesList
+        v-else
+        :rules="rules"
+        :current-folder="currentFolder"
+        :project-pk="projectPk"
+        @close="closeNamingPanel"
+        @create="panelMode = 'create'"
+        @edit="startEditRule"
+        @assignment-saved="onAssignmentSaved"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useNamingConventionStore } from "./namingConventionStore.js";
+import { useNamingConvention } from "./useNamingConvention.js";
+import NamingViolationBanner from "./NamingViolationBanner.vue";
+import NamingViolationModal from "./NamingViolationModal.vue";
+import NamingConventionPanel from "./NamingConventionPanel.vue";
+import NamingRulesList from "./NamingRulesList.vue";
+
+// ─── Props ────────────────────────────────────────────────────────────────────
+
+const props = defineProps({
+  cloudPk: { type: [String, Number], required: true },
+  projectPk: { type: [String, Number], required: true },
+  currentFolder: { type: Object, default: null },
+});
+
+const emit = defineEmits(["close"]);
+
+// ─── Store ────────────────────────────────────────────────────────────────────
+
+const store = useNamingConventionStore();
+const { rules } = store;
+
+// Load rules on mount
+store.fetchRules(props.cloudPk, props.projectPk);
+
+// ─── Naming convention hook ───────────────────────────────────────────────────
+
+const {
+  violations,
+  strictViolations,
+  showBanner,
+  showModal,
+  checkBeforeUpload,
+  onModalConfirm,
+  onModalCancel,
+  onBannerDismiss,
+  onBannerApplyRenames,
+} = useNamingConvention(() => props.currentFolder);
+
+// ─── Upload flow ──────────────────────────────────────────────────────────────
+
+const fileInput = ref(null);
+
+function triggerUpload() {
+  fileInput.value?.click();
+}
+
+async function onFilesSelected(event) {
+  const files = Array.from(event.target.files);
+  if (!files.length) return;
+
+  try {
+    // ← This is the key integration point
+    const { files: finalFiles } = await checkBeforeUpload(files);
+    // Proceed with your actual upload logic here
+    await uploadFiles(finalFiles);
+  } catch {
+    // User cancelled (strict modal)
+    console.log("Upload cancelled");
+  } finally {
+    // Reset input so same files can be re-selected
+    event.target.value = "";
+  }
+}
+
+async function uploadFiles(files) {
+  // Your existing upload implementation
+  // e.g.: await gedStore.uploadDocuments(props.currentFolder.id, files);
+  console.log(
+    "Uploading files:",
+    files.map((f) => f.name),
+  );
+}
+
+function handleSoftRename({ item, newName }) {
+  // Call API to rename the already-uploaded file
+  // e.g.: await gedStore.renameDocument(item.file.id, newName);
+  console.log("Soft rename:", item.file.name, "→", newName);
+}
+
+// ─── Naming panel ─────────────────────────────────────────────────────────────
+const panelMode = ref("list"); // 'list' | 'create' | 'edit'
+const editingRule = ref(null);
+const closing = ref(false);
+
+function closeNamingPanel() {
+  panelMode.value = "list";
+  editingRule.value = null;
+  close();
+}
+
+const close = () => {
+  closing.value = false;
+  emit("close");
+};
+
+function startEditRule(rule) {
+  editingRule.value = rule;
+  panelMode.value = "edit";
+}
+
+function onRuleSaved(rule) {
+  console.log("Rule saved:", rule);
+  panelMode.value = "list";
+  editingRule.value = null;
+}
+
+function onAssignmentSaved(rule) {
+  console.log("Assignment saved:", rule);
+}
+</script>
diff --git a/src/components/specific/files/files-manager/files-naming-template/NamingViolationBanner.vue b/src/components/specific/files/files-manager/files-naming-template/NamingViolationBanner.vue
new file mode 100644
index 000000000..0aeed4771
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/NamingViolationBanner.vue
@@ -0,0 +1,315 @@
+<template>
+  <!-- Soft mode: non-blocking banner with expandable violations list -->
+  <div class="violation-banner" :class="{ expanded: isExpanded }">
+    <!-- Summary row -->
+    <div class="violation-banner__summary" @click="toggleExpand">
+      <BIMDataIcon name="warning" size="s" class="violation-banner__icon" />
+      <span class="violation-banner__text">
+        {{ violations.length }} fichier{{ violations.length > 1 ? "s" : "" }} ne correspond{{
+          violations.length > 1 ? "ent" : ""
+        }}
+        pas à la convention de nommage
+      </span>
+      <button class="violation-banner__expand" :aria-expanded="isExpanded">
+        <BIMDataIcon
+          name="chevron"
+          size="xs"
+          :style="{ transform: isExpanded ? 'rotate(180deg)' : 'rotate(0)' }"
+        />
+      </button>
+      <button class="violation-banner__dismiss" @click.stop="$emit('dismiss')">
+        <BIMDataIcon name="close" size="xs" />
+      </button>
+    </div>
+
+    <!-- Expanded file list -->
+    <transition name="expand">
+      <div v-if="isExpanded" class="violation-banner__list">
+        <div
+          v-for="item in violations"
+          :key="item.file.name"
+          class="violation-banner__item"
+          :class="{ 'violation-banner__item--renamed': item.renamed }"
+        >
+          <!-- File info -->
+          <BIMDataIcon name="file" size="xs" />
+          <span class="violation-banner__filename">
+            {{ item.renamed ? item.newName : item.file.name || item.file.file_name }}
+          </span>
+          <span class="violation-banner__rule-ref"> ({{ item.rule.name }}) </span>
+
+          <!-- Renamed check -->
+          <BIMDataIcon v-if="item.renamed" name="check" size="xs" class="violation-banner__check" />
+
+          <!-- Rename inline if not done -->
+          <template v-else>
+            <button class="violation-banner__rename-btn" @click="startRename(item)">
+              Renommer
+            </button>
+          </template>
+        </div>
+
+        <!-- Inline rename input -->
+        <div v-if="renamingItem" class="violation-banner__rename-form">
+          <span class="violation-banner__rename-label">
+            Renommer « {{ renamingItem.file.name || renamingItem.file.file_name }} »
+          </span>
+          <BIMDataInput
+            v-model="renameValue"
+            placeholder="Nouveau nom"
+            size="s"
+            :error="renameError"
+            autofocus
+            @keyup.enter="confirmRename"
+            @keyup.escape="cancelRename"
+          />
+          <div class="violation-banner__rename-actions">
+            <BIMDataButton size="s" fill color="primary" @click="confirmRename">
+              Valider
+            </BIMDataButton>
+            <BIMDataButton size="s" ghost color="secondary" @click="cancelRename">
+              Annuler
+            </BIMDataButton>
+          </div>
+        </div>
+
+        <!-- All renamed: call to action -->
+        <div v-if="allRenamed" class="violation-banner__all-ok">
+          <BIMDataIcon name="check" size="s" />
+          Tous les fichiers ont été renommés.
+          <BIMDataButton size="s" fill color="primary" @click="$emit('apply-renames')">
+            Appliquer les renommages
+          </BIMDataButton>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, reactive } from "vue";
+import { validateFileName } from "./namingConventionService.js";
+
+// ─── Props / Emits ────────────────────────────────────────────────────────────
+
+const props = defineProps({
+  violations: { type: Array, required: true },
+});
+
+const emit = defineEmits(["dismiss", "apply-renames", "rename"]);
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const isExpanded = ref(false);
+const renamingItem = ref(null);
+const renameValue = ref("");
+const renameError = ref("");
+
+const items = reactive(props.violations.map((v) => ({ ...v, renamed: false, newName: null })));
+
+// ─── Computed ─────────────────────────────────────────────────────────────────
+
+const allRenamed = computed(() => items.every((i) => i.renamed));
+
+// ─── Actions ──────────────────────────────────────────────────────────────────
+
+function toggleExpand() {
+  isExpanded.value = !isExpanded.value;
+}
+
+function startRename(item) {
+  renamingItem.value = item;
+  renameValue.value = item.file.name || item.file.file_name;
+  renameError.value = "";
+}
+
+function cancelRename() {
+  renamingItem.value = null;
+  renameValue.value = "";
+  renameError.value = "";
+}
+
+function confirmRename() {
+  if (!renamingItem.value) return;
+  const name = renameValue.value.trim();
+  if (!name) return;
+
+  const { valid, reason } = validateFileName(name, renamingItem.value.rule);
+  if (!valid) {
+    renameError.value = reason;
+    return;
+  }
+
+  renamingItem.value.renamed = true;
+  renamingItem.value.newName = name;
+  emit("rename", { item: renamingItem.value, newName: name });
+  cancelRename();
+}
+</script>
+
+<style lang="scss" scoped>
+.violation-banner {
+  background: #fff8e1;
+  border: 1px solid #ffd54f;
+  border-radius: 6px;
+  overflow: hidden;
+  margin-bottom: 12px;
+
+  &__summary {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 12px;
+    cursor: pointer;
+    user-select: none;
+
+    &:hover {
+      background: #fff3cd;
+    }
+  }
+
+  &__icon {
+    color: #f57c00;
+    flex-shrink: 0;
+  }
+
+  &__text {
+    flex: 1;
+    font-size: var(--font-size-s);
+    font-weight: 500;
+    color: #5d4037;
+  }
+
+  &__expand {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #795548;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    transition: color 0.1s;
+
+    svg {
+      transition: transform 0.2s ease;
+    }
+  }
+
+  &__dismiss {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #795548;
+    padding: 4px;
+    display: flex;
+    align-items: center;
+
+    &:hover {
+      color: var(--color-red);
+    }
+  }
+
+  &__list {
+    padding: 0 12px 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    border-top: 1px solid #ffd54f;
+    padding-top: 10px;
+  }
+
+  &__item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: var(--font-size-s);
+    color: var(--color-granite-dark);
+
+    &--renamed {
+      color: var(--color-granite);
+      text-decoration: line-through;
+    }
+  }
+
+  &__filename {
+    font-weight: 500;
+  }
+
+  &__rule-ref {
+    font-size: 12px;
+    color: var(--color-granite);
+  }
+
+  &__check {
+    color: var(--color-success);
+    flex-shrink: 0;
+  }
+
+  &__rename-btn {
+    margin-left: auto;
+    background: none;
+    border: 1px solid var(--color-primary);
+    color: var(--color-primary);
+    padding: 3px 10px;
+    border-radius: 4px;
+    font-size: 12px;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: all 0.1s;
+
+    &:hover {
+      background: var(--color-primary);
+      color: white;
+    }
+  }
+
+  &__rename-form {
+    background: white;
+    border: 1px solid var(--color-silver-light);
+    border-radius: 6px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    margin-top: 4px;
+  }
+
+  &__rename-label {
+    font-size: 12px;
+    color: var(--color-granite);
+    font-style: italic;
+  }
+
+  &__rename-actions {
+    display: flex;
+    gap: 6px;
+    justify-content: flex-end;
+  }
+
+  &__all-ok {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px;
+    background: var(--color-success-lighter);
+    border-radius: 4px;
+    font-size: var(--font-size-s);
+    color: var(--color-success-dark, #2e7d32);
+    font-weight: 500;
+  }
+}
+
+// Transition
+.expand-enter-active,
+.expand-leave-active {
+  transition: all 0.2s ease;
+  overflow: hidden;
+}
+.expand-enter-from,
+.expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+</style>
diff --git a/src/components/specific/files/files-manager/files-naming-template/NamingViolationModal.vue b/src/components/specific/files/files-manager/files-naming-template/NamingViolationModal.vue
new file mode 100644
index 000000000..28b74a113
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/NamingViolationModal.vue
@@ -0,0 +1,458 @@
+<template>
+  <BIMDataModal class="violation-modal" :title="null" :width="600" :closable="false">
+    <template #header>
+      <div class="violation-modal__header">
+        <BIMDataIcon name="convention" class="violation-modal__icon" />
+        <span>Convention de nommage</span>
+      </div>
+    </template>
+
+    <template #default>
+      <div class="violation-modal__body">
+        <!-- Illustration -->
+        <div class="violation-modal__illustration">
+          <div class="violation-modal__file-icon">
+            <BIMDataIcon name="file" size="xl" />
+            <div class="violation-modal__warning-badge">
+              <BIMDataIcon name="warning" size="xs" />
+            </div>
+          </div>
+        </div>
+
+        <!-- Message -->
+        <p class="violation-modal__message">
+          Renommez ici les fichiers qui ne correspondent pas à la
+          <strong>règle stricte</strong> que vous avez programmée.
+          <br />
+          <span class="violation-modal__warning">
+            Attention, si vous ne les renommez pas maintenant, ils seront
+            <strong>supprimés</strong> de votre projet.
+          </span>
+        </p>
+
+        <!-- Rule context -->
+        <div
+          v-for="ruleGroup in groupedViolations"
+          :key="ruleGroup.ruleId"
+          class="violation-modal__rule-group"
+        >
+          <div class="violation-modal__rule-header">
+            <span class="violation-modal__rule-name">{{ ruleGroup.ruleName }}</span>
+            <code class="violation-modal__rule-pattern">{{ ruleGroup.pattern }}</code>
+          </div>
+
+          <!-- File rows -->
+          <div class="violation-modal__files">
+            <div
+              v-for="item in ruleGroup.items"
+              :key="item.file.name"
+              class="file-row"
+              :class="{
+                'file-row--editing': editingFile === item.file.name,
+                'file-row--valid': item.renamed && item.renameValid,
+                'file-row--invalid': item.renamed && !item.renameValid,
+              }"
+            >
+              <!-- Not editing -->
+              <template v-if="editingFile !== item.file.name">
+                <BIMDataIcon :name="getFileIcon(item.file.name)" size="s" class="file-row__icon" />
+                <span class="file-row__name">
+                  {{ item.renamed ? item.newName : item.file.name }}
+                </span>
+
+                <!-- Status -->
+                <BIMDataIcon
+                  v-if="item.renamed && item.renameValid"
+                  name="check"
+                  size="xs"
+                  class="file-row__status file-row__status--ok"
+                />
+                <BIMDataIcon
+                  v-else-if="!item.renamed"
+                  name="warning"
+                  size="xs"
+                  class="file-row__status file-row__status--warn"
+                />
+
+                <button class="file-row__edit-btn" @click="startEdit(item)">
+                  <BIMDataIcon name="edit" size="xs" />
+                </button>
+              </template>
+
+              <!-- Editing -->
+              <template v-else>
+                <BIMDataIcon :name="getFileIcon(item.file.name)" size="s" class="file-row__icon" />
+                <div class="file-row__edit-area">
+                  <BIMDataInput
+                    ref="editInput"
+                    v-model="editValue"
+                    placeholder="Renommer le fichier"
+                    size="s"
+                    :error="editError"
+                    autofocus
+                    @keyup.enter="confirmEdit(item)"
+                    @keyup.escape="cancelEdit"
+                  />
+                </div>
+                <button
+                  class="file-row__confirm"
+                  :disabled="!editValue.trim()"
+                  @click="confirmEdit(item)"
+                >
+                  Valider
+                </button>
+                <button class="file-row__cancel-edit" @click="cancelEdit">
+                  <BIMDataIcon name="close" size="xs" />
+                </button>
+                <BIMDataIcon
+                  v-if="editValue && getEditValidity(item)"
+                  name="check"
+                  size="xs"
+                  class="file-row__status file-row__status--ok"
+                />
+              </template>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template #footer>
+      <div class="violation-modal__footer">
+        <BIMDataButton ghost color="secondary" @click="$emit('cancel')"> Annuler </BIMDataButton>
+        <BIMDataButton fill color="primary" :disabled="!allResolved" @click="confirm">
+          Renommer
+        </BIMDataButton>
+      </div>
+    </template>
+  </BIMDataModal>
+</template>
+
+<script setup>
+import { ref, computed, reactive, nextTick } from "vue";
+import { validateFileName, suggestRenames, getExtension } from "./namingConventionService.js";
+
+// ─── Props / Emits ────────────────────────────────────────────────────────────
+
+const props = defineProps({
+  /**
+   * violations: Array of { file: File|{name}, rule: NamingRule, reason: string }
+   */
+  violations: { type: Array, required: true },
+});
+
+const emit = defineEmits(["confirm", "cancel"]);
+
+// ─── State ────────────────────────────────────────────────────────────────────
+
+const editingFile = ref(null);
+const editValue = ref("");
+const editError = ref("");
+
+// Build mutable item list
+const items = reactive(
+  props.violations.map((v) => ({
+    ...v,
+    renamed: false,
+    newName: null,
+    renameValid: false,
+    suggestions: suggestRenames(v.file.name || v.file.file_name, v.rule),
+  })),
+);
+
+// ─── Computed ─────────────────────────────────────────────────────────────────
+
+const groupedViolations = computed(() => {
+  const groups = {};
+  items.forEach((item) => {
+    const id = item.rule.id;
+    if (!groups[id]) {
+      groups[id] = {
+        ruleId: id,
+        ruleName: item.rule.name,
+        pattern: item.rule.pattern,
+        items: [],
+      };
+    }
+    groups[id].items.push(item);
+  });
+  return Object.values(groups);
+});
+
+const allResolved = computed(() => items.every((i) => i.renamed && i.renameValid));
+
+// ─── Edit Logic ───────────────────────────────────────────────────────────────
+
+function startEdit(item) {
+  editingFile.value = item.file.name || item.file.file_name;
+  editValue.value = item.newName || editingFile.value;
+  editError.value = "";
+  nextTick(() => {
+    // focus handled by autofocus
+  });
+}
+
+function cancelEdit() {
+  editingFile.value = null;
+  editValue.value = "";
+  editError.value = "";
+}
+
+function confirmEdit(item) {
+  const name = editValue.value.trim();
+  if (!name) return;
+
+  const { valid, reason } = validateFileName(name, item.rule);
+  if (!valid) {
+    editError.value = reason;
+    return;
+  }
+
+  item.renamed = true;
+  item.newName = name;
+  item.renameValid = true;
+  cancelEdit();
+}
+
+function getEditValidity(item) {
+  if (!editValue.value) return false;
+  return validateFileName(editValue.value, item.rule).valid;
+}
+
+// ─── Confirm ──────────────────────────────────────────────────────────────────
+
+function confirm() {
+  const renames = items.map((item) => ({
+    original: item.file,
+    newName: item.newName,
+    rule: item.rule,
+  }));
+  emit("confirm", renames);
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function getFileIcon(fileName) {
+  const ext = getExtension(fileName).toLowerCase();
+  switch (ext) {
+    case "ifc":
+      return "ifc";
+    case "pdf":
+      return "pdf";
+    case "png":
+    case "jpg":
+    case "jpeg":
+      return "image";
+    default:
+      return "file";
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.violation-modal {
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: 600;
+    font-size: var(--font-size-m);
+  }
+
+  &__body {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    padding: 8px 0;
+  }
+
+  &__illustration {
+    display: flex;
+    justify-content: center;
+    padding: 16px 0 8px;
+  }
+
+  &__file-icon {
+    position: relative;
+    color: var(--color-granite-light);
+
+    .violation-modal__warning-badge {
+      position: absolute;
+      bottom: -4px;
+      right: -4px;
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: var(--color-warning);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &__message {
+    text-align: center;
+    font-size: var(--font-size-s);
+    color: var(--color-granite-dark);
+    line-height: 1.6;
+  }
+
+  &__warning {
+    color: var(--color-granite);
+    font-size: 13px;
+  }
+
+  &__rule-group {
+    border: 1px solid var(--color-silver-light);
+    border-radius: 8px;
+    overflow: hidden;
+  }
+
+  &__rule-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: var(--color-silver-lighter);
+    border-bottom: 1px solid var(--color-silver-light);
+  }
+
+  &__rule-name {
+    font-weight: 600;
+    font-size: var(--font-size-s);
+    color: var(--color-granite-dark);
+  }
+
+  &__rule-pattern {
+    font-family: monospace;
+    font-size: 12px;
+    color: var(--color-primary);
+    background: var(--color-primary-lighter);
+    padding: 2px 6px;
+    border-radius: 4px;
+  }
+
+  &__files {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 8px;
+  }
+}
+
+.file-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--color-silver-lighter);
+  transition: background 0.1s;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &--valid {
+    background: var(--color-success-lighter);
+  }
+
+  &--invalid {
+    background: var(--color-red-lighter);
+  }
+
+  &--editing {
+    background: var(--color-silver-lighter);
+  }
+
+  &__icon {
+    flex-shrink: 0;
+    color: var(--color-granite);
+  }
+
+  &__name {
+    flex: 1;
+    font-size: var(--font-size-s);
+    color: var(--color-granite-dark);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  &__status {
+    flex-shrink: 0;
+
+    &--ok {
+      color: var(--color-success);
+    }
+    &--warn {
+      color: var(--color-warning);
+    }
+  }
+
+  &__edit-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-granite-light);
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    opacity: 0;
+    transition: opacity 0.1s;
+    border-radius: 4px;
+
+    .file-row:hover & {
+      opacity: 1;
+    }
+    &:hover {
+      color: var(--color-primary);
+      background: var(--color-primary-lighter);
+    }
+  }
+
+  &__edit-area {
+    flex: 1;
+  }
+
+  &__confirm {
+    padding: 5px 12px;
+    background: var(--color-primary);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 13px;
+    cursor: pointer;
+    flex-shrink: 0;
+    font-weight: 500;
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    &:not(:disabled):hover {
+      background: var(--color-primary-dark);
+    }
+  }
+
+  &__cancel-edit {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: var(--color-granite);
+    padding: 4px;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+
+    &:hover {
+      color: var(--color-red);
+    }
+  }
+}
+</style>
diff --git a/src/components/specific/files/files-manager/files-naming-template/SPEC.md b/src/components/specific/files/files-manager/files-naming-template/SPEC.md
new file mode 100644
index 000000000..57c7a1417
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/SPEC.md
@@ -0,0 +1,214 @@
+# Naming Convention (Naming Template) — Spécification technique
+
+## Vue d'ensemble
+
+Feature permettant aux administrateurs d'un projet BIMData de définir des **règles de nommage** pour les fichiers déposés dans les dossiers de la GED. Les règles peuvent être appliquées en mode souple (avertissement) ou strict (blocage).
+
+---
+
+## Architecture
+
+```
+src/
+├── composables/
+│   └── useNamingConvention.js        ← Hook principal à brancher dans l'upload
+├── services/
+│   └── namingConventionService.js    ← Logique pure (regex, validation, suggestions)
+├── stores/
+│   └── namingConventionStore.js      ← State Pinia, CRUD règles, check upload
+└── components/naming/
+    ├── NamingConventionPanel.vue     ← Panneau création/édition d'une règle
+    ├── NamingSegmentRow.vue          ← Ligne d'un segment dans le formulaire
+    ├── NamingRulesList.vue           ← Liste des règles + assignation dossier
+    ├── NamingViolationModal.vue      ← Modale bloquante (mode strict)
+    ├── NamingViolationBanner.vue     ← Bannière non-bloquante (mode souple)
+    └── GedFileUpload.integration.vue ← Exemple d'intégration dans la GED
+```
+
+---
+
+## Modèle de données
+
+### NamingRule
+
+```ts
+interface NamingRule {
+  id: string;
+  name: string;                    // "Convention métier projet X"
+  separator: "-" | "." | "_";
+  segments: NamingSegment[];
+  mode: "soft" | "strict";
+  recursive: boolean;              // s'applique aux sous-dossiers
+  folder_ids: string[];            // dossiers cibles
+  pattern: string;                 // ex: "a.1.a" (généré auto)
+  creator_email?: string;
+  created_at: string;
+  updated_at: string;
+  active: boolean;
+}
+```
+
+### NamingSegment
+
+```ts
+type NamingSegment =
+  | { type: "n_chars";  config: { min?: number; max?: number } }
+  | { type: "bounded";  config: { min: number; max: number } }
+  | { type: "list";     config: { listId?: string; values: string[] } }
+```
+
+### CustomList
+
+```ts
+interface CustomList {
+  id: string;
+  name: string;
+  values: string[];    // ["WIP", "VAL", "ARCH", ...]
+}
+```
+
+---
+
+## Règles de validation
+
+Le service `namingConventionService.js` construit un regex depuis la définition d'une règle :
+
+| Segment       | Pattern regex généré         | Exemple          |
+|---------------|------------------------------|------------------|
+| N caractères  | `[\w\-]{min,max}`            | `[\w\-]{2,8}`    |
+| Valeurs bornées | Alternation numérique      | `(1\|2\|...\|50)` |
+| Liste         | Alternation des valeurs      | `(WIP\|VAL\|ARCH)` |
+
+Le séparateur est intercalé entre chaque segment.
+L'extension de fichier (`.ifc`, `.pdf`…) est tolérée en suffixe.
+
+**Exemple** : Règle `a.1.a` avec séparateur `.` :
+- Segments : [N chars, Bounded(1-99), N chars]
+- Regex : `^[\w\-]+\.(1|2|...|99)\.[\w\-]+(\.[a-zA-Z0-9]+)?$`
+- ✅ `20191002.1.Piping.ifc`
+- ❌ `20191002Mechanical Piping.ifc`
+
+---
+
+## Flux d'upload (intégration GED)
+
+```
+User sélectionne fichier(s)
+        ↓
+useNamingConvention.checkBeforeUpload(files)
+        ↓
+store.checkFilesBeforeUpload(files, folder)
+  → récupère les règles effectives du dossier (directes + récursives)
+  → valide chaque fichier contre chaque règle
+        ↓
+    ┌───────────────────────────────┐
+    │  Aucune violation ?           │ → upload immédiat
+    ├───────────────────────────────┤
+    │  Violations soft seulement ?  │ → NamingViolationBanner (non-bloquant)
+    │                               │   upload continue, user peut renommer après
+    ├───────────────────────────────┤
+    │  Violations strictes ?        │ → NamingViolationModal (bloquant)
+    │                               │   upload suspendu, Promise en attente
+    │                               │   User renomme → confirm → upload reprend
+    │                               │   User annule → Promise rejected
+    └───────────────────────────────┘
+```
+
+---
+
+## Routes API (à implémenter dans platform-back)
+
+| Méthode | Route | Description |
+|---------|-------|-------------|
+| `GET`   | `/cloud/:cloudPk/project/:projectPk/naming-rules` | Liste des règles |
+| `POST`  | `/cloud/:cloudPk/project/:projectPk/naming-rules` | Créer une règle |
+| `PATCH` | `/cloud/:cloudPk/project/:projectPk/naming-rules/:id` | Modifier une règle |
+| `DELETE`| `/cloud/:cloudPk/project/:projectPk/naming-rules/:id` | Supprimer une règle |
+| `GET`   | `/cloud/:cloudPk/project/:projectPk/naming-lists` | Listes personnalisées |
+| `POST`  | `/cloud/:cloudPk/project/:projectPk/naming-lists` | Créer une liste |
+
+> **Note** : En attendant l'implémentation backend, le store utilise `localStorage` comme stub. Remplacer les blocs commentés `// When platform-back implements this endpoint` par les vrais appels API.
+
+---
+
+## Composants UI — résumé
+
+### `NamingConventionPanel.vue`
+Panneau latéral de création/édition d'une règle.
+- **Étape 1** : Nom de la règle
+- **Étape 2** : Séparateur (tiret / point / underscore)
+- **Étape 3** : Segments (N chars / Borné / Liste) avec aperçu live du pattern
+- **Mode** : checkbox stricte + checkbox récursive
+- Emit : `saved(rule)`, `close`
+
+### `NamingSegmentRow.vue`
+Ligne d'un segment dans le builder. Drag-handle pour réordonner.
+- N chars : inputs min/max
+- Borné : inputs min/max numériques
+- Liste : select parmi les `CustomList` du projet
+
+### `NamingRulesList.vue`
+Panneau latéral listant les règles existantes.
+- Recherche texte
+- Sélection par radio pour assigner au dossier courant
+- Badge "strict" sur les règles en mode strict
+- Bouton édition inline
+- Section d'assignation/désassignation au dossier courant
+
+### `NamingViolationModal.vue`
+Modale **bloquante** (mode strict).
+- Affiche les fichiers non-conformes groupés par règle
+- Champ de renommage inline par fichier
+- Validation live du nouveau nom contre la règle
+- Bouton "Renommer" actif uniquement quand tous les fichiers sont résolus
+
+### `NamingViolationBanner.vue`
+Bannière **non-bloquante** (mode souple).
+- Résumé cliquable avec compteur de violations
+- Liste expandable des fichiers non-conformes
+- Renommage inline optionnel
+- Dismiss pour ignorer
+
+---
+
+## Intégration dans la GED existante
+
+1. **Importer le composable** dans votre composant d'upload GED :
+   ```js
+   import { useNamingConvention } from "@/composables/useNamingConvention.js";
+   const naming = useNamingConvention(() => currentFolder.value);
+   ```
+
+2. **Intercepter les fichiers** avant l'upload :
+   ```js
+   const { files } = await naming.checkBeforeUpload(selectedFiles);
+   await uploadFiles(files); // avec les noms potentiellement renommés
+   ```
+
+3. **Afficher les composants UI** dans le template :
+   ```html
+   <NamingViolationBanner v-if="naming.showBanner.value" ... />
+   <NamingViolationModal  v-if="naming.showModal.value"  ... />
+   ```
+
+4. **Exposer le panneau de gestion** via un bouton "Conventions de nommage" dans la toolbar GED.
+
+5. **Initialiser les règles** au mount :
+   ```js
+   store.fetchRules(cloudPk, projectPk);
+   ```
+
+---
+
+## Tests
+
+Fichier : `src/services/namingConventionService.test.js`
+
+Couverture :
+- `buildRuleRegex` : N chars, borné, liste, extension, règle complexe
+- `validateFileName` : valid / invalid / extension
+- `buildHumanReadablePattern` : tous types de segments
+- `suggestRenames` : génération de suggestions, préservation extension
+- Flow complet soft vs strict (simulation store)
+
+Run : `npx jest src/services/namingConventionService.test.js`
diff --git a/src/components/specific/files/files-manager/files-naming-template/namingConventionService.js b/src/components/specific/files/files-manager/files-naming-template/namingConventionService.js
new file mode 100644
index 000000000..3690bb1d2
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/namingConventionService.js
@@ -0,0 +1,256 @@
+/**
+ * Naming Convention Service
+ * Handles rule creation, validation, and enforcement logic
+ * for BIMData GED file naming conventions.
+ */
+
+// ─── Constants ────────────────────────────────────────────────────────────────
+
+export const SEPARATOR_TYPES = {
+  DASH: { value: "-", label: "- (tiret)" },
+  DOT: { value: ".", label: ". (point)" },
+  UNDERSCORE: { value: "_", label: "_ (trait de soulignement)" },
+};
+
+export const SEGMENT_TYPES = {
+  N_CHARS: "n_chars",
+  BOUNDED: "bounded",
+  LIST: "list",
+};
+
+export const RULE_MODES = {
+  SOFT: "soft",   // warn but allow
+  STRICT: "strict", // block until renamed
+};
+
+// ─── Regex Builder ────────────────────────────────────────────────────────────
+
+/**
+ * Build a regex pattern from a rule definition.
+ * @param {Object} rule - The naming rule object
+ * @returns {RegExp}
+ */
+export function buildRuleRegex(rule) {
+  const sep = escapeRegex(rule.separator);
+  const parts = rule.segments.map((seg) => buildSegmentPattern(seg));
+  const pattern = parts.join(sep);
+  // Allow optional file extension at the end
+  return new RegExp(`^${pattern}(\\.[a-zA-Z0-9]+)?$`);
+}
+
+function buildSegmentPattern(segment) {
+  switch (segment.type) {
+    case SEGMENT_TYPES.N_CHARS: {
+      const { min, max } = segment.config;
+      if (min && max) return `[\\w\\-]{${min},${max}}`;
+      if (min) return `[\\w\\-]{${min},}`;
+      if (max) return `[\\w\\-]{1,${max}}`;
+      return `[\\w\\-]+`;
+    }
+    case SEGMENT_TYPES.BOUNDED: {
+      const { min, max } = segment.config;
+      // Numeric range
+      return `(${generateNumericRange(min, max)})`;
+    }
+    case SEGMENT_TYPES.LIST: {
+      const values = segment.config.values || [];
+      if (!values.length) return `[\\w\\-]+`;
+      return `(${values.map(escapeRegex).join("|")})`;
+    }
+    default:
+      return `[\\w\\-]+`;
+  }
+}
+
+/**
+ * Generate a regex alternation for a numeric range like 1-50.
+ * Falls back to simple \d+ if range is too large.
+ */
+function generateNumericRange(min, max) {
+  if (!min && !max) return `\\d+`;
+  const mn = parseInt(min, 10);
+  const mx = parseInt(max, 10);
+  if (isNaN(mn) || isNaN(mx) || mx - mn > 200) return `\\d+`;
+  const nums = [];
+  for (let i = mn; i <= mx; i++) nums.push(String(i));
+  return nums.join("|");
+}
+
+function escapeRegex(str) {
+  return str.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// ─── Validation ───────────────────────────────────────────────────────────────
+
+/**
+ * Validate a file name against a naming rule.
+ * Returns { valid: bool, reason: string|null }
+ */
+export function validateFileName(fileName, rule) {
+  // Strip extension for validation
+  const nameWithoutExt = stripExtension(fileName);
+  const regex = buildRuleRegex(rule);
+  const valid = regex.test(nameWithoutExt) || regex.test(fileName);
+  return {
+    valid,
+    reason: valid
+      ? null
+      : `Le nom "${fileName}" ne correspond pas au format attendu : ${buildHumanReadablePattern(rule)}`,
+  };
+}
+
+/**
+ * Validate a list of files against a rule.
+ * Returns array of { file, valid, reason }
+ */
+export function validateFiles(files, rule) {
+  return files.map((file) => ({
+    file,
+    ...validateFileName(file.name || file.file_name, rule),
+  }));
+}
+
+/**
+ * Build a human-readable pattern description for display in UI.
+ * e.g. "a.1.a" or "(1-50).a.1.a.[liste]"
+ */
+export function buildHumanReadablePattern(rule) {
+  const sep = rule.separator;
+  return rule.segments
+    .map((seg) => {
+      switch (seg.type) {
+        case SEGMENT_TYPES.N_CHARS:
+          return "a";
+        case SEGMENT_TYPES.BOUNDED:
+          return `(${seg.config.min}-${seg.config.max})`;
+        case SEGMENT_TYPES.LIST:
+          return "[liste]";
+        default:
+          return "?";
+      }
+    })
+    .join(sep);
+}
+
+// ─── Suggestion Engine ────────────────────────────────────────────────────────
+
+/**
+ * Suggest renamed variants for a non-conforming file.
+ * Returns up to 3 suggestions.
+ */
+export function suggestRenames(fileName, rule) {
+  const nameWithoutExt = stripExtension(fileName);
+  const ext = getExtension(fileName);
+  const sep = rule.separator;
+  const parts = nameWithoutExt.split(/[\.\-_]/);
+
+  const suggestions = [];
+
+  // Strategy 1: pad/trim parts to match segment count
+  if (rule.segments.length > 0) {
+    const padded = rule.segments.map((seg, i) => {
+      const part = parts[i] || getDefaultValue(seg);
+      return conformPart(part, seg);
+    });
+    suggestions.push(padded.join(sep) + (ext ? `.${ext}` : ""));
+  }
+
+  // Strategy 2: insert index
+  if (rule.segments.length > 1) {
+    const variant = [...suggestions[0]
+      ? suggestions[0].replace(ext ? `.${ext}` : "", "").split(sep)
+      : rule.segments.map((s) => getDefaultValue(s))];
+    variant[0] = (variant[0] || "A") + "2";
+    suggestions.push(variant.join(sep) + (ext ? `.${ext}` : ""));
+  }
+
+  // Deduplicate & filter valid
+  return [...new Set(suggestions)].filter(
+    (s) => s !== fileName && s.trim() !== ""
+  );
+}
+
+function conformPart(part, segment) {
+  switch (segment.type) {
+    case SEGMENT_TYPES.N_CHARS: {
+      const { min, max } = segment.config;
+      if (max && part.length > max) return part.slice(0, max);
+      if (min && part.length < min) return part.padEnd(min, "0");
+      return part;
+    }
+    case SEGMENT_TYPES.BOUNDED: {
+      const num = parseInt(part, 10);
+      const mn = parseInt(segment.config.min, 10);
+      const mx = parseInt(segment.config.max, 10);
+      if (isNaN(num)) return String(mn || 1);
+      if (!isNaN(mn) && num < mn) return String(mn);
+      if (!isNaN(mx) && num > mx) return String(mx);
+      return String(num);
+    }
+    case SEGMENT_TYPES.LIST: {
+      const values = segment.config.values || [];
+      if (!values.length) return part;
+      return values.includes(part) ? part : values[0];
+    }
+    default:
+      return part;
+  }
+}
+
+function getDefaultValue(segment) {
+  switch (segment.type) {
+    case SEGMENT_TYPES.N_CHARS:
+      return "A";
+    case SEGMENT_TYPES.BOUNDED:
+      return String(segment.config.min || 1);
+    case SEGMENT_TYPES.LIST:
+      return (segment.config.values || ["val"])[0];
+    default:
+      return "x";
+  }
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+export function stripExtension(fileName) {
+  const lastDot = fileName.lastIndexOf(".");
+  if (lastDot === -1) return fileName;
+  return fileName.slice(0, lastDot);
+}
+
+export function getExtension(fileName) {
+  const lastDot = fileName.lastIndexOf(".");
+  if (lastDot === -1) return "";
+  return fileName.slice(lastDot + 1);
+}
+
+/**
+ * Check if a folder has an active naming rule.
+ * Returns the matching rule or null.
+ */
+export function getActiveRuleForFolder(folder, rules) {
+  // Direct assignment
+  const direct = rules.find(
+    (r) => r.folder_ids?.includes(folder.id) && r.active
+  );
+  if (direct) return direct;
+
+  // Recursive rules from parent folders
+  const recursive = rules.find(
+    (r) =>
+      r.recursive &&
+      r.active &&
+      r.folder_ids?.some((fid) => isAncestor(fid, folder, /* tree */ []))
+  );
+  return recursive || null;
+}
+
+function isAncestor(ancestorId, folder, _tree) {
+  // Traverse parent_id chain — tree traversal handled at store level
+  let current = folder;
+  while (current?.parent_id) {
+    if (current.parent_id === ancestorId) return true;
+    current = { id: current.parent_id, parent_id: null }; // simplified
+  }
+  return false;
+}
diff --git a/src/components/specific/files/files-manager/files-naming-template/namingConventionService.test.js b/src/components/specific/files/files-manager/files-naming-template/namingConventionService.test.js
new file mode 100644
index 000000000..47a306571
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/namingConventionService.test.js
@@ -0,0 +1,250 @@
+/**
+ * Tests: namingConventionService.js
+ * Run with: npx jest src/services/namingConventionService.test.js
+ */
+
+import {
+  buildRuleRegex,
+  validateFileName,
+  buildHumanReadablePattern,
+  suggestRenames,
+  SEPARATOR_TYPES,
+  SEGMENT_TYPES,
+  RULE_MODES,
+} from "./namingConventionService.js";
+
+// ─── Test helpers ─────────────────────────────────────────────────────────────
+
+function makeRule({ separator = "-", segments = [], mode = RULE_MODES.SOFT } = {}) {
+  return { id: "r1", name: "Test", separator, segments, mode };
+}
+
+function seg_nchars(min, max) {
+  return { type: SEGMENT_TYPES.N_CHARS, config: { min, max } };
+}
+
+function seg_bounded(min, max) {
+  return { type: SEGMENT_TYPES.BOUNDED, config: { min, max } };
+}
+
+function seg_list(values) {
+  return { type: SEGMENT_TYPES.LIST, config: { values } };
+}
+
+// ─── buildRuleRegex ───────────────────────────────────────────────────────────
+
+describe("buildRuleRegex", () => {
+  test("simple N chars + separator dash", () => {
+    const rule = makeRule({
+      separator: "-",
+      segments: [seg_nchars(null, null), seg_nchars(null, null)],
+    });
+    const regex = buildRuleRegex(rule);
+    expect(regex.test("ABC-DEF")).toBe(true);
+    expect(regex.test("ABC")).toBe(false);
+  });
+
+  test("bounded segment matches range 1-50", () => {
+    const rule = makeRule({
+      separator: ".",
+      segments: [seg_bounded(1, 50)],
+    });
+    const regex = buildRuleRegex(rule);
+    expect(regex.test("1")).toBe(true);
+    expect(regex.test("50")).toBe(true);
+    expect(regex.test("51")).toBe(false);
+    expect(regex.test("0")).toBe(false);
+  });
+
+  test("list segment matches allowed values only", () => {
+    const rule = makeRule({
+      separator: "_",
+      segments: [seg_list(["STRUCT", "ELEC", "PLUMB"])],
+    });
+    const regex = buildRuleRegex(rule);
+    expect(regex.test("STRUCT")).toBe(true);
+    expect(regex.test("ELEC")).toBe(true);
+    expect(regex.test("MECA")).toBe(false);
+  });
+
+  test("file extension is accepted", () => {
+    const rule = makeRule({
+      separator: "-",
+      segments: [seg_nchars(null, null), seg_nchars(null, null)],
+    });
+    const regex = buildRuleRegex(rule);
+    expect(regex.test("ABC-DEF.ifc")).toBe(true);
+    expect(regex.test("ABC-DEF.pdf")).toBe(true);
+  });
+
+  test("complex rule: n_chars + bounded + list with dot separator", () => {
+    // Pattern like: a.1.a
+    const rule = makeRule({
+      separator: ".",
+      segments: [
+        seg_nchars(null, null),
+        seg_bounded(1, 99),
+        seg_nchars(null, null),
+      ],
+    });
+    const regex = buildRuleRegex(rule);
+    expect(regex.test("20191002.1.Piping")).toBe(true);
+    expect(regex.test("A.50.B")).toBe(true);
+    expect(regex.test("A.100.B")).toBe(false);
+  });
+});
+
+// ─── validateFileName ─────────────────────────────────────────────────────────
+
+describe("validateFileName", () => {
+  const rule = makeRule({
+    separator: "-",
+    segments: [seg_nchars(2, 8), seg_list(["WIP", "VAL", "ARCH"])],
+  });
+
+  test("valid file passes", () => {
+    expect(validateFileName("ABC-WIP", rule).valid).toBe(true);
+    expect(validateFileName("STRUCT-VAL", rule).valid).toBe(true);
+    expect(validateFileName("STRUCT-VAL.ifc", rule).valid).toBe(true);
+  });
+
+  test("invalid file fails with reason", () => {
+    const result = validateFileName("invalid_name", rule);
+    expect(result.valid).toBe(false);
+    expect(result.reason).toBeTruthy();
+  });
+
+  test("wrong list value fails", () => {
+    expect(validateFileName("ABC-DRAFT", rule).valid).toBe(false);
+  });
+});
+
+// ─── buildHumanReadablePattern ────────────────────────────────────────────────
+
+describe("buildHumanReadablePattern", () => {
+  test("n_chars segments show as 'a'", () => {
+    const rule = makeRule({
+      separator: ".",
+      segments: [seg_nchars(null, null), seg_nchars(null, null)],
+    });
+    expect(buildHumanReadablePattern(rule)).toBe("a.a");
+  });
+
+  test("bounded shows min-max", () => {
+    const rule = makeRule({
+      separator: ".",
+      segments: [seg_bounded(1, 50)],
+    });
+    expect(buildHumanReadablePattern(rule)).toBe("(1-50)");
+  });
+
+  test("list shows [liste]", () => {
+    const rule = makeRule({
+      separator: "-",
+      segments: [seg_list(["A", "B"])],
+    });
+    expect(buildHumanReadablePattern(rule)).toBe("[liste]");
+  });
+
+  test("complex pattern (1-50).a.1.a.[liste]", () => {
+    const rule = makeRule({
+      separator: ".",
+      segments: [
+        seg_bounded(1, 50),
+        seg_nchars(null, null),
+        seg_bounded(1, 1),
+        seg_nchars(null, null),
+        seg_list(["elem", "type"]),
+      ],
+    });
+    expect(buildHumanReadablePattern(rule)).toBe("(1-50).a.(1-1).a.[liste]");
+  });
+});
+
+// ─── suggestRenames ───────────────────────────────────────────────────────────
+
+describe("suggestRenames", () => {
+  test("returns non-empty suggestions for non-conforming name", () => {
+    const rule = makeRule({
+      separator: ".",
+      segments: [seg_nchars(null, null), seg_bounded(1, 99), seg_nchars(null, null)],
+    });
+    const suggestions = suggestRenames("20191002Mechanical Piping.ifc", rule);
+    expect(suggestions.length).toBeGreaterThan(0);
+    // Suggestions should differ from original
+    suggestions.forEach((s) => {
+      expect(s).not.toBe("20191002Mechanical Piping.ifc");
+    });
+  });
+
+  test("preserves file extension in suggestions", () => {
+    const rule = makeRule({
+      separator: "-",
+      segments: [seg_nchars(null, null), seg_list(["WIP"])],
+    });
+    const suggestions = suggestRenames("myfile.ifc", rule);
+    suggestions.forEach((s) => {
+      if (s.includes(".")) {
+        expect(s.endsWith(".ifc")).toBe(true);
+      }
+    });
+  });
+});
+
+// ─── Integration: checkFilesBeforeUpload ─────────────────────────────────────
+
+describe("checkFilesBeforeUpload (store level, simulated)", () => {
+  // Simulate the store logic directly
+  function check(files, rule) {
+    const { validateFiles } = require("./namingConventionService.js");
+    const violations = [];
+    const strictViolations = [];
+    const results = validateFiles(files, rule);
+    const invalid = results.filter((r) => !r.valid);
+    for (const inv of invalid) {
+      const entry = { ...inv, rule };
+      violations.push(entry);
+      if (rule.mode === RULE_MODES.STRICT) strictViolations.push(entry);
+    }
+    return {
+      pass: violations.length === 0,
+      violations,
+      strictViolations,
+      hasStrict: strictViolations.length > 0,
+    };
+  }
+
+  const softRule = makeRule({
+    separator: "-",
+    segments: [seg_nchars(2, 8), seg_list(["WIP", "VAL"])],
+    mode: RULE_MODES.SOFT,
+  });
+
+  const strictRule = makeRule({
+    separator: "-",
+    segments: [seg_nchars(2, 8), seg_list(["WIP", "VAL"])],
+    mode: RULE_MODES.STRICT,
+  });
+
+  const validFile = { name: "STRUCT-WIP.ifc" };
+  const invalidFile = { name: "random_file.ifc" };
+
+  test("all valid files pass", () => {
+    const result = check([validFile], softRule);
+    expect(result.pass).toBe(true);
+    expect(result.violations).toHaveLength(0);
+  });
+
+  test("soft violation does not trigger strict block", () => {
+    const result = check([invalidFile], softRule);
+    expect(result.pass).toBe(false);
+    expect(result.hasStrict).toBe(false);
+  });
+
+  test("strict violation triggers block", () => {
+    const result = check([invalidFile], strictRule);
+    expect(result.pass).toBe(false);
+    expect(result.hasStrict).toBe(true);
+    expect(result.strictViolations).toHaveLength(1);
+  });
+});
diff --git a/src/components/specific/files/files-manager/files-naming-template/namingConventionStore.js b/src/components/specific/files/files-manager/files-naming-template/namingConventionStore.js
new file mode 100644
index 000000000..0a78e2f90
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/namingConventionStore.js
@@ -0,0 +1,216 @@
+/**
+ * Naming Convention Store (Pinia)
+ * Manages naming rules state, CRUD, and folder associations.
+ *
+ * Assumes BIMData API base: https://api.bimdata.io
+ * Endpoints are mocked here — adapt to real platform-back routes when available.
+ */
+
+// import { defineStore } from "pinia";
+import { ref, computed } from "vue";
+import { validateFiles, buildHumanReadablePattern, RULE_MODES } from "./namingConventionService.js";
+
+// ─── Store ────────────────────────────────────────────────────────────────────
+
+// State
+const rules = ref([]); // NamingRule[]
+const customLists = ref([]); // CustomList[]
+const loading = ref(false);
+const error = ref(null);
+
+// ── Getters ──────────────────────────────────────────────────────────────
+
+const getRulesForFolder = computed(() => (folderId) => {
+  return rules.value.filter((r) => r.active && r.folder_ids?.includes(folderId));
+});
+
+const getRecursiveRulesForFolder = computed(() => (folder) => {
+  return rules.value.filter(
+    (r) => r.active && r.recursive && r.folder_ids?.some((fid) => isAncestorId(fid, folder)),
+  );
+});
+
+function isAncestorId(ancestorId, folder) {
+  // Walk up parent_id chain in current rules context
+  // In real usage, pass folder tree from GED store
+  let cur = folder;
+  while (cur?.parent_id) {
+    if (cur.parent_id === ancestorId) return true;
+    cur = { id: cur.parent_id, parent_id: null };
+  }
+  return false;
+}
+
+// All rules that apply to a folder (direct + recursive parents)
+const getEffectiveRulesForFolder = computed(() => (folder) => {
+  const direct = getRulesForFolder.value(folder.id);
+  const recursive = getRecursiveRulesForFolder.value(folder);
+  // Merge, deduplicate by id
+  const all = [...direct, ...recursive];
+  return all.filter((r, i) => all.findIndex((x) => x.id === r.id) === i);
+});
+
+// ── Actions ───────────────────────────────────────────────────────────────
+
+/**
+ * Load rules for a project from the API.
+ * Route: GET /cloud/:cloudPk/project/:projectPk/naming-rules
+ */
+async function fetchRules(cloudPk, projectPk, apiClient) {
+  loading.value = true;
+  error.value = null;
+  try {
+    // When platform-back implements this endpoint:
+    // const data = await apiClient.get(`/cloud/${cloudPk}/project/${projectPk}/naming-rules`);
+    // rules.value = data;
+
+    // For now: load from localStorage as dev stub
+    const key = `naming_rules_${projectPk}`;
+    const stored = localStorage.getItem(key);
+    rules.value = stored ? JSON.parse(stored) : [];
+  } catch (e) {
+    error.value = e.message;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * Persist rules to API.
+ * Route: POST /cloud/:cloudPk/project/:projectPk/naming-rules
+ */
+async function saveRule(cloudPk, projectPk, ruleData, apiClient) {
+  loading.value = true;
+  try {
+    const rule = {
+      id: ruleData.id || crypto.randomUUID(),
+      ...ruleData,
+      created_at: ruleData.created_at || new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      pattern: buildHumanReadablePattern(ruleData),
+      active: true,
+    };
+
+    const idx = rules.value.findIndex((r) => r.id === rule.id);
+    if (idx >= 0) {
+      rules.value[idx] = rule;
+    } else {
+      rules.value.push(rule);
+    }
+
+    // Stub: persist locally
+    localStorage.setItem(`naming_rules_${projectPk}`, JSON.stringify(rules.value));
+
+    return rule;
+  } catch (e) {
+    error.value = e.message;
+    throw e;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/**
+ * Delete a rule.
+ * Route: DELETE /cloud/:cloudPk/project/:projectPk/naming-rules/:id
+ */
+async function deleteRule(ruleId, projectPk) {
+  rules.value = rules.value.filter((r) => r.id !== ruleId);
+  localStorage.setItem(`naming_rules_${projectPk}`, JSON.stringify(rules.value));
+}
+
+/**
+ * Assign a rule to one or more folders.
+ */
+function assignRuleToFolder(ruleId, folderId) {
+  const rule = rules.value.find((r) => r.id === ruleId);
+  if (!rule) return;
+  if (!rule.folder_ids) rule.folder_ids = [];
+  if (!rule.folder_ids.includes(folderId)) {
+    rule.folder_ids.push(folderId);
+  }
+}
+
+function unassignRuleFromFolder(ruleId, folderId) {
+  const rule = rules.value.find((r) => r.id === ruleId);
+  if (!rule) return;
+  rule.folder_ids = (rule.folder_ids || []).filter((id) => id !== folderId);
+}
+
+// ── Custom Lists ──────────────────────────────────────────────────────────
+
+async function fetchCustomLists(projectPk) {
+  const key = `naming_lists_${projectPk}`;
+  const stored = localStorage.getItem(key);
+  customLists.value = stored ? JSON.parse(stored) : [];
+}
+
+function saveCustomList(projectPk, listData) {
+  const list = {
+    id: listData.id || crypto.randomUUID(),
+    ...listData,
+  };
+  const idx = customLists.value.findIndex((l) => l.id === list.id);
+  if (idx >= 0) {
+    customLists.value[idx] = list;
+  } else {
+    customLists.value.push(list);
+  }
+  localStorage.setItem(`naming_lists_${projectPk}`, JSON.stringify(customLists.value));
+  return list;
+}
+
+// ── File Validation ───────────────────────────────────────────────────────
+
+/**
+ * Check files before upload against rules of the target folder.
+ * Returns { pass: bool, violations: [], strictViolations: [] }
+ */
+function checkFilesBeforeUpload(files, targetFolder) {
+  const effectiveRules = getEffectiveRulesForFolder.value(targetFolder);
+  if (!effectiveRules.length) return { pass: true, violations: [], strictViolations: [] };
+
+  const violations = [];
+  const strictViolations = [];
+
+  for (const rule of effectiveRules) {
+    const results = validateFiles(files, rule);
+    const invalid = results.filter((r) => !r.valid);
+    for (const inv of invalid) {
+      const entry = { ...inv, rule };
+      violations.push(entry);
+      if (rule.mode === RULE_MODES.STRICT) {
+        strictViolations.push(entry);
+      }
+    }
+  }
+
+  return {
+    pass: violations.length === 0,
+    violations,
+    strictViolations,
+    hasStrict: strictViolations.length > 0,
+  };
+}
+
+export function useNamingConventionStore() {
+  return {
+    // State
+    rules,
+    customLists,
+    loading,
+    error,
+    // Getters
+    getRulesForFolder,
+    getEffectiveRulesForFolder,
+    // Actions
+    fetchRules,
+    saveRule,
+    deleteRule,
+    assignRuleToFolder,
+    unassignRuleFromFolder,
+    fetchCustomLists,
+    saveCustomList,
+    checkFilesBeforeUpload,
+  };
+}
diff --git a/src/components/specific/files/files-manager/files-naming-template/useNamingConvention.js b/src/components/specific/files/files-manager/files-naming-template/useNamingConvention.js
new file mode 100644
index 000000000..67ffe20ec
--- /dev/null
+++ b/src/components/specific/files/files-manager/files-naming-template/useNamingConvention.js
@@ -0,0 +1,183 @@
+/**
+ * useNamingConvention composable
+ *
+ * Plug this into any GED upload flow to intercept files, check naming rules,
+ * and surface the right UI (banner or blocking modal) depending on rule mode.
+ *
+ * Usage example (in a GED upload component):
+ *
+ *   const { checkBeforeUpload, violations, strictViolations, clearViolations } =
+ *     useNamingConvention(currentFolder);
+ *
+ *   // In your upload handler:
+ *   async function handleFiles(files) {
+ *     const result = await checkBeforeUpload(files);
+ *     if (result.blocked) return; // user must resolve strict violations first
+ *     // proceed with upload
+ *   }
+ */
+
+import { ref, computed } from "vue";
+import { useNamingConventionStore } from "./namingConventionStore.js";
+import { RULE_MODES } from "./namingConventionService.js";
+
+export function useNamingConvention(currentFolder) {
+  const store = useNamingConventionStore();
+
+  // ── State ────────────────────────────────────────────────────────────────
+
+  /** All violations (soft + strict) from the last check */
+  const violations = ref([]);
+
+  /** Only strict-mode violations */
+  const strictViolations = ref([]);
+
+  /** Whether we should show the soft banner */
+  const showBanner = ref(false);
+
+  /** Whether we should show the strict blocking modal */
+  const showModal = ref(false);
+
+  /** Files pending upload (held while modal is open) */
+  const pendingFiles = ref([]);
+
+  /** Resolve/reject callbacks for the async check flow */
+  let _resolve = null;
+  let _reject = null;
+
+  // ── Computed ─────────────────────────────────────────────────────────────
+
+  const hasSoftViolations = computed(
+    () => violations.value.filter((v) => v.rule?.mode === RULE_MODES.SOFT).length > 0,
+  );
+
+  const hasStrictViolations = computed(
+    () => violations.value.filter((v) => v.rule?.mode === RULE_MODES.STRICT).length > 0,
+  );
+
+  // ── Core check ───────────────────────────────────────────────────────────
+
+  /**
+   * Check files before upload.
+   *
+   * Returns a promise that resolves with the final file list to upload
+   * (potentially with renamed files substituted) or rejects if the user cancels.
+   *
+   * If no rules apply: resolves immediately with original files.
+   * If soft violations: shows banner, resolves immediately (upload proceeds).
+   * If strict violations: shows blocking modal, waits for user resolution.
+   */
+  async function checkBeforeUpload(files) {
+    const folder =
+      typeof currentFolder === "function"
+        ? currentFolder()
+        : (currentFolder?.value ?? currentFolder);
+
+    if (!folder) return { files, blocked: false };
+
+    const result = store.checkFilesBeforeUpload(files, folder);
+
+    // No violations → proceed
+    if (result.pass) return { files, blocked: false };
+
+    violations.value = result.violations;
+    strictViolations.value = result.strictViolations;
+
+    // Soft only → show banner, don't block
+    if (!result.hasStrict) {
+      showBanner.value = true;
+      return { files, blocked: false, hasSoftWarnings: true };
+    }
+
+    // Strict violations → block and wait for modal resolution
+    pendingFiles.value = [...files];
+    showModal.value = true;
+
+    return new Promise((resolve, reject) => {
+      _resolve = resolve;
+      _reject = reject;
+    });
+  }
+
+  // ── Modal callbacks ───────────────────────────────────────────────────────
+
+  /**
+   * Called when the user confirms renames in the strict modal.
+   * renames: Array of { original: File, newName: string }
+   */
+  function onModalConfirm(renames) {
+    showModal.value = false;
+
+    // Substitute renamed files in the pending list
+    const finalFiles = pendingFiles.value.map((file) => {
+      const rename = renames.find(
+        (r) => (r.original.name || r.original.file_name) === (file.name || file.file_name),
+      );
+      if (rename) {
+        // Create a new File with the new name (browser File API)
+        if (file instanceof File) {
+          return new File([file], rename.newName, { type: file.type });
+        }
+        // For API file objects (already uploaded), return a patch object
+        return { ...file, name: rename.newName, file_name: rename.newName };
+      }
+      return file;
+    });
+
+    clearViolations();
+    if (_resolve) {
+      _resolve({ files: finalFiles, blocked: false });
+      _resolve = null;
+    }
+  }
+
+  function onModalCancel() {
+    showModal.value = false;
+    pendingFiles.value = [];
+    clearViolations();
+    if (_reject) {
+      _reject(new Error("Upload cancelled by user (naming rule)"));
+      _reject = null;
+    }
+  }
+
+  // ── Banner callbacks ──────────────────────────────────────────────────────
+
+  function onBannerDismiss() {
+    showBanner.value = false;
+    clearViolations();
+  }
+
+  function onBannerApplyRenames(renames) {
+    showBanner.value = false;
+    // Emit for parent to handle API rename calls
+    return renames;
+  }
+
+  // ── Helpers ───────────────────────────────────────────────────────────────
+
+  function clearViolations() {
+    violations.value = [];
+    strictViolations.value = [];
+  }
+
+  return {
+    // State
+    violations,
+    strictViolations,
+    showBanner,
+    showModal,
+    hasSoftViolations,
+    hasStrictViolations,
+    // Core
+    checkBeforeUpload,
+    // Modal
+    onModalConfirm,
+    onModalCancel,
+    // Banner
+    onBannerDismiss,
+    onBannerApplyRenames,
+    // Utils
+    clearViolations,
+  };
+}
diff --git a/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.vue b/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.vue
index 132936db2..10ef15a8e 100644
--- a/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.vue
+++ b/src/components/specific/files/files-table/file-actions-cell/FileActionsCell.vue
@@ -14,27 +14,22 @@
       <BIMDataIconEllipsis size="l" />
     </BIMDataButton>
 
-    <BIMDataMenu
-      ref="menu"
-      class="file-actions-cell__menu"
-      v-show="isOpen"
-      :menuItems="menuItems"
-    >
+    <BIMDataMenu ref="menu" class="file-actions-cell__menu" v-show="isOpen" :menuItems="menuItems">
       <template #item="{ item }">
-          <BIMDataButton
-            :data-test-id="item.dataTestId"
-            width="100%"
-            :color="item.color"
-            ghost
-            squared
-            :disabled="item.disabled"
-          >
-            <div v-if="item.iconComponent" class="m-r-12">
-              <component :is="item.iconComponent" width="16px" height="14px" />
-            </div>
-            <BIMDataIcon v-else :name="item.icon" size="xs" margin="0 12px 0 0" />
-            <span>{{ $t(item.text) }}</span>
-          </BIMDataButton>
+        <BIMDataButton
+          :data-test-id="item.dataTestId"
+          width="100%"
+          :color="item.color"
+          ghost
+          squared
+          :disabled="item.disabled"
+        >
+          <div v-if="item.iconComponent" class="m-r-12">
+            <component :is="item.iconComponent" width="16px" height="14px" />
+          </div>
+          <BIMDataIcon v-else :name="item.icon" size="xs" margin="0 12px 0 0" />
+          <span>{{ $t(item.text) }}</span>
+        </BIMDataButton>
       </template>
     </BIMDataMenu>
   </div>
@@ -50,7 +45,7 @@ import {
   isConvertibleToPhotosphere,
   isModel,
   isViewable,
-  openInViewer
+  openInViewer,
 } from "../../../../../utils/models.js";
 import { dropdownPositioner } from "../../../../../utils/positioner.js";
 // Components
@@ -60,19 +55,19 @@ import SetAsModelIcon from "../../../../../components/images/SetAsModelIcon.vue"
 export default {
   props: {
     parent: {
-      type: Object
+      type: Object,
     },
     project: {
       type: Object,
-      required: true
+      required: true,
     },
     file: {
       type: Object,
-      required: true
+      required: true,
     },
     loading: {
       type: Boolean,
-      required: true
+      required: true,
     },
   },
   emits: [
@@ -85,6 +80,7 @@ export default {
     "open-tag-manager",
     "open-versioning-manager",
     "open-visa-manager",
+    "open-naming-template",
     "remove-model",
     "update",
   ],
@@ -129,7 +125,7 @@ export default {
             iconComponent: SetAsModelIcon,
             text: "FileActionsCell.createModelButtonText",
             disabled: !hasAdminPerm(props.project, props.file),
-            action: () => onClick("create-model")
+            action: () => onClick("create-model"),
           });
         } else {
           menuItems.value.push({
@@ -147,7 +143,7 @@ export default {
           iconComponent: SetAsModelIcon,
           text: "FileActionsCell.createPhotosphereButtonText",
           disabled: !hasAdminPerm(props.project, props.file),
-          action: () => onClick("create-photosphere")
+          action: () => onClick("create-photosphere"),
         });
       }
 
@@ -169,6 +165,16 @@ export default {
       if (isFolder(props.file) && isProjectAdmin(props.project)) {
         menuItems.value.push({
           key: 7,
+          icon: "eye",
+          text: "FileActionsCell.manageNamingTemplateButtonText",
+          action: () => onClick("open-naming-template", props.file),
+          divider: true,
+        });
+      }
+
+      if (isFolder(props.file) && isProjectAdmin(props.project)) {
+        menuItems.value.push({
+          key: 8,
           icon: "key",
           text: "FileActionsCell.manageAccessButtonText",
           action: () => onClick("manage-access"),
@@ -178,21 +184,21 @@ export default {
 
       if (!isFolder(props.file) && hasAdminPerm(props.project, props.file)) {
         menuItems.value.push({
-          key: 8,
+          key: 9,
           icon: "visa",
           text: "FileActionsCell.visaButtonText",
           action: () => onClick("open-visa-manager"),
           dataTestId: "btn-open-visa-manager",
         });
         menuItems.value.push({
-          key: 9,
+          key: 10,
           icon: "tag",
           text: "FileActionsCell.addTagsButtonText",
           action: () => onClick("open-tag-manager"),
           dataTestId: "btn-open-tag-manager",
         });
         menuItems.value.push({
-          key: 10,
+          key: 11,
           icon: "versioning",
           text: "FileActionsCell.versioningButtonText",
           action: () => onClick("open-versioning-manager"),
@@ -202,7 +208,7 @@ export default {
       }
 
       menuItems.value.push({
-        key: 11,
+        key: 12,
         icon: "delete",
         text: "t.delete",
         color: "high",
@@ -214,10 +220,7 @@ export default {
 
       nextTick(() => {
         if (props.parent) {
-          menu.value.$el.style.top = dropdownPositioner(
-            props.parent.$el,
-            menu.value.$el
-          );
+          menu.value.$el.style.top = dropdownPositioner(props.parent.$el, menu.value.$el);
         }
       });
     };
@@ -230,9 +233,9 @@ export default {
       });
     };
 
-    const onClick = event => {
+    const onClick = (event, payload) => {
       closeMenu();
-      emit(event);
+      emit(event, payload);
     };
 
     return {
@@ -242,9 +245,9 @@ export default {
       menuItems,
       // Methods
       closeMenu,
-      openMenu
+      openMenu,
     };
-  }
+  },
 };
 </script>
 
diff --git a/src/components/specific/files/folder-table/FoldersTable.vue b/src/components/specific/files/folder-table/FoldersTable.vue
index 76c4e7a55..51d063128 100644
--- a/src/components/specific/files/folder-table/FoldersTable.vue
+++ b/src/components/specific/files/folder-table/FoldersTable.vue
@@ -99,6 +99,7 @@
         @open-tag-manager="$emit('open-tag-manager', file)"
         @open-versioning-manager="$emit('open-versioning-manager', file)"
         @open-visa-manager="$emit('open-visa-manager', file)"
+        @open-naming-template="$emit('open-naming-template', file)"
         @remove-model="$emit('remove-model', file)"
         @update="nameEditMode[file.id] = true"
       />
@@ -175,6 +176,7 @@ export default {
     "open-tag-manager",
     "open-versioning-manager",
     "open-visa-manager",
+    "open-naming-template",
     "remove-model",
     "row-drop",
     "selection-changed",
diff --git a/src/i18n/lang/fr.json b/src/i18n/lang/fr.json
index b3128d827..81dab79e4 100644
--- a/src/i18n/lang/fr.json
+++ b/src/i18n/lang/fr.json
@@ -185,6 +185,7 @@
     "addVersionButtonText": "Ajouter une version",
     "createModelButtonText": "Définir comme modèle",
     "createPhotosphereButtonText": "Définir comme photosphère",
+    "manageNamingTemplateButtonText": "Convention de nommage",
     "manageAccessButtonText": "Gérer les accès",
     "openViewerButtonText": "Ouvrir",
     "previewModelButtonText": "Prévisualiser",
@@ -216,7 +217,8 @@
     "folderImport": "Importer un dossier",
     "foldersTab": "Dossiers",
     "filesTab": "Tous les fichiers",
-    "visasTab": "Mes visas"
+    "visasTab": "Mes visas",
+    "namingConvention": "Convention de nommage"
   },
   "FilesManagerOnboarding": {
     "text": "Téléverser votre premier fichier",
@@ -989,4 +991,4 @@
     "title": "Suppression de {visasCount} visas",
     "message": "Vous êtes sur le point de supprimer les visas sur les fichiers suivants :"
   }
-}
\ No newline at end of file
+}