feat(comments): add comment/ticket system across all entity pages

Add CommentSection component for inline comments on entity detail pages (machines, pieces, composants, products, categories, skeleton types). Add dedicated /comments page with filters, pagination and clickable links. Add unresolved count badge on avatar and in profile dropdown. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
fix(constructeurs): improve search filtering and duplicate prevention
2026-03-02 14:06:06 +01:00 · 2026-03-02 14:05:54 +01:00 · 2026-03-02 10:02:13 +01:00 · 2026-03-02 09:56:51 +01:00 · 2026-03-02 09:42:05 +01:00 · 2026-02-26 13:36:42 +01:00
53 changed files with 1890 additions and 530 deletions
--- a/app/components/CommentSection.vue
+++ b/app/components/CommentSection.vue
@@ -0,0 +1,212 @@
+<template>
+  <div class="space-y-4">
+    <div class="flex items-center justify-between">
+      <h3 class="text-lg font-semibold flex items-center gap-2">
+        <IconLucideMessageSquare class="w-5 h-5" />
+        Commentaires
+        <span v-if="openComments.length" class="badge badge-warning badge-sm">
+          {{ openComments.length }}
+        </span>
+      </h3>
+      <button
+        v-if="showResolved && resolvedComments.length"
+        type="button"
+        class="btn btn-ghost btn-xs"
+        @click="showResolvedList = !showResolvedList"
+      >
+        {{ showResolvedList ? 'Masquer résolus' : `Voir résolus (${resolvedComments.length})` }}
+      </button>
+    </div>
+
+    <!-- Formulaire d'ajout -->
+    <div class="flex gap-2">
+      <textarea
+        v-model="newContent"
+        class="textarea textarea-bordered flex-1 text-sm"
+        rows="2"
+        placeholder="Ajouter un commentaire..."
+        :disabled="submitting"
+        @keydown.ctrl.enter="handleSubmit"
+      />
+      <button
+        type="button"
+        class="btn btn-primary btn-sm self-end"
+        :disabled="!newContent.trim() || submitting"
+        @click="handleSubmit"
+      >
+        <span v-if="submitting" class="loading loading-spinner loading-xs" />
+        <IconLucideSend v-else class="w-4 h-4" />
+      </button>
+    </div>
+
+    <!-- Liste des commentaires ouverts -->
+    <div v-if="loadingComments" class="flex justify-center py-4">
+      <span class="loading loading-spinner loading-sm" />
+    </div>
+
+    <div v-else-if="openComments.length === 0" class="text-sm text-base-content/50 py-2">
+      Aucun commentaire ouvert.
+    </div>
+
+    <div v-else class="space-y-3">
+      <div
+        v-for="comment in openComments"
+        :key="comment.id"
+        class="bg-base-200 rounded-lg p-3 space-y-2"
+      >
+        <div class="flex items-start justify-between gap-2">
+          <div class="flex-1">
+            <p class="text-sm whitespace-pre-wrap">{{ comment.content }}</p>
+          </div>
+        </div>
+        <div class="flex items-center justify-between text-xs text-base-content/60">
+          <span>
+            {{ comment.authorName }} — {{ formatCommentDate(comment.createdAt) }}
+          </span>
+          <div v-if="canEdit" class="flex gap-1">
+            <button
+              type="button"
+              class="btn btn-success btn-xs gap-1"
+              :disabled="loading"
+              @click="handleResolve(comment.id)"
+            >
+              <IconLucideCheck class="w-3 h-3" />
+              Résoudre
+            </button>
+            <button
+              type="button"
+              class="btn btn-ghost btn-xs text-error"
+              :disabled="loading"
+              @click="handleDelete(comment.id)"
+            >
+              <IconLucideTrash2 class="w-3 h-3" />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Commentaires résolus -->
+    <div v-if="showResolvedList && resolvedComments.length" class="space-y-2">
+      <div class="divider text-xs text-base-content/40">
+        Résolus
+      </div>
+      <div
+        v-for="comment in resolvedComments"
+        :key="comment.id"
+        class="bg-base-200/50 rounded-lg p-3 opacity-60 space-y-1"
+      >
+        <p class="text-sm whitespace-pre-wrap">{{ comment.content }}</p>
+        <div class="flex items-center justify-between text-xs text-base-content/50">
+          <span>{{ comment.authorName }} — {{ formatCommentDate(comment.createdAt) }}</span>
+          <span v-if="comment.resolvedByName">
+            Résolu par {{ comment.resolvedByName }}
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useComments, type Comment } from '~/composables/useComments'
+import { usePermissions } from '~/composables/usePermissions'
+import IconLucideMessageSquare from '~icons/lucide/message-square'
+import IconLucideSend from '~icons/lucide/send'
+import IconLucideCheck from '~icons/lucide/check'
+import IconLucideTrash2 from '~icons/lucide/trash-2'
+
+const props = defineProps<{
+  entityType: string
+  entityId: string
+  entityName?: string
+  showResolved?: boolean
+}>()
+
+const { canEdit } = usePermissions()
+const {
+  loading,
+  fetchComments,
+  createComment,
+  resolveComment,
+  deleteComment,
+} = useComments()
+
+const comments = ref<Comment[]>([])
+const newContent = ref('')
+const submitting = ref(false)
+const loadingComments = ref(false)
+const showResolvedList = ref(false)
+
+const openComments = computed(() =>
+  comments.value.filter(c => c.status === 'open'),
+)
+
+const resolvedComments = computed(() =>
+  comments.value.filter(c => c.status === 'resolved'),
+)
+
+const formatCommentDate = (dateStr: string): string => {
+  const date = new Date(dateStr)
+  if (Number.isNaN(date.getTime())) return '—'
+  return new Intl.DateTimeFormat('fr-FR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date)
+}
+
+const loadComments = async () => {
+  loadingComments.value = true
+  const [openResult, resolvedResult] = await Promise.all([
+    fetchComments(props.entityType, props.entityId, 'open'),
+    props.showResolved
+      ? fetchComments(props.entityType, props.entityId, 'resolved')
+      : Promise.resolve({ success: true, data: [] as Comment[] }),
+  ])
+  const open = openResult.success ? (openResult.data ?? []) : []
+  const resolved = resolvedResult.success ? (resolvedResult.data ?? []) : []
+  comments.value = [...open, ...resolved]
+  loadingComments.value = false
+}
+
+const handleSubmit = async () => {
+  const content = newContent.value.trim()
+  if (!content) return
+  submitting.value = true
+  const result = await createComment(
+    props.entityType,
+    props.entityId,
+    content,
+    props.entityName,
+  )
+  submitting.value = false
+  if (result.success) {
+    newContent.value = ''
+    await loadComments()
+  }
+}
+
+const handleResolve = async (commentId: string) => {
+  const result = await resolveComment(commentId)
+  if (result.success) {
+    await loadComments()
+  }
+}
+
+const handleDelete = async (commentId: string) => {
+  const result = await deleteComment(commentId)
+  if (result.success) {
+    comments.value = comments.value.filter(c => c.id !== commentId)
+  }
+}
+
+onMounted(() => {
+  if (props.entityId) {
+    loadComments()
+  }
+})
+</script>
--- a/app/components/ConstructeurSelect.vue
+++ b/app/components/ConstructeurSelect.vue
@@ -20,16 +20,16 @@
        </button>
        <div
          v-if="openDropdown"
-          class="absolute z-20 mt-1 w-full max-h-48 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg flex flex-col"
+          class="absolute z-20 mt-1 w-full max-h-60 overflow-y-auto bg-base-100 border border-base-200 rounded-box shadow-lg flex flex-col"
        >
          <div
-            v-if="options.length === 0"
+            v-if="filteredOptions.length === 0"
            class="px-3 py-2 text-xs text-gray-500"
          >
            Aucun fournisseur trouvé
          </div>
          <button
-            v-for="option in options"
+            v-for="option in filteredOptions"
            :key="option.id"
            type="button"
            class="w-full text-left px-3 py-2 hover:bg-base-200 focus:bg-base-200 focus:outline-none"
@@ -164,8 +164,7 @@ const openCreateModal = ref(false)
 const creating = ref(false)
 const options = ref<ConstructeurSummary[]>([])
 const selectedIds = ref<string[]>([])
-let searchTimeout: ReturnType<typeof setTimeout> | null = null
-let lastSearchTerm = ''
+

 const uniqueOptions = (items: ConstructeurSummary[] = []) => {
  const seen = new Map<string, ConstructeurSummary>()
@@ -182,32 +181,22 @@ const normalizedInitialOptions = computed(() =>
 )

 const applyOptions = (items: ConstructeurSummary[] = []) => {
-  const normalized = uniqueOptions([
+  options.value = uniqueOptions([
    ...normalizedInitialOptions.value,
    ...items,
  ])
-  const limited = normalized.slice(0, 10)
-
-  selectedIds.value.forEach((id) => {
-    if (!limited.some((item) => item.id === id)) {
-      const match =
-        normalized.find((item) => item.id === id) ||
-        constructeurs.value.find((item) => item.id === id)
-      if (match) {
-        if (limited.length >= 10) {
-          limited.pop()
-        }
-        limited.unshift(match)
-      }
-    }
-  })
-
-  options.value = uniqueOptions([
-    ...normalizedInitialOptions.value,
-    ...limited,
-  ])
 }

+const filteredOptions = computed(() => {
+  const term = searchTerm.value.trim().toLowerCase()
+  if (!term) return options.value
+  return options.value.filter((option) =>
+    (option.name ?? '').toLowerCase().includes(term)
+    || (option.email && option.email.toLowerCase().includes(term))
+    || (option.phone && option.phone.toLowerCase().includes(term))
+  )
+})
+
 const createForm = ref({
  name: '',
  email: '',
@@ -257,46 +246,20 @@ const extractDataArray = (data: unknown): ConstructeurSummary[] => {
 }

 const ensureOptionsLoaded = async (force = false) => {
-  if (!force && !searchTerm.value && constructeurs.value.length) {
+  if (!force && constructeurs.value.length) {
    applyOptions(constructeurs.value as ConstructeurSummary[])
    return
  }

-  if (!force && searchTerm.value === lastSearchTerm && options.value.length) {
-    return
-  }
-
-  if (options.value.length && !force) {
-    return
-  }
-
-  const result = await searchConstructeurs(searchTerm.value)
+  const result = await searchConstructeurs('')
  if (result.success) {
    applyOptions(extractDataArray(result.data))
-    lastSearchTerm = searchTerm.value
  }
 }

 const onSearch = () => {
  openDropdown.value = true
-  if (searchTimeout) {
-    clearTimeout(searchTimeout)
-  }
-  searchTimeout = setTimeout(async () => {
-    if (!searchTerm.value && constructeurs.value.length) {
-      applyOptions(constructeurs.value as ConstructeurSummary[])
-      lastSearchTerm = ''
-      return
-    }
-    if (searchTerm.value === lastSearchTerm) {
-      return
-    }
-    const result = await searchConstructeurs(searchTerm.value)
-    if (result.success) {
-      applyOptions(extractDataArray(result.data))
-      lastSearchTerm = searchTerm.value
-    }
-  }, 250)
+  ensureOptionsLoaded()
 }

 const toggleOption = (option: ConstructeurSummary) => {
@@ -319,9 +282,19 @@ const closeCreateModal = () => {
 }

 const handleCreate = async () => {
+  const trimmedName = createForm.value.name.trim()
+  const duplicate = options.value.find(
+    (o) => (o.name ?? '').toLowerCase() === trimmedName.toLowerCase(),
+  )
+  if (duplicate) {
+    emitSelection([...selectedIds.value, duplicate.id])
+    closeCreateModal()
+    return
+  }
+
  creating.value = true
  const payload: { name: string; email?: string; phone?: string } = {
-    name: createForm.value.name,
+    name: trimmedName,
  }
  if (createForm.value.email) {
    payload.email = createForm.value.email
@@ -383,9 +356,6 @@ watch(
  constructeurs,
  (list) => {
    applyOptions((list as ConstructeurSummary[]) || [])
-    if (!searchTerm.value) {
-      lastSearchTerm = ''
-    }
  },
  { immediate: true },
 )
@@ -405,9 +375,6 @@ onMounted(() => {

 onBeforeUnmount(() => {
  window.removeEventListener('click', clickHandler)
-  if (searchTimeout) {
-    clearTimeout(searchTimeout)
-  }
 })

 watch(
--- a/app/components/CustomFieldsDisplay.vue
+++ b/app/components/CustomFieldsDisplay.vue
@@ -55,16 +55,16 @@
        </select>

        <!-- Champ de type BOOLEAN -->
-        <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+        <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
          <input
            v-model="fieldValues[field.id]"
            type="checkbox"
-            class="checkbox checkbox-sm"
+            class="toggle toggle-primary toggle-sm"
            :checked="fieldValues[field.id] === 'true'"
            @change="updateCustomFieldValue(field.id)"
          >
-          <span class="text-sm">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
-        </div>
+          <span class="text-sm" :class="fieldValues[field.id] === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ fieldValues[field.id] === 'true' ? 'Oui' : 'Non' }}</span>
+        </label>

        <!-- Champ de type DATE -->
        <input
--- a/app/components/layout/AppNavbar.vue
+++ b/app/components/layout/AppNavbar.vue
@@ -65,6 +65,9 @@
                    :class="childLinkClass(child)"
                  >
                    {{ child.label }}
+                    <span v-if="child.to === '/comments' && unresolvedCount > 0" class="badge badge-warning badge-xs ml-1">
+                      {{ unresolvedCount }}
+                    </span>
                  </NuxtLink>
                </li>
              </ul>
@@ -142,6 +145,9 @@
                  :class="childLinkClass(child)"
                >
                  {{ child.label }}
+                  <span v-if="child.to === '/comments' && unresolvedCount > 0" class="badge badge-warning badge-xs ml-1">
+                    {{ unresolvedCount }}
+                  </span>
                </NuxtLink>
              </li>
            </ul>
@@ -166,8 +172,14 @@
            <div
              tabindex="0"
              role="button"
-              class="btn btn-ghost btn-circle avatar placeholder"
+              class="btn btn-ghost btn-circle avatar placeholder indicator"
            >
+              <span
+                v-if="unresolvedCount > 0"
+                class="indicator-item badge badge-warning badge-xs"
+              >
+                {{ unresolvedCount }}
+              </span>
              <div
                class="bg-secondary text-secondary-content rounded-full w-10 h-10 grid place-items-center"
              >
@@ -185,11 +197,21 @@
              <li class="px-2 py-1 text-sm text-base-content/70">
                Connecté en tant que<br />
                <span class="font-semibold text-base-content">{{ activeProfileLabel }}</span>
+                <span class="badge badge-sm" :class="roleBadgeClass">{{ roleLabel }}</span>
+              </li>
+              <li v-if="isAdmin">
+                <NuxtLink to="/admin" class="justify-between">
+                  Administration
+                  <IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
+                </NuxtLink>
              </li>
              <li>
-                <NuxtLink to="/profiles/manage" class="justify-between">
-                  Gestion des profils
-                  <IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
+                <NuxtLink to="/comments" class="justify-between">
+                  Commentaires
+                  <span v-if="unresolvedCount > 0" class="badge badge-warning badge-xs">
+                    {{ unresolvedCount }}
+                  </span>
+                  <IconLucideChevronRight v-else class="w-4 h-4" aria-hidden="true" />
                </NuxtLink>
              </li>
              <li>
@@ -211,10 +233,12 @@
 </template>

 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
 import { useRoute } from '#imports'
 import { useNavDropdown } from '~/composables/useNavDropdown'
+import { usePermissions } from '~/composables/usePermissions'
 import { useProfileSession } from '~/composables/useProfileSession'
+import { useComments } from '~/composables/useComments'
 import IconLucideMenu from '~icons/lucide/menu'
 import IconLucideSettings from '~icons/lucide/settings'
 import IconLucideChevronRight from '~icons/lucide/chevron-right'
@@ -275,11 +299,12 @@ const navGroups: NavGroup[] = [
  {
    id: 'resources',
    label: 'Ressources liées',
-    activePaths: ['/sites', '/documents', '/constructeurs', '/activity-log'],
+    activePaths: ['/sites', '/documents', '/constructeurs', '/activity-log', '/comments'],
    children: [
      { to: '/sites', label: 'Sites' },
      { to: '/documents', label: 'Documents' },
      { to: '/constructeurs', label: 'Fournisseurs' },
+      { to: '/comments', label: 'Commentaires' },
      { to: '/activity-log', label: 'Journal d\'activité' },
    ],
  },
@@ -288,6 +313,25 @@ const navGroups: NavGroup[] = [
 const route = useRoute()
 const { openDropdown, setDropdown, scheduleDropdownClose, toggleDropdown } = useNavDropdown()
 const { activeProfile } = useProfileSession()
+const { isAdmin, canEdit } = usePermissions()
+const { fetchUnresolvedCount } = useComments()
+
+const unresolvedCount = ref(0)
+let pollInterval: ReturnType<typeof setInterval> | null = null
+
+const refreshUnresolvedCount = async () => {
+  if (!activeProfile.value) return
+  unresolvedCount.value = await fetchUnresolvedCount()
+}
+
+onMounted(() => {
+  refreshUnresolvedCount()
+  pollInterval = setInterval(refreshUnresolvedCount, 60_000)
+})
+
+onBeforeUnmount(() => {
+  if (pollInterval) clearInterval(pollInterval)
+})

 const isActive = (path: string) => {
  if (path === '/') {
@@ -318,6 +362,18 @@ const childLinkClass = (child: NavLink) => {
    : 'text-base-content hover:bg-primary/10 hover:text-primary'
 }

+const roleLabel = computed(() => {
+  if (isAdmin.value) return 'Admin'
+  if (canEdit.value) return 'Gestionnaire'
+  return 'Lecteur'
+})
+
+const roleBadgeClass = computed(() => {
+  if (isAdmin.value) return 'badge-error'
+  if (canEdit.value) return 'badge-warning'
+  return 'badge-info'
+})
+
 const activeProfileLabel = computed(() => {
  if (!activeProfile.value) {
    return 'Profil inconnu'
--- a/app/components/machine/MachineDetailHeader.vue
+++ b/app/components/machine/MachineDetailHeader.vue
@@ -60,6 +60,8 @@ import IconLucideSquarePen from '~icons/lucide/square-pen'
 import IconLucideEye from '~icons/lucide/eye'
 import IconLucidePrinter from '~icons/lucide/printer'

+const { canEdit } = usePermissions()
+
 defineProps<{
  title: string
  isDetailsView: boolean
--- a/app/components/machine/MachineInfoCard.vue
+++ b/app/components/machine/MachineInfoCard.vue
@@ -120,17 +120,16 @@
                  {{ option }}
                </option>
              </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                <input
-                  :value="field.value ?? ''"
                  type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm"
                  :checked="String(field.value).toLowerCase() === 'true'"
                  @change="$emit('set-custom-field-value', field, ($event.target as HTMLInputElement).checked ? 'true' : 'false')"
                  @blur="$emit('update-custom-field', field)"
-                />
-                <span class="text-sm">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                >
+                <span class="text-sm" :class="String(field.value).toLowerCase() === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ String(field.value).toLowerCase() === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
              <input
                v-else-if="field.type === 'date'"
                :value="field.value ?? ''"
--- a/app/components/model-types/ManagementView.vue
+++ b/app/components/model-types/ManagementView.vue
@@ -16,6 +16,7 @@
      :dir="dir"
      :loading="loading"
      :show-category-tabs="allowCategorySwitch"
+      :can-edit="canEdit"
      @update:category="onCategoryChange"
      @update:search="onSearchInput"
      @update:sort="onSortChange"
@@ -30,6 +31,7 @@
      :limit="limit"
      :offset="offset"
      :category="selectedCategory"
+      :can-edit="canEdit"
      @related="openRelatedModal"
      @edit="openEditPage"
      @delete="confirmDelete"
@@ -169,6 +171,7 @@ let activeController: AbortController | null = null;
 const router = useRouter();
 const { showError, showSuccess } = useToast();
 const { get } = useApi();
+const { canEdit } = usePermissions();

 const headingText = computed(() => props.heading);
 const descriptionText = computed(
--- a/app/components/model-types/ModelTypeForm.vue
+++ b/app/components/model-types/ModelTypeForm.vue
@@ -29,7 +29,7 @@
          class="select select-bordered w-full"
          name="category"
          required
-          :disabled="lockCategory"
+          :disabled="lockCategory || isReadonly"
        >
          <option value="COMPONENT">Composants</option>
          <option value="PIECE">Pièces</option>
@@ -134,7 +134,7 @@
      <button type="button" class="btn btn-ghost" :disabled="saving" @click="emit('cancel')">
        Annuler
      </button>
-      <button type="submit" class="btn btn-primary" :disabled="isSubmitDisabled">
+      <button v-if="!isReadonly" type="submit" class="btn btn-primary" :disabled="isSubmitDisabled">
        <span v-if="saving" class="loading loading-spinner loading-sm" aria-hidden="true"></span>
        {{ submitLabel }}
      </button>
@@ -176,6 +176,7 @@ const props = withDefaults(defineProps<{
  disableSubmitMessage?: string
  restrictedMode?: boolean
  restrictedModeMessage?: string
+  readonly?: boolean
 }>(), {
  initialData: null,
  saving: false,
@@ -187,6 +188,7 @@ const props = withDefaults(defineProps<{
  disableSubmitMessage: '',
  restrictedMode: false,
  restrictedModeMessage: '',
+  readonly: false,
 })

 const emit = defineEmits<{
@@ -209,7 +211,8 @@ const disableSubmitMessage = computed(() =>
    ? props.disableSubmitMessage
    : 'Cette catégorie ne peut pas être modifiée car des éléments y sont déjà liés.',
 )
-const restrictedMode = computed(() => props.restrictedMode === true)
+const isReadonly = computed(() => props.readonly === true)
+const restrictedMode = computed(() => props.restrictedMode === true || isReadonly.value)
 const restrictedModeMessage = computed(() =>
  (props.restrictedModeMessage && props.restrictedModeMessage.trim())
    ? props.restrictedModeMessage
@@ -291,7 +294,7 @@ const resetForm = () => {
 }

 const submitLabel = computed(() => (props.mode === 'edit' ? 'Enregistrer' : 'Créer'))
-const isSubmitDisabled = computed(() => saving.value || structureLoading.value || disableSubmit.value)
+const isSubmitDisabled = computed(() => saving.value || structureLoading.value || disableSubmit.value || isReadonly.value)

 const validate = () => {
  errors.name = undefined
@@ -308,6 +311,7 @@ const validate = () => {
 }

 const handleSubmit = () => {
+  if (isReadonly.value) return
  if (!validate()) {
    return
  }
--- a/app/components/model-types/Table.vue
+++ b/app/components/model-types/Table.vue
@@ -49,7 +49,7 @@
                  Liés
                </button>
                <button
-                  v-if="showConvertButton"
+                  v-if="canEdit && showConvertButton"
                  type="button"
                  class="btn btn-ghost btn-sm text-warning"
                  @click="emit('convert', item)"
@@ -60,7 +60,7 @@
                <button type="button" class="btn btn-ghost btn-sm" @click="emit('edit', item)">
                  Éditer
                </button>
-                <button type="button" class="btn btn-ghost btn-sm text-error" @click="emit('delete', item)">
+                <button v-if="canEdit" type="button" class="btn btn-ghost btn-sm text-error" @click="emit('delete', item)">
                  Supprimer
                </button>
              </td>
@@ -88,7 +88,7 @@
              Liés
            </button>
            <button
-              v-if="showConvertButton"
+              v-if="canEdit && showConvertButton"
              type="button"
              class="btn btn-ghost btn-sm text-warning"
              @click="emit('convert', item)"
@@ -99,7 +99,7 @@
            <button type="button" class="btn btn-ghost btn-sm" @click="emit('edit', item)">
              Éditer
            </button>
-            <button type="button" class="btn btn-ghost btn-sm text-error" @click="emit('delete', item)">
+            <button v-if="canEdit" type="button" class="btn btn-ghost btn-sm text-error" @click="emit('delete', item)">
              Supprimer
            </button>
          </footer>
@@ -146,6 +146,7 @@ const props = defineProps<{
  limit: number;
  offset: number;
  category?: ModelCategory;
+  canEdit?: boolean;
 }>();

 const emit = defineEmits<{
--- a/app/components/model-types/Toolbar.vue
+++ b/app/components/model-types/Toolbar.vue
@@ -83,13 +83,14 @@ import type { ModelCategory } from '~/services/modelTypes';
 type SortField = 'name' | 'createdAt';
 type SortDirection = 'asc' | 'desc';

-const props = defineProps<{ 
+const props = defineProps<{
  category: ModelCategory;
  search: string;
  sort: SortField;
  dir: SortDirection;
  loading?: boolean;
  showCategoryTabs?: boolean;
+  canEdit?: boolean;
 }>();

 const emit = defineEmits<{
--- a/app/components/sites/SiteCard.vue
+++ b/app/components/sites/SiteCard.vue
@@ -37,9 +37,9 @@

      <div class="card-actions justify-end mt-4">
        <button class="btn btn-sm btn-outline" @click="emit('edit', site)">
-          Modifier
+          {{ canEdit ? 'Modifier' : 'Consulter' }}
        </button>
-        <button class="btn btn-sm btn-error" @click="emit('delete', site)">
+        <button v-if="canEdit" class="btn btn-sm btn-error" @click="emit('delete', site)">
          Supprimer
        </button>
      </div>
@@ -55,6 +55,8 @@ import IconLucidePhone from '~icons/lucide/phone'
 import IconLucideUser from '~icons/lucide/user'
 import { formatPhone } from '~/utils/formatters/phone'

+const { canEdit } = usePermissions()
+
 const props = defineProps({
  site: {
    type: Object,
--- a/app/components/sites/SiteContactFormFields.vue
+++ b/app/components/sites/SiteContactFormFields.vue
@@ -9,11 +9,12 @@
        type="text"
        placeholder="Nom et prénom"
        class="input input-bordered"
+        :disabled="disabled"
        required
      />
    </div>

-    <FieldPhone v-model="contactPhone" required />
+    <FieldPhone v-model="contactPhone" :disabled="disabled" required />

    <div class="form-control">
      <label class="label">
@@ -24,6 +25,7 @@
        type="text"
        placeholder="Adresse complète"
        class="input input-bordered"
+        :disabled="disabled"
        required
      />
    </div>
@@ -38,6 +40,7 @@
          type="text"
          placeholder="Code postal"
          class="input input-bordered"
+          :disabled="disabled"
          required
        />
      </div>
@@ -51,6 +54,7 @@
          type="text"
          placeholder="Ville"
          class="input input-bordered"
+          :disabled="disabled"
          required
        />
      </div>
@@ -77,6 +81,10 @@ const props = defineProps({
    type: Object as PropType<SiteForm>,
    required: true,
  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
 })

 const form = toRef(props, 'form')
--- a/app/components/sites/SiteCreateModal.vue
+++ b/app/components/sites/SiteCreateModal.vue
@@ -12,17 +12,18 @@
            type="text"
            placeholder="Ex: Usine principale"
            class="input input-bordered"
+            :disabled="disabled"
            required
          />
        </div>

-        <SiteContactFormFields :form="siteRef" />
+        <SiteContactFormFields :form="siteRef" :disabled="disabled" />

        <div class="modal-action">
          <button type="button" class="btn" @click="emit('close')">
            Annuler
          </button>
-          <button type="submit" class="btn btn-primary">
+          <button type="submit" class="btn btn-primary" :disabled="disabled">
            Créer le site
          </button>
        </div>
@@ -53,6 +54,10 @@ const props = defineProps({
  site: {
    type: Object as PropType<SiteForm>,
    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
  }
 })

--- a/app/components/sites/SiteEditModal.vue
+++ b/app/components/sites/SiteEditModal.vue
@@ -2,7 +2,7 @@
  <div v-if="visible" class="modal modal-open">
    <div class="modal-box max-w-md">
      <h3 class="font-bold text-lg mb-4">
-        Modifier le site
+        {{ disabled ? 'Détails du site' : 'Modifier le site' }}
        <span v-if="siteName" class="block text-sm font-normal text-gray-500">{{ siteName }}</span>
      </h3>
      <form class="space-y-4" @submit.prevent="emit('submit')">
@@ -15,11 +15,12 @@
            type="text"
            placeholder="Nom du site"
            class="input input-bordered"
+            :disabled="disabled"
            required
          >
        </div>

-        <SiteContactFormFields :form="props.form" />
+        <SiteContactFormFields :form="props.form" :disabled="disabled" />

        <div class="border-t border-base-200 pt-4 space-y-4">
          <div class="flex items-center justify-between">
@@ -37,6 +38,7 @@
          </div>

          <DocumentUpload
+            v-if="!disabled"
            v-model="selectedFilesModel"
            title="Déposer vos fichiers"
            subtitle="Formats courants acceptés : PDF, JPG, PNG, DOCX..."
@@ -90,7 +92,7 @@
                  <button type="button" class="btn btn-ghost btn-xs" @click="emit('download-document', document)">
                    Télécharger
                  </button>
-                  <button type="button" class="btn btn-error btn-xs" @click="emit('remove-document', document.id)">
+                  <button v-if="!disabled" type="button" class="btn btn-error btn-xs" @click="emit('remove-document', document.id)">
                    Supprimer
                  </button>
                </div>
@@ -103,7 +105,7 @@
          <button type="button" class="btn" @click="emit('close')">
            Annuler
          </button>
-          <button type="submit" class="btn btn-primary" :disabled="uploadingDocuments">
+          <button type="submit" class="btn btn-primary" :disabled="disabled || uploadingDocuments">
            <span v-if="uploadingDocuments" class="loading loading-spinner loading-xs mr-2" />
            Enregistrer
          </button>
@@ -155,6 +157,10 @@ const props = defineProps({
  formatSize: {
    type: Function,
    required: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
  }
 })

--- a/app/composables/useAdminProfiles.ts
+++ b/app/composables/useAdminProfiles.ts
@@ -0,0 +1,80 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+
+export interface AdminProfile {
+  id: string
+  firstName: string
+  lastName: string
+  email: string | null
+  isActive: boolean
+  hasPassword: boolean
+  roles: string[]
+  createdAt: string
+  updatedAt: string
+}
+
+export function useAdminProfiles() {
+  const { get, post, put } = useApi()
+  const profiles = ref<AdminProfile[]>([])
+  const loading = ref(false)
+
+  const fetchAll = async () => {
+    loading.value = true
+    try {
+      const result = await get<AdminProfile[]>('/admin/profiles')
+      if (result.success && result.data) {
+        profiles.value = result.data
+      }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createProfile = async (data: {
+    firstName: string
+    lastName: string
+    email?: string
+    password?: string
+    role?: string
+  }) => {
+    const result = await post<AdminProfile>('/admin/profiles', data)
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  const updateRole = async (id: string, role: string) => {
+    const result = await put<AdminProfile>(`/admin/profiles/${id}/role`, { role })
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  const setPassword = async (id: string, password: string) => {
+    const result = await put<AdminProfile>(`/admin/profiles/${id}/password`, { password })
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  const deactivateProfile = async (id: string) => {
+    const result = await put<AdminProfile>(`/admin/profiles/${id}/deactivate`, {})
+    if (result.success) {
+      await fetchAll()
+    }
+    return result
+  }
+
+  return {
+    profiles,
+    loading,
+    fetchAll,
+    createProfile,
+    updateRole,
+    setPassword,
+    deactivateProfile,
+  }
+}
--- a/app/composables/useApi.ts
+++ b/app/composables/useApi.ts
@@ -66,7 +66,9 @@ export function useApi() {
          const text = await response.text().catch(() => '')
          errorData = text ? { message: text } : {}
        }
-        const errorMessage = (errorData.message as string) || `Erreur ${response.status}: ${response.statusText}`
+        const errorMessage = response.status === 403
+          ? 'Permissions insuffisantes pour cette action.'
+          : (errorData.message as string) || `Erreur ${response.status}: ${response.statusText}`
        showError(errorMessage)
        return { success: false, error: errorMessage, status: response.status }
      }
--- a/app/composables/useComments.ts
+++ b/app/composables/useComments.ts
@@ -0,0 +1,184 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+import { useToast } from './useToast'
+import { extractCollection } from '~/shared/utils/apiHelpers'
+
+export interface Comment {
+  id: string
+  content: string
+  entityType: string
+  entityId: string
+  entityName?: string | null
+  authorId: string
+  authorName: string
+  status: 'open' | 'resolved'
+  resolvedById?: string | null
+  resolvedByName?: string | null
+  resolvedAt?: string | null
+  createdAt: string
+  updatedAt: string
+}
+
+interface CommentResult {
+  success: boolean
+  data?: Comment | Comment[]
+  error?: string
+}
+
+interface CommentListResult {
+  success: boolean
+  data?: Comment[]
+  total?: number
+  error?: string
+}
+
+export function useComments() {
+  const { get, post, patch, delete: del } = useApi()
+  const { showSuccess, showError } = useToast()
+  const loading = ref(false)
+
+  const fetchComments = async (
+    entityType: string,
+    entityId: string,
+    status: string = 'open',
+  ): Promise<CommentListResult> => {
+    loading.value = true
+    try {
+      const params = new URLSearchParams({
+        entityType,
+        entityId,
+        status,
+        'order[createdAt]': 'desc',
+        itemsPerPage: '200',
+      })
+      const result = await get(`/comments?${params.toString()}`)
+      if (result.success) {
+        const items = extractCollection<Comment>(result.data)
+        return { success: true, data: items }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const fetchAllComments = async (options: {
+    status?: string
+    entityType?: string
+    page?: number
+    itemsPerPage?: number
+  } = {}): Promise<CommentListResult> => {
+    loading.value = true
+    try {
+      const params = new URLSearchParams()
+      if (options.status) params.set('status', options.status)
+      if (options.entityType) params.set('entityType', options.entityType)
+      params.set('order[createdAt]', 'desc')
+      params.set('itemsPerPage', String(options.itemsPerPage || 30))
+      params.set('page', String(options.page || 1))
+
+      const result = await get(`/comments?${params.toString()}`)
+      if (result.success) {
+        const items = extractCollection<Comment>(result.data)
+        const raw = result.data as Record<string, unknown> | null
+        const total = Number(raw?.['hydra:totalItems'] ?? raw?.totalItems ?? items.length)
+        return { success: true, data: items, total }
+      }
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const createComment = async (
+    entityType: string,
+    entityId: string,
+    content: string,
+    entityName?: string,
+  ): Promise<CommentResult> => {
+    loading.value = true
+    try {
+      const payload: Record<string, string> = { entityType, entityId, content }
+      if (entityName) payload.entityName = entityName
+      const result = await post('/comments', payload)
+      if (result.success) {
+        showSuccess('Commentaire ajouté')
+        return { success: true, data: result.data as Comment }
+      }
+      if (result.error) showError(result.error)
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      showError('Impossible d\'ajouter le commentaire')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const resolveComment = async (commentId: string): Promise<CommentResult> => {
+    loading.value = true
+    try {
+      const result = await patch(`/comments/${commentId}/resolve`)
+      if (result.success) {
+        showSuccess('Commentaire résolu')
+        return { success: true, data: result.data as Comment }
+      }
+      if (result.error) showError(result.error)
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      showError('Impossible de résoudre le commentaire')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteComment = async (commentId: string): Promise<CommentResult> => {
+    loading.value = true
+    try {
+      const result = await del(`/comments/${commentId}`)
+      if (result.success) {
+        showSuccess('Commentaire supprimé')
+        return { success: true }
+      }
+      if (result.error) showError(result.error)
+      return { success: false, error: result.error }
+    } catch (error) {
+      const err = error as Error
+      showError('Impossible de supprimer le commentaire')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const fetchUnresolvedCount = async (): Promise<number> => {
+    try {
+      const result = await get<{ count: number }>('/comments/stats/unresolved-count')
+      if (result.success && result.data) {
+        return result.data.count
+      }
+      return 0
+    } catch {
+      return 0
+    }
+  }
+
+  return {
+    loading,
+    fetchComments,
+    fetchAllComments,
+    createComment,
+    resolveComment,
+    deleteComment,
+    fetchUnresolvedCount,
+  }
+}
--- a/app/composables/usePermissions.ts
+++ b/app/composables/usePermissions.ts
@@ -0,0 +1,41 @@
+import { computed } from 'vue'
+import { useProfileSession } from './useProfileSession'
+
+const ROLE_HIERARCHY: Record<string, string[]> = {
+  ROLE_ADMIN: ['ROLE_ADMIN', 'ROLE_GESTIONNAIRE', 'ROLE_VIEWER', 'ROLE_USER'],
+  ROLE_GESTIONNAIRE: ['ROLE_GESTIONNAIRE', 'ROLE_VIEWER', 'ROLE_USER'],
+  ROLE_VIEWER: ['ROLE_VIEWER', 'ROLE_USER'],
+  ROLE_USER: ['ROLE_USER'],
+}
+
+export function usePermissions() {
+  const { activeProfile } = useProfileSession()
+
+  const effectiveRoles = computed<string[]>(() => {
+    const roles = (activeProfile.value?.roles as string[] | undefined) ?? ['ROLE_USER']
+    const all = new Set<string>()
+    for (const role of roles) {
+      const inherited = ROLE_HIERARCHY[role] ?? [role]
+      for (const r of inherited) {
+        all.add(r)
+      }
+    }
+    return [...all]
+  })
+
+  const isGranted = (role: string): boolean => {
+    return effectiveRoles.value.includes(role)
+  }
+
+  const isAdmin = computed(() => isGranted('ROLE_ADMIN'))
+  const canEdit = computed(() => isGranted('ROLE_GESTIONNAIRE'))
+  const canView = computed(() => isGranted('ROLE_VIEWER'))
+
+  return {
+    isAdmin,
+    canEdit,
+    canView,
+    isGranted,
+    effectiveRoles,
+  }
+}
--- a/app/composables/useProfileSession.ts
+++ b/app/composables/useProfileSession.ts
@@ -1,12 +1,9 @@
-import { useState, useRequestHeaders, useRuntimeConfig } from '#imports'
+import { useState, useRuntimeConfig } from '#imports'
 import type { Profile } from './useProfiles'

 const buildUrl = (path: string): string => {
  const config = useRuntimeConfig()
-  const baseUrl = import.meta.server
-    ? ((config.apiBaseUrl as string) || (config.public.apiBaseUrl as string) || '')
-    : ((config.public.apiBaseUrl as string) || '')
-  const base = baseUrl.replace(/\/$/, '')
+  const base = ((config.public.apiBaseUrl as string) || '').replace(/\/$/, '')
  return `${base}${path}`
 }

@@ -15,19 +12,12 @@ export function useProfileSession() {
  const sessionLoaded = useState<boolean>('profileSession:loaded', () => false)
  const loading = useState<boolean>('profileSession:loading', () => false)

-  const getSessionHeaders = (): Record<string, string> | undefined => {
-    if (!import.meta.server) { return undefined }
-    const headers = useRequestHeaders(['cookie'])
-    return headers?.cookie ? { cookie: headers.cookie } : undefined
-  }
-
  const fetchCurrentProfile = async (): Promise<Profile | null> => {
    loading.value = true
    try {
      activeProfile.value = await $fetch<Profile>(buildUrl('/session/profile'), {
        method: 'GET',
        credentials: 'include',
-        headers: getSessionHeaders(),
      })
    } catch (error) {
      const err = error as { status?: number }
@@ -51,12 +41,15 @@ export function useProfileSession() {
    return Promise.resolve(activeProfile.value)
  }

-  const activateProfile = async (profileId: string): Promise<void> => {
+  const activateProfile = async (profileId: string, password?: string): Promise<void> => {
+    const body: Record<string, string> = { profileId }
+    if (password) {
+      body.password = password
+    }
    await $fetch(buildUrl('/session/profile'), {
      method: 'POST',
      credentials: 'include',
-      body: { profileId },
-      headers: getSessionHeaders(),
+      body,
    })
    await fetchCurrentProfile()
  }
@@ -66,7 +59,6 @@ export function useProfileSession() {
      await $fetch(buildUrl('/session/profile'), {
        method: 'DELETE',
        credentials: 'include',
-        headers: getSessionHeaders(),
      })
    } finally {
      activeProfile.value = null
--- a/app/composables/useProfiles.ts
+++ b/app/composables/useProfiles.ts
@@ -1,9 +1,13 @@
-import { useState, useRequestHeaders, useRuntimeConfig } from '#imports'
+import { useState, useRuntimeConfig } from '#imports'

 export interface Profile {
  id: string
  firstName: string
  lastName: string
+  email?: string | null
+  isActive?: boolean
+  hasPassword?: boolean
+  roles?: string[]
  [key: string]: unknown
 }

@@ -18,19 +22,12 @@ export function useProfiles() {
  const loadingProfiles = useState<boolean>('profiles:loading', () => false)
  const profilesLoaded = useState<boolean>('profiles:loaded', () => false)

-  const getSessionHeaders = (): Record<string, string> | undefined => {
-    if (!import.meta.server) { return undefined }
-    const headers = useRequestHeaders(['cookie'])
-    return headers?.cookie ? { cookie: headers.cookie } : undefined
-  }
-
  const fetchProfiles = async (): Promise<Profile[]> => {
    loadingProfiles.value = true
    try {
      profiles.value = await $fetch<Profile[]>(buildUrl('/session/profiles'), {
        method: 'GET',
        credentials: 'include',
-        headers: getSessionHeaders(),
      })
      profilesLoaded.value = true
    } catch (error) {
@@ -43,32 +40,10 @@ export function useProfiles() {
    return profiles.value
  }

-  const createProfile = async ({ firstName, lastName }: { firstName: string; lastName: string }): Promise<Profile> => {
-    const profile = await $fetch<Profile>(buildUrl('/session/profiles'), {
-      method: 'POST',
-      credentials: 'include',
-      body: { firstName, lastName },
-      headers: getSessionHeaders(),
-    })
-    await fetchProfiles()
-    return profile
-  }
-
-  const deleteProfile = async (profileId: string): Promise<void> => {
-    await $fetch(buildUrl(`/session/profiles/${profileId}`), {
-      method: 'DELETE',
-      credentials: 'include',
-      headers: getSessionHeaders(),
-    })
-    await fetchProfiles()
-  }
-
  return {
    profiles,
    loadingProfiles,
    profilesLoaded,
    fetchProfiles,
-    createProfile,
-    deleteProfile,
  }
 }
--- a/app/middleware/profile.global.ts
+++ b/app/middleware/profile.global.ts
@@ -1,8 +1,7 @@
-import { useProfileSession } from "#imports";
+import { useProfileSession, usePermissions } from "#imports";

 export default defineNuxtRouteMiddleware(async (to) => {
-  const { ensureSession, fetchCurrentProfile, activeProfile } =
-    useProfileSession();
+  const { ensureSession, activeProfile } = useProfileSession();
  await ensureSession();

  const rawPath = to?.path ?? "";
@@ -14,11 +13,21 @@ export default defineNuxtRouteMiddleware(async (to) => {
    fullPath.startsWith("/profiles") ||
    routeName.startsWith("profiles");

-  if (process.client && !activeProfile.value) {
-    await fetchCurrentProfile();
-  }
-
-  if (process.client && !activeProfile.value && !isProfilesRoute) {
+  // Redirect to login if no active profile
+  if (!activeProfile.value && !isProfilesRoute) {
    return navigateTo("/profiles");
  }
+
+  // Permission checks
+  if (activeProfile.value) {
+    const { isAdmin } = usePermissions();
+
+    // Admin-only routes
+    if (normalizedPath.startsWith("/admin")) {
+      if (!isAdmin.value) {
+        return navigateTo("/");
+      }
+    }
+
+  }
 });
--- a/app/pages/admin/index.vue
+++ b/app/pages/admin/index.vue
@@ -0,0 +1,245 @@
+<template>
+  <div class="container mx-auto p-6 max-w-6xl">
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="text-2xl font-bold">
+        Administration des profils
+      </h1>
+      <button class="btn btn-primary btn-sm" @click="showCreateDialog = true">
+        Nouveau profil
+      </button>
+    </div>
+
+    <div v-if="loading" class="flex justify-center py-12">
+      <span class="loading loading-spinner loading-lg" />
+    </div>
+
+    <div v-else-if="profiles.length" class="overflow-x-auto">
+      <table class="table table-zebra w-full">
+        <thead>
+          <tr>
+            <th>Nom</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Mot de passe</th>
+            <th>Statut</th>
+            <th>Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="profile in profiles" :key="profile.id">
+            <td class="font-medium">
+              {{ profile.firstName }} {{ profile.lastName }}
+            </td>
+            <td class="text-sm text-base-content/70">
+              {{ profile.email || '-' }}
+            </td>
+            <td>
+              <select
+                class="select select-bordered select-xs"
+                :value="primaryRole(profile)"
+                @change="handleRoleChange(profile.id, $event.target.value)"
+              >
+                <option value="ROLE_ADMIN">
+                  Admin
+                </option>
+                <option value="ROLE_GESTIONNAIRE">
+                  Gestionnaire
+                </option>
+                <option value="ROLE_VIEWER">
+                  Viewer
+                </option>
+              </select>
+            </td>
+            <td>
+              <span v-if="profile.hasPassword" class="badge badge-success badge-sm">Oui</span>
+              <span v-else class="badge badge-ghost badge-sm">Non</span>
+              <button
+                class="btn btn-ghost btn-xs ml-1"
+                @click="openPasswordDialog(profile.id)"
+              >
+                {{ profile.hasPassword ? 'Changer' : 'Definir' }}
+              </button>
+            </td>
+            <td>
+              <span
+                class="badge badge-sm"
+                :class="profile.isActive ? 'badge-success' : 'badge-error'"
+              >
+                {{ profile.isActive ? 'Actif' : 'Inactif' }}
+              </span>
+            </td>
+            <td>
+              <button
+                v-if="profile.isActive"
+                class="btn btn-ghost btn-xs text-error"
+                @click="handleDeactivate(profile.id)"
+              >
+                Desactiver
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+
+    <div v-else class="text-center py-12 text-base-content/60">
+      Aucun profil.
+    </div>
+
+    <!-- Create Profile Dialog -->
+    <dialog ref="createDialog" class="modal" :open="showCreateDialog || undefined">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg mb-4">
+          Nouveau profil
+        </h3>
+        <form @submit.prevent="handleCreate">
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Prenom</span></label>
+            <input v-model="createForm.firstName" type="text" class="input input-bordered" required>
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Nom</span></label>
+            <input v-model="createForm.lastName" type="text" class="input input-bordered" required>
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Email</span></label>
+            <input v-model="createForm.email" type="email" class="input input-bordered">
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Mot de passe</span></label>
+            <input v-model="createForm.password" type="password" class="input input-bordered">
+          </div>
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Role</span></label>
+            <select v-model="createForm.role" class="select select-bordered">
+              <option value="ROLE_ADMIN">
+                Admin
+              </option>
+              <option value="ROLE_GESTIONNAIRE">
+                Gestionnaire
+              </option>
+              <option value="ROLE_VIEWER">
+                Viewer
+              </option>
+            </select>
+          </div>
+          <div class="modal-action">
+            <button type="button" class="btn btn-ghost" @click="showCreateDialog = false">
+              Annuler
+            </button>
+            <button type="submit" class="btn btn-primary" :disabled="creating">
+              <span v-if="creating" class="loading loading-spinner loading-xs" />
+              Creer
+            </button>
+          </div>
+        </form>
+      </div>
+      <form method="dialog" class="modal-backdrop">
+        <button type="button" @click="showCreateDialog = false">
+          close
+        </button>
+      </form>
+    </dialog>
+
+    <!-- Set Password Dialog -->
+    <dialog ref="passwordDialog" class="modal" :open="showPasswordDialog || undefined">
+      <div class="modal-box">
+        <h3 class="font-bold text-lg mb-4">
+          Definir le mot de passe
+        </h3>
+        <form @submit.prevent="handleSetPassword">
+          <div class="form-control mb-3">
+            <label class="label"><span class="label-text">Nouveau mot de passe</span></label>
+            <input v-model="newPassword" type="password" class="input input-bordered" required>
+          </div>
+          <div class="modal-action">
+            <button type="button" class="btn btn-ghost" @click="showPasswordDialog = false">
+              Annuler
+            </button>
+            <button type="submit" class="btn btn-primary" :disabled="settingPassword">
+              <span v-if="settingPassword" class="loading loading-spinner loading-xs" />
+              Valider
+            </button>
+          </div>
+        </form>
+      </div>
+      <form method="dialog" class="modal-backdrop">
+        <button type="button" @click="showPasswordDialog = false">
+          close
+        </button>
+      </form>
+    </dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+import { useAdminProfiles } from '#imports'
+
+const { profiles, loading, fetchAll, createProfile, updateRole, setPassword, deactivateProfile } = useAdminProfiles()
+
+const showCreateDialog = ref(false)
+const showPasswordDialog = ref(false)
+const creating = ref(false)
+const settingPassword = ref(false)
+const passwordProfileId = ref(null)
+const newPassword = ref('')
+
+const createForm = ref({
+  firstName: '',
+  lastName: '',
+  email: '',
+  password: '',
+  role: 'ROLE_VIEWER',
+})
+
+const primaryRole = (profile) => {
+  const roles = profile.roles || []
+  if (roles.includes('ROLE_ADMIN')) { return 'ROLE_ADMIN' }
+  if (roles.includes('ROLE_GESTIONNAIRE')) { return 'ROLE_GESTIONNAIRE' }
+  return 'ROLE_VIEWER'
+}
+
+const handleCreate = async () => {
+  creating.value = true
+  try {
+    const data = { ...createForm.value }
+    if (!data.email) { delete data.email }
+    if (!data.password) { delete data.password }
+    await createProfile(data)
+    showCreateDialog.value = false
+    createForm.value = { firstName: '', lastName: '', email: '', password: '', role: 'ROLE_VIEWER' }
+  } finally {
+    creating.value = false
+  }
+}
+
+const handleRoleChange = async (profileId, role) => {
+  await updateRole(profileId, role)
+}
+
+const openPasswordDialog = (profileId) => {
+  passwordProfileId.value = profileId
+  newPassword.value = ''
+  showPasswordDialog.value = true
+}
+
+const handleSetPassword = async () => {
+  if (!passwordProfileId.value) { return }
+  settingPassword.value = true
+  try {
+    await setPassword(passwordProfileId.value, newPassword.value)
+    showPasswordDialog.value = false
+  } finally {
+    settingPassword.value = false
+  }
+}
+
+const handleDeactivate = async (profileId) => {
+  await deactivateProfile(profileId)
+}
+
+onMounted(() => {
+  fetchAll()
+})
+</script>
--- a/app/pages/comments.vue
+++ b/app/pages/comments.vue
@@ -0,0 +1,331 @@
+<template>
+  <main class="container mx-auto px-6 py-10 space-y-8">
+    <header>
+      <h1 class="text-3xl font-semibold text-base-content">
+        Commentaires
+      </h1>
+      <p class="text-sm text-gray-500">
+        Liste de tous les commentaires et tickets ouverts sur les fiches.
+      </p>
+    </header>
+
+    <section class="card border border-base-200 bg-base-100 shadow-sm">
+      <div class="card-body space-y-4">
+        <!-- Filtres -->
+        <div class="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
+          <div class="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
+            <div class="flex items-center gap-2">
+              <label
+                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+                for="comment-status"
+              >
+                Statut
+              </label>
+              <select
+                id="comment-status"
+                v-model="statusFilter"
+                class="select select-bordered select-sm"
+                @change="handleFilterChange"
+              >
+                <option value="open">
+                  Ouverts
+                </option>
+                <option value="resolved">
+                  Résolus
+                </option>
+                <option value="">
+                  Tous
+                </option>
+              </select>
+            </div>
+
+            <div class="flex items-center gap-2">
+              <label
+                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+                for="comment-entity-type"
+              >
+                Type
+              </label>
+              <select
+                id="comment-entity-type"
+                v-model="entityTypeFilter"
+                class="select select-bordered select-sm"
+                @change="handleFilterChange"
+              >
+                <option value="">
+                  Tous
+                </option>
+                <option value="machine">
+                  Machine
+                </option>
+                <option value="piece">
+                  Pièce
+                </option>
+                <option value="composant">
+                  Composant
+                </option>
+                <option value="product">
+                  Produit
+                </option>
+                <option value="piece_category">
+                  Catégorie pièce
+                </option>
+                <option value="component_category">
+                  Catégorie composant
+                </option>
+                <option value="product_category">
+                  Catégorie produit
+                </option>
+                <option value="machine_skeleton">
+                  Squelette machine
+                </option>
+              </select>
+            </div>
+
+            <div class="flex items-center gap-2">
+              <label
+                class="text-xs font-semibold uppercase tracking-wide text-base-content/70"
+                for="comment-per-page"
+              >
+                Par page
+              </label>
+              <select
+                id="comment-per-page"
+                v-model.number="itemsPerPage"
+                class="select select-bordered select-sm"
+                @change="handleFilterChange"
+              >
+                <option :value="20">
+                  20
+                </option>
+                <option :value="50">
+                  50
+                </option>
+                <option :value="100">
+                  100
+                </option>
+              </select>
+            </div>
+          </div>
+
+          <p class="text-xs text-base-content/50 lg:text-right">
+            {{ comments.length }} / {{ total }} résultat{{ total > 1 ? 's' : '' }}
+          </p>
+        </div>
+
+        <!-- Loading -->
+        <div v-if="loadingList" class="flex justify-center py-8">
+          <span class="loading loading-spinner" aria-hidden="true" />
+        </div>
+
+        <!-- Empty states -->
+        <p v-else-if="!comments.length" class="text-sm text-base-content/70 py-4">
+          Aucun commentaire trouvé.
+        </p>
+
+        <!-- Table -->
+        <template v-else>
+          <div class="overflow-x-auto">
+            <table class="table table-sm md:table-md">
+              <thead>
+                <tr>
+                  <th>Contenu</th>
+                  <th>Type</th>
+                  <th>Item</th>
+                  <th>Auteur</th>
+                  <th>Date</th>
+                  <th>Statut</th>
+                  <th v-if="canEdit">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr
+                  v-for="comment in comments"
+                  :key="comment.id"
+                  class="hover"
+                >
+                  <td class="max-w-xs">
+                    <span class="line-clamp-2 text-sm">{{ comment.content }}</span>
+                  </td>
+                  <td>
+                    <span class="badge badge-outline badge-sm">
+                      {{ entityTypeLabel(comment.entityType) }}
+                    </span>
+                  </td>
+                  <td>
+                    <NuxtLink
+                      v-if="getEntityRoute(comment)"
+                      :to="getEntityRoute(comment)!"
+                      class="link link-primary text-sm font-medium"
+                    >
+                      {{ comment.entityName || comment.entityId }}
+                    </NuxtLink>
+                    <span v-else class="text-sm">
+                      {{ comment.entityName || comment.entityId }}
+                    </span>
+                  </td>
+                  <td class="text-sm">
+                    {{ comment.authorName }}
+                  </td>
+                  <td class="text-sm whitespace-nowrap">
+                    {{ formatCommentDate(comment.createdAt) }}
+                  </td>
+                  <td>
+                    <span
+                      class="badge badge-sm"
+                      :class="comment.status === 'open' ? 'badge-warning' : 'badge-success'"
+                    >
+                      {{ comment.status === 'open' ? 'Ouvert' : 'Résolu' }}
+                    </span>
+                  </td>
+                  <td v-if="canEdit" @click.stop>
+                    <button
+                      v-if="comment.status === 'open'"
+                      type="button"
+                      class="btn btn-success btn-xs gap-1"
+                      :disabled="loading"
+                      @click="handleResolve(comment.id)"
+                    >
+                      <IconLucideCheck class="w-3 h-3" />
+                      Résoudre
+                    </button>
+                    <span v-else class="text-xs text-base-content/50">
+                      {{ comment.resolvedByName }}
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- Pagination -->
+          <div v-if="totalPages > 1" class="flex justify-center gap-2 pt-2">
+            <button
+              class="btn btn-sm"
+              :disabled="page <= 1"
+              @click="goToPage(page - 1)"
+            >
+              Précédent
+            </button>
+            <span class="flex items-center text-sm text-base-content/70">
+              Page {{ page }} / {{ totalPages }}
+            </span>
+            <button
+              class="btn btn-sm"
+              :disabled="page >= totalPages"
+              @click="goToPage(page + 1)"
+            >
+              Suivant
+            </button>
+          </div>
+        </template>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onMounted } from 'vue'
+import { useComments, type Comment } from '~/composables/useComments'
+import { usePermissions } from '~/composables/usePermissions'
+import IconLucideCheck from '~icons/lucide/check'
+
+const { canEdit } = usePermissions()
+const {
+  loading,
+  fetchAllComments,
+  resolveComment,
+} = useComments()
+
+const comments = ref<Comment[]>([])
+const total = ref(0)
+const page = ref(1)
+const itemsPerPage = ref(20)
+const statusFilter = ref('open')
+const entityTypeFilter = ref('')
+const loadingList = ref(false)
+
+const totalPages = computed(() =>
+  Math.max(1, Math.ceil(total.value / itemsPerPage.value)),
+)
+
+const ENTITY_TYPE_LABELS: Record<string, string> = {
+  machine: 'Machine',
+  piece: 'Pièce',
+  composant: 'Composant',
+  product: 'Produit',
+  piece_category: 'Cat. pièce',
+  component_category: 'Cat. composant',
+  product_category: 'Cat. produit',
+  machine_skeleton: 'Squelette',
+}
+
+const entityTypeLabel = (type: string): string =>
+  ENTITY_TYPE_LABELS[type] ?? type
+
+const formatCommentDate = (dateStr: string): string => {
+  const date = new Date(dateStr)
+  if (Number.isNaN(date.getTime())) return '—'
+  return new Intl.DateTimeFormat('fr-FR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date)
+}
+
+const loadComments = async () => {
+  loadingList.value = true
+  const result = await fetchAllComments({
+    status: statusFilter.value || undefined,
+    entityType: entityTypeFilter.value || undefined,
+    page: page.value,
+    itemsPerPage: itemsPerPage.value,
+  })
+  if (result.success) {
+    comments.value = result.data ?? []
+    total.value = result.total ?? 0
+  }
+  loadingList.value = false
+}
+
+const handleFilterChange = () => {
+  page.value = 1
+  loadComments()
+}
+
+const goToPage = (p: number) => {
+  page.value = p
+  loadComments()
+}
+
+const handleResolve = async (commentId: string) => {
+  const result = await resolveComment(commentId)
+  if (result.success) {
+    await loadComments()
+  }
+}
+
+const ENTITY_ROUTE_MAP: Record<string, (id: string) => string> = {
+  machine: (id: string) => `/machine/${id}`,
+  piece: (id: string) => `/pieces/${id}/edit`,
+  composant: (id: string) => `/component/${id}/edit`,
+  product: (id: string) => `/product/${id}/edit`,
+  piece_category: (id: string) => `/piece-category/${id}/edit`,
+  component_category: (id: string) => `/component-category/${id}/edit`,
+  product_category: (id: string) => `/product-category/${id}/edit`,
+  machine_skeleton: (id: string) => `/type/${id}`,
+}
+
+const getEntityRoute = (comment: Comment): string | null => {
+  const builder = ENTITY_ROUTE_MAP[comment.entityType]
+  return builder ? builder(comment.entityId) : null
+}
+
+onMounted(() => {
+  loadComments()
+})
+</script>
--- a/app/pages/component-catalog.vue
+++ b/app/pages/component-catalog.vue
@@ -149,6 +149,7 @@
                        Modifier
                      </NuxtLink>
                      <button
+                        v-if="canEdit"
                        type="button"
                        class="btn btn-error btn-xs"
                        :disabled="loadingComposants"
@@ -185,6 +186,7 @@ import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
 import Pagination from '~/components/common/Pagination.vue'
 import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'

+const { canEdit } = usePermissions()
 const { showError } = useToast()
 const { composants, total, loadComposants, loading: loadingComposantsRef, deleteComposant } = useComposants()
 const { componentTypes, loadComponentTypes } = useComponentTypes()
--- a/app/pages/component-category/[id]/edit.vue
+++ b/app/pages/component-category/[id]/edit.vue
@@ -26,6 +26,7 @@
        :initial-data="initialData"
        :lock-category="true"
        :saving="saving"
+        :readonly="!canEdit"
        :disable-submit="isSubmitBlocked"
        :disable-submit-message="submitBlockMessage"
        :restricted-mode="isRestrictedMode"
@@ -34,6 +35,16 @@
        @cancel="handleCancel"
      />
    </section>
+
+    <!-- Comments -->
+    <div class="mt-4">
+      <CommentSection
+        entity-type="component_category"
+        :entity-id="String(route.params.id)"
+        :entity-name="initialData?.name"
+        show-resolved
+      />
+    </div>
  </main>
 </template>

@@ -47,6 +58,7 @@ import { useCategoryEditGuard } from '~/composables/useCategoryEditGuard'
 import { useComponentTypes } from '~/composables/useComponentTypes'
 import { useToast } from '~/composables/useToast'

+const { canEdit } = usePermissions()
 const route = useRoute()
 const router = useRouter()
 const { showError, showSuccess } = useToast()
@@ -128,6 +140,7 @@ const handleCancel = () => {
 }

 const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
+  if (!canEdit.value) return
  if (guardSubmitOrNotify()) {
    return
  }
--- a/app/pages/component-category/new.vue
+++ b/app/pages/component-category/new.vue
@@ -20,6 +20,7 @@
        initial-category="COMPONENT"
        :lock-category="true"
        :saving="saving"
+        :readonly="!canEdit"
        @submit="handleSubmit"
        @cancel="handleCancel"
      />
@@ -35,6 +36,8 @@ import { createModelType } from '~/services/modelTypes'
 import { invalidateEntityTypeCache } from '~/composables/useEntityTypes'
 import { useToast } from '~/composables/useToast'

+const { canEdit } = usePermissions()
+
 useHead(() => ({
  title: 'Nouvelle catégorie de composant',
 }))
@@ -50,6 +53,7 @@ const handleCancel = () => {
 }

 const handleSubmit = async (payload: Parameters<typeof createModelType>[0]) => {
+  if (!canEdit.value) return
  saving.value = true
  try {
    const enrichedPayload = {
--- a/app/pages/component/[id]/edit.vue
+++ b/app/pages/component/[id]/edit.vue
@@ -72,7 +72,7 @@
              v-model="editionForm.name"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
              placeholder="Nom affiché dans le catalogue"
              required
            >
@@ -88,7 +88,7 @@
              v-model="editionForm.reference"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
              placeholder="Référence interne ou fournisseur"
            >
          </div>
@@ -100,7 +100,7 @@
            <ConstructeurSelect
              v-model="editionForm.constructeurIds"
              class="w-full"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
              placeholder="Rechercher un ou plusieurs fournisseurs..."
              :initial-options="component?.constructeurs || []"
            />
@@ -118,7 +118,7 @@
              step="0.01"
              min="0"
              class="input input-bordered input-sm md:input-md"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
              placeholder="Valeur indicatrice"
            >
          </div>
@@ -277,7 +277,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
              <input
                v-else-if="field.type === 'number'"
@@ -286,14 +286,14 @@
                step="0.01"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
              <select
                v-else-if="field.type === 'select'"
                v-model="field.value"
                class="select select-bordered select-sm md:select-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
                <option value="">Sélectionner...</option>
                <option
@@ -304,24 +304,24 @@
                  {{ option }}
                </option>
              </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                <input
                  v-model="field.value"
                  type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                  true-value="true"
                  false-value="false"
-                  :disabled="saving"
+                  :disabled="!canEdit || saving"
                >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
              <input
                v-else-if="field.type === 'date'"
                v-model="field.value"
                type="date"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
              <input
                v-else
@@ -329,7 +329,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
            </div>
          </div>
@@ -347,7 +347,7 @@
              {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
            </span>
          </header>
-          <div :class="{ 'pointer-events-none opacity-60': saving || uploadingDocuments }">
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
            <DocumentUpload
              v-model="selectedFiles"
              title="Déposer vos fichiers"
@@ -419,6 +419,7 @@
                  Télécharger
                </button>
                <button
+                  v-if="canEdit"
                  type="button"
                  class="btn btn-error btn-xs"
                  :disabled="uploadingDocuments"
@@ -511,6 +512,16 @@
            Enregistrer les modifications
          </button>
        </div>
+
+        <!-- Comments -->
+        <div class="mt-4">
+          <CommentSection
+            entity-type="composant"
+            :entity-id="String(route.params.id)"
+            :entity-name="component?.name"
+            show-resolved
+          />
+        </div>
      </div>
    </section>
  </main>
@@ -566,6 +577,7 @@ interface ComponentCatalogType extends ModelType {
  customFields?: Array<Record<string, any>>
 }

+const { canEdit } = usePermissions()
 const route = useRoute()
 const router = useRouter()
 const { get } = useApi()
@@ -746,6 +758,7 @@ const requiredCustomFieldsFilled = computed(() =>
 )

 const canSubmit = computed(() => Boolean(
+  canEdit.value &&
  component.value &&
  editionForm.name &&
  requiredCustomFieldsFilled.value &&
--- a/app/pages/component/create.vue
+++ b/app/pages/component/create.vue
@@ -28,7 +28,7 @@
              empty-text="Aucune catégorie disponible"
              :option-label="typeOptionLabel"
              :option-description="typeOptionDescription"
-              :disabled="loadingTypes || submitting"
+              :disabled="!canEdit || loadingTypes || submitting"
            />
            <p v-if="loadingTypes" class="text-xs text-gray-500 mt-1">
              Chargement des catégories…
@@ -45,7 +45,7 @@
              v-model="creationForm.name"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Nom affiché dans le catalogue"
              required
            >
@@ -61,7 +61,7 @@
              v-model="creationForm.reference"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Référence interne ou fournisseur"
            >
          </div>
@@ -73,7 +73,7 @@
            <ConstructeurSelect
              v-model="creationForm.constructeurIds"
              class="w-full"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Rechercher un ou plusieurs fournisseurs..."
            />
          </div>
@@ -90,7 +90,7 @@
              step="0.01"
              min="0"
              class="input input-bordered input-sm md:input-md"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Valeur indicatrice"
            >
          </div>
@@ -244,7 +244,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
              <input
                v-else-if="field.type === 'number'"
@@ -253,14 +253,14 @@
                step="0.01"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
              <select
                v-else-if="field.type === 'select'"
                v-model="field.value"
                class="select select-bordered select-sm md:select-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
                <option value="">Sélectionner...</option>
                <option
@@ -271,24 +271,24 @@
                  {{ option }}
                </option>
              </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                <input
                  v-model="field.value"
                  type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                  true-value="true"
                  false-value="false"
-                  :disabled="submitting"
+                  :disabled="!canEdit || submitting"
                >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
              <input
                v-else-if="field.type === 'date'"
                v-model="field.value"
                type="date"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
              <input
                v-else
@@ -296,7 +296,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
            </div>
          </div>
@@ -314,7 +314,7 @@
              {{ selectedDocuments.length }} document{{ selectedDocuments.length > 1 ? 's' : '' }} prêt{{ selectedDocuments.length > 1 ? 's' : '' }} à être ajouté{{ selectedDocuments.length > 1 ? 's' : '' }}
            </span>
          </header>
-          <div :class="{ 'pointer-events-none opacity-60': submitting }">
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || submitting }">
            <DocumentUpload
              v-model="selectedDocuments"
              title="Déposer vos fichiers"
@@ -401,6 +401,7 @@ const {
 const toast = useToast()
 const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
 const { uploadDocuments } = useDocuments()
+const { canEdit } = usePermissions()

 const initialTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
 const selectedTypeId = ref<string>(initialTypeId.value)
@@ -755,6 +756,7 @@ const requiredCustomFieldsFilled = computed(() =>
 )

 const canSubmit = computed(() => Boolean(
+  canEdit.value &&
  selectedType.value &&
  creationForm.name &&
  requiredCustomFieldsFilled.value &&
--- a/app/pages/constructeurs.vue
+++ b/app/pages/constructeurs.vue
@@ -9,7 +9,7 @@
          Gérez les fournisseurs et leurs coordonnées.
        </p>
      </div>
-      <button class="btn btn-primary" @click="openCreateModal">
+      <button v-if="canEdit" class="btn btn-primary" @click="openCreateModal">
        <IconLucidePlus class="w-4 h-4 mr-2" aria-hidden="true" />
        Nouveau fournisseur
      </button>
@@ -73,9 +73,9 @@
                <td class="text-right">
                  <div class="flex justify-end gap-2">
                    <button class="btn btn-ghost btn-xs" @click="openEditModal(constructeur)">
-                      Modifier
+                      {{ canEdit ? 'Modifier' : 'Consulter' }}
                    </button>
-                    <button class="btn btn-error btn-xs" @click="confirmDelete(constructeur)">
+                    <button v-if="canEdit" class="btn btn-error btn-xs" @click="confirmDelete(constructeur)">
                      Supprimer
                    </button>
                  </div>
@@ -90,22 +90,22 @@
    <dialog class="modal" :class="{ 'modal-open': modalOpen }">
      <div class="modal-box">
        <h3 class="font-bold text-lg mb-4">
-          {{ editingConstructeur ? 'Modifier' : 'Nouveau' }} fournisseur
+          {{ editingConstructeur ? (canEdit ? 'Modifier' : 'Détails du') : 'Nouveau' }} fournisseur
        </h3>
        <form class="space-y-4" @submit.prevent="saveConstructeur">
          <div class="form-control">
            <label class="label"><span class="label-text">Nom</span></label>
-            <input v-model="form.name" type="text" class="input input-bordered" required>
+            <input v-model="form.name" type="text" class="input input-bordered" :disabled="!canEdit" required>
          </div>
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <FieldEmail v-model="form.email" label="Email" />
-            <FieldPhone v-model="form.phone" label="Téléphone" />
+            <FieldEmail v-model="form.email" label="Email" :disabled="!canEdit" />
+            <FieldPhone v-model="form.phone" label="Téléphone" :disabled="!canEdit" />
          </div>
          <div class="modal-action">
            <button type="button" class="btn" @click="closeModal">
              Annuler
            </button>
-            <button type="submit" class="btn btn-primary" :disabled="saving">
+            <button type="submit" class="btn btn-primary" :disabled="!canEdit || saving">
              <span v-if="saving" class="loading loading-spinner loading-xs mr-2" />
              {{ editingConstructeur ? 'Enregistrer' : 'Créer' }}
            </button>
@@ -117,7 +117,7 @@
 </template>

 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import FieldEmail from '~/components/form/FieldEmail.vue'
 import FieldPhone from '~/components/form/FieldPhone.vue'
 import { useConstructeurs } from '~/composables/useConstructeurs'
@@ -126,6 +126,7 @@ import { usePersistedValue } from '~/composables/usePersistedValue'
 import { formatPhone } from '~/utils/formatters/phone'
 import IconLucidePlus from '~icons/lucide/plus'

+const { canEdit } = usePermissions()
 const { constructeurs, loading, searchConstructeurs, createConstructeur, updateConstructeur, deleteConstructeur, loadConstructeurs } = useConstructeurs()
 const { showError } = useToast()

@@ -194,8 +195,18 @@ const closeModal = () => {
 }

 const saveConstructeur = async () => {
+  const trimmedName = form.value.name.trim()
+  const duplicate = constructeurs.value.find(
+    (c) => c.name.toLowerCase() === trimmedName.toLowerCase()
+      && c.id !== editingConstructeur.value?.id,
+  )
+  if (duplicate) {
+    showError(`Un fournisseur "${duplicate.name}" existe déjà.`)
+    return
+  }
+
  saving.value = true
-  const payload = { ...form.value }
+  const payload = { ...form.value, name: trimmedName }
  if (!payload.email) { delete payload.email }
  if (!payload.phone) { delete payload.phone }
  let result
@@ -221,7 +232,7 @@ const confirmDelete = async (constructeur) => {
  }
 }

-loadConstructeurs()
+onMounted(() => loadConstructeurs())
 </script>

 <style scoped>
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -104,10 +104,11 @@
            Commencez par ajouter des sites et des machines.
          </p>
          <div class="flex gap-2 justify-center">
-            <button class="btn btn-primary" @click="showAddSiteModal = true">
+            <button v-if="canEdit" class="btn btn-primary" @click="showAddSiteModal = true">
              Ajouter un site
            </button>
            <button
+              v-if="canEdit"
              class="btn btn-secondary"
              @click="showAddMachineModal = true"
            >
@@ -239,12 +240,14 @@

                    <div class="card-actions justify-end mt-3">
                      <button
+                        v-if="canEdit"
                        class="btn btn-xs btn-outline"
                        @click.stop="editMachine(machine)"
                      >
                        Modifier
                      </button>
                      <button
+                        v-if="canEdit"
                        class="btn btn-xs btn-error"
                        @click.stop="confirmDeleteMachine(machine)"
                      >
@@ -277,6 +280,7 @@
                Aucune machine dans ce site
              </p>
              <button
+                v-if="canEdit"
                class="btn btn-sm btn-primary"
                @click="addMachineToSite(site)"
              >
@@ -304,11 +308,12 @@
              type="text"
              placeholder="Ex: Usine de production"
              class="input input-bordered"
+              :disabled="!canEdit"
              required
            >
          </div>

-          <SiteContactFormFields :form="newSite" />
+          <SiteContactFormFields :form="newSite" :disabled="!canEdit" />

          <div class="modal-action">
            <button
@@ -318,7 +323,7 @@
            >
              Annuler
            </button>
-            <button type="submit" class="btn btn-primary">
+            <button type="submit" class="btn btn-primary" :disabled="!canEdit">
              Créer le site
            </button>
          </div>
@@ -343,6 +348,7 @@
                type="text"
                placeholder="Ex: Presse hydraulique #1"
                class="input input-bordered"
+                :disabled="!canEdit"
                required
              >
            </div>
@@ -354,6 +360,7 @@
              <select
                v-model="newMachine.siteId"
                class="select select-bordered"
+                :disabled="!canEdit"
                required
              >
                <option value="">
@@ -374,6 +381,7 @@
              <select
                v-model="newMachine.typeMachineId"
                class="select select-bordered"
+                :disabled="!canEdit"
                required
              >
                <option value="">
@@ -398,6 +406,7 @@
                type="text"
                placeholder="Ex: PRESS-001"
                class="input input-bordered"
+                :disabled="!canEdit"
              >
            </div>
          </div>
@@ -446,7 +455,7 @@
            >
              Annuler
            </button>
-            <button type="submit" class="btn btn-primary">
+            <button type="submit" class="btn btn-primary" :disabled="!canEdit">
              Créer la machine
            </button>
          </div>
@@ -474,6 +483,7 @@ import IconLucideTag from '~icons/lucide/tag'
 import { formatPhone } from '~/utils/formatters/phone'
 import { extractRelationId } from '~/shared/apiRelations'

+const { canEdit } = usePermissions()
 const { sites, loading, loadSites, createSite } = useSites()
 const { machineTypes, loadMachineTypes } = useMachineTypesApi()
 const { machines, loadMachines, createMachineFromType, deleteMachine } = useMachines()
--- a/app/pages/machine-skeleton/index.vue
+++ b/app/pages/machine-skeleton/index.vue
@@ -68,6 +68,7 @@
            </div>
            <div class="card-actions justify-end mt-4">
              <button
+                v-if="canEdit"
                class="btn btn-sm btn-error"
                @click.stop="confirmDeleteType(type)"
              >
@@ -108,6 +109,7 @@ import IconLucidePackage from "~icons/lucide/package";
 import IconLucideLayoutGrid from "~icons/lucide/layout-grid";
 import IconLucideBox from "~icons/lucide/box";

+const { canEdit } = usePermissions();
 const { machineTypes, loadMachineTypes, deleteMachineType } =
  useMachineTypesApi();

--- a/app/pages/machine-skeleton/new.vue
+++ b/app/pages/machine-skeleton/new.vue
@@ -19,15 +19,17 @@
          </div>
        </div>

-        <TypeEditForm
-          :key="formKey"
-          v-model="draftType"
-          :saving="creating"
-          :resettable="false"
-          submit-label="Créer le type"
-          submit-loading-label="Création..."
-          @submit="handleSubmit"
-        />
+        <div :class="{ 'pointer-events-none opacity-60': !canEdit }">
+          <TypeEditForm
+            :key="formKey"
+            v-model="draftType"
+            :saving="!canEdit || creating"
+            :resettable="false"
+            submit-label="Créer le type"
+            submit-loading-label="Création..."
+            @submit="handleSubmit"
+          />
+        </div>
      </div>
    </div>

@@ -94,6 +96,7 @@ import IconLucideBox from '~icons/lucide/box'

 const { machineTypes, loadMachineTypes, createMachineType } = useMachineTypesApi()
 const { showError } = useToast()
+const { canEdit } = usePermissions()

 const formKey = ref(0)
 const creating = ref(false)
--- a/app/pages/machine/[id].vue
+++ b/app/pages/machine/[id].vue
@@ -108,6 +108,16 @@
          @edit-piece="d.editPiece"
          @custom-field-update="d.updatePieceCustomField"
        />
+
+        <!-- Comments -->
+        <div class="mt-4">
+          <CommentSection
+            entity-type="machine"
+            :entity-id="String(machineId)"
+            :entity-name="d.machine.value?.name"
+            show-resolved
+          />
+        </div>
      </template>

      <template v-else>
@@ -163,6 +173,7 @@ import IconLucideAlertTriangle from '~icons/lucide/alert-triangle'

 const route = useRoute()
 const machineId = route.params.id
+const { canEdit } = usePermissions()

 if (!machineId) {
  console.error('ID de machine manquant')
@@ -212,7 +223,7 @@ onMounted(() => {
  d.loadMachineData()
  d.loadInitialData()

-  if (route.query.edit === 'true') {
+  if (route.query.edit === 'true' && canEdit.value) {
    d.isEditMode.value = true
  }
 })
--- a/app/pages/machines/index.vue
+++ b/app/pages/machines/index.vue
@@ -118,7 +118,7 @@
              <button class="btn btn-sm btn-outline" @click.stop="editMachine(machine)">
                Modifier
              </button>
-              <button class="btn btn-sm btn-error" @click.stop="confirmDeleteMachine(machine)">
+              <button v-if="canEdit" class="btn btn-sm btn-error" @click.stop="confirmDeleteMachine(machine)">
                Supprimer
              </button>
              <NuxtLink :to="`/machine/${machine.id}`" class="btn btn-sm btn-primary">
@@ -144,6 +144,7 @@ import IconLucideMapPin from '~icons/lucide/map-pin'
 import IconLucideSettings2 from '~icons/lucide/settings-2'
 import IconLucideTag from '~icons/lucide/tag'

+const { canEdit } = usePermissions()
 const { machines, loading, loadMachines, deleteMachine } = useMachines()
 const { sites, loadSites } = useSites()
 const { machineTypes, loadMachineTypes } = useMachineTypesApi()
--- a/app/pages/machines/new.vue
+++ b/app/pages/machines/new.vue
@@ -30,6 +30,7 @@
                  type="text"
                  placeholder="Ex: Presse hydraulique #1"
                  class="input input-bordered"
+                  :disabled="!canEdit"
                  required
                >
              </div>
@@ -38,7 +39,7 @@
                <label class="label" for="machine-field-site">
                  <span class="label-text">Site</span>
                </label>
-                <select id="machine-field-site" v-model="c.newMachine.siteId" class="select select-bordered" required>
+                <select id="machine-field-site" v-model="c.newMachine.siteId" class="select select-bordered" :disabled="!canEdit" required>
                  <option value="">
                    Sélectionner un site
                  </option>
@@ -58,6 +59,7 @@
                  v-model="c.newMachine.typeMachineId"
                  :options="c.machineTypes"
                  :loading="c.machineTypesLoading"
+                  :disabled="!canEdit"
                  placeholder="Rechercher un type…"
                  empty-text="Aucun type trouvé"
                  :option-label="c.machineTypeLabel"
@@ -74,6 +76,7 @@
                  type="text"
                  placeholder="Ex: PRESS-001"
                  class="input input-bordered"
+                  :disabled="!canEdit"
                >
              </div>
            </div>
@@ -171,7 +174,7 @@
              <button
                type="submit"
                class="btn btn-primary"
-                :disabled="!c.canCreateMachine || c.submitting"
+                :disabled="!canEdit || !c.canCreateMachine || c.submitting"
                :class="{ loading: c.submitting }"
              >
                Créer la machine
@@ -194,4 +197,5 @@ import RequirementProductSelector from '~/components/machine/create/RequirementP
 import MachineCreatePreview from '~/components/machine/create/MachineCreatePreview.vue'

 const c = proxyRefs(useMachineCreatePage())
+const { canEdit } = usePermissions()
 </script>
--- a/app/pages/piece-category/[id]/edit.vue
+++ b/app/pages/piece-category/[id]/edit.vue
@@ -26,6 +26,7 @@
        :initial-data="initialData"
        :lock-category="true"
        :saving="saving"
+        :readonly="!canEdit"
        :disable-submit="isSubmitBlocked"
        :disable-submit-message="submitBlockMessage"
        :restricted-mode="isRestrictedMode"
@@ -34,6 +35,16 @@
        @cancel="handleCancel"
      />
    </section>
+
+    <!-- Comments -->
+    <div class="mt-4">
+      <CommentSection
+        entity-type="piece_category"
+        :entity-id="String(route.params.id)"
+        :entity-name="initialData?.name"
+        show-resolved
+      />
+    </div>
  </main>
 </template>

@@ -47,6 +58,7 @@ import { useCategoryEditGuard } from '~/composables/useCategoryEditGuard'
 import { usePieceTypes } from '~/composables/usePieceTypes'
 import { useToast } from '~/composables/useToast'

+const { canEdit } = usePermissions()
 const route = useRoute()
 const router = useRouter()
 const { showError, showSuccess } = useToast()
@@ -126,6 +138,7 @@ const handleCancel = () => {
 }

 const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
+  if (!canEdit.value) return
  if (guardSubmitOrNotify()) {
    return
  }
--- a/app/pages/piece-category/new.vue
+++ b/app/pages/piece-category/new.vue
@@ -20,6 +20,7 @@
        initial-category="PIECE"
        :lock-category="true"
        :saving="saving"
+        :readonly="!canEdit"
        @submit="handleSubmit"
        @cancel="handleCancel"
      />
@@ -35,6 +36,8 @@ import { createModelType } from '~/services/modelTypes'
 import { invalidateEntityTypeCache } from '~/composables/useEntityTypes'
 import { useToast } from '~/composables/useToast'

+const { canEdit } = usePermissions()
+
 useHead(() => ({
  title: 'Nouvelle catégorie de pièce',
 }))
@@ -50,6 +53,7 @@ const handleCancel = () => {
 }

 const handleSubmit = async (payload: Parameters<typeof createModelType>[0]) => {
+  if (!canEdit.value) return
  saving.value = true
  try {
    const enrichedPayload = {
--- a/app/pages/pieces-catalog.vue
+++ b/app/pages/pieces-catalog.vue
@@ -171,6 +171,7 @@
                        Modifier
                      </NuxtLink>
                      <button
+                        v-if="canEdit"
                        type="button"
                        class="btn btn-error btn-xs"
                        :disabled="loadingPieces"
@@ -207,6 +208,7 @@ import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
 import Pagination from '~/components/common/Pagination.vue'
 import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'

+const { canEdit } = usePermissions()
 const { showError } = useToast()
 const { pieces, total, loadPieces, loading: loadingPiecesRef, deletePiece } = usePieces()
 const { pieceTypes, loadPieceTypes } = usePieceTypes()
--- a/app/pages/pieces/[id]/edit.vue
+++ b/app/pages/pieces/[id]/edit.vue
@@ -72,7 +72,7 @@
              v-model="editionForm.name"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
              placeholder="Nom affiché dans le catalogue"
              required
            >
@@ -88,7 +88,7 @@
              v-model="editionForm.reference"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
              placeholder="Référence interne ou fournisseur"
            >
          </div>
@@ -100,7 +100,7 @@
            <ConstructeurSelect
              v-model="editionForm.constructeurIds"
              class="w-full"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
              placeholder="Rechercher un ou plusieurs fournisseurs..."
              :initial-options="piece?.constructeurs || []"
            />
@@ -118,7 +118,7 @@
              step="0.01"
              min="0"
              class="input input-bordered input-sm md:input-md"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
              placeholder="Valeur indicatrice"
            >
          </div>
@@ -159,7 +159,7 @@
              </label>
              <ProductSelect
                :model-value="productSelections[entry.index] || null"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
                :type-product-id="entry.typeProductId"
                helper-text="Un produit valide est requis pour cette pièce."
                @update:model-value="(value) => setProductSelection(entry.index, value)"
@@ -224,7 +224,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
              <input
                v-else-if="field.type === 'number'"
@@ -233,14 +233,14 @@
                step="0.01"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
              <select
                v-else-if="field.type === 'select'"
                v-model="field.value"
                class="select select-bordered select-sm md:select-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
                <option value="">Sélectionner...</option>
                <option
@@ -251,24 +251,24 @@
                  {{ option }}
                </option>
              </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                <input
                  v-model="field.value"
                  type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                  true-value="true"
                  false-value="false"
-                  :disabled="saving"
+                  :disabled="!canEdit || saving"
                >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
              <input
                v-else-if="field.type === 'date'"
                v-model="field.value"
                type="date"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
              <input
                v-else
@@ -276,7 +276,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
            </div>
          </div>
@@ -294,7 +294,7 @@
              {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté{{ selectedFiles.length > 1 ? 's' : '' }}
            </span>
          </header>
-          <div :class="{ 'pointer-events-none opacity-60': saving || uploadingDocuments }">
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
            <DocumentUpload
              v-model="selectedFiles"
              title="Déposer vos fichiers"
@@ -366,6 +366,7 @@
                  Télécharger
                </button>
                <button
+                  v-if="canEdit"
                  type="button"
                  class="btn btn-error btn-xs"
                  :disabled="uploadingDocuments"
@@ -458,6 +459,16 @@
            Enregistrer les modifications
          </button>
        </div>
+
+        <!-- Comments -->
+        <div class="mt-4">
+          <CommentSection
+            entity-type="piece"
+            :entity-id="String(route.params.id)"
+            :entity-name="piece?.name"
+            show-resolved
+          />
+        </div>
      </div>
    </section>
  </main>
@@ -511,6 +522,7 @@ interface PieceCatalogType extends ModelType {
  customFields?: Array<Record<string, any>>
 }

+const { canEdit } = usePermissions()
 const route = useRoute()
 const router = useRouter()
 const { get } = useApi()
@@ -731,6 +743,7 @@ const requiredCustomFieldsFilled = computed(() =>

 const canSubmit = computed(() =>
  Boolean(
+    canEdit.value &&
    piece.value &&
    editionForm.name &&
    requiredCustomFieldsFilled.value &&
--- a/app/pages/pieces/create.vue
+++ b/app/pages/pieces/create.vue
@@ -28,7 +28,7 @@
              empty-text="Aucune catégorie disponible"
              :option-label="typeOptionLabel"
              :option-description="typeOptionDescription"
-              :disabled="loadingTypes || submitting"
+              :disabled="!canEdit || loadingTypes || submitting"
            />
            <p v-if="loadingTypes" class="text-xs text-gray-500 mt-1">
              Chargement des catégories…
@@ -45,7 +45,7 @@
              v-model="creationForm.name"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Nom affiché dans le catalogue"
              required
            >
@@ -61,7 +61,7 @@
              v-model="creationForm.reference"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Référence interne ou fournisseur"
            >
          </div>
@@ -73,7 +73,7 @@
            <ConstructeurSelect
              v-model="creationForm.constructeurIds"
              class="w-full"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Rechercher un ou plusieurs fournisseurs..."
            />
          </div>
@@ -90,7 +90,7 @@
              step="0.01"
              min="0"
              class="input input-bordered input-sm md:input-md"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Valeur indicatrice"
            >
          </div>
@@ -131,7 +131,7 @@
              </label>
              <ProductSelect
                :model-value="productSelections[entry.index] || null"
-                :disabled="submitting || !selectedType"
+                :disabled="!canEdit || submitting || !selectedType"
                :type-product-id="entry.typeProductId"
                helper-text="Un produit est requis pour cette pièce."
                @update:model-value="(value) => setProductSelection(entry.index, value)"
@@ -196,7 +196,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
              <input
                v-else-if="field.type === 'number'"
@@ -205,14 +205,14 @@
                step="0.01"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
              <select
                v-else-if="field.type === 'select'"
                v-model="field.value"
                class="select select-bordered select-sm md:select-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
                <option value="">Sélectionner...</option>
                <option
@@ -223,24 +223,24 @@
                  {{ option }}
                </option>
              </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                <input
                  v-model="field.value"
                  type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                  true-value="true"
                  false-value="false"
-                  :disabled="submitting"
+                  :disabled="!canEdit || submitting"
                >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
              <input
                v-else-if="field.type === 'date'"
                v-model="field.value"
                type="date"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
              <input
                v-else
@@ -248,7 +248,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
            </div>
          </div>
@@ -266,7 +266,7 @@
              {{ selectedDocuments.length }} document{{ selectedDocuments.length > 1 ? 's' : '' }} prêt{{ selectedDocuments.length > 1 ? 's' : '' }} à être ajouté{{ selectedDocuments.length > 1 ? 's' : '' }}
            </span>
          </header>
-          <div :class="{ 'pointer-events-none opacity-60': submitting }">
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || submitting }">
            <DocumentUpload
              v-model="selectedDocuments"
              title="Déposer vos fichiers"
@@ -329,6 +329,7 @@ const { createPiece } = usePieces()
 const toast = useToast()
 const { upsertCustomFieldValue, updateCustomFieldValue } = useCustomFields()
 const { uploadDocuments } = useDocuments()
+const { canEdit } = usePermissions()

 const initialTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
 const selectedTypeId = ref<string>(initialTypeId.value)
@@ -478,6 +479,7 @@ const requiredCustomFieldsFilled = computed(() =>

 const canSubmit = computed(() =>
  Boolean(
+    canEdit.value &&
    selectedType.value &&
    creationForm.name &&
    requiredCustomFieldsFilled.value &&
--- a/app/pages/product-catalog.vue
+++ b/app/pages/product-catalog.vue
@@ -153,6 +153,7 @@
                    Modifier
                  </NuxtLink>
                  <button
+                    v-if="canEdit"
                    type="button"
                    class="btn btn-ghost btn-xs text-error"
                    @click="confirmDelete(row.product)"
@@ -179,6 +180,8 @@ import { useUrlState } from '~/composables/useUrlState'
 import DocumentThumbnail from '~/components/DocumentThumbnail.vue'
 import { isImageDocument, isPdfDocument } from '~/utils/documentPreview'

+const { canEdit } = usePermissions()
+
 useHead(() => ({
  title: 'Catalogue des produits',
 }))
--- a/app/pages/product-category/[id]/edit.vue
+++ b/app/pages/product-category/[id]/edit.vue
@@ -26,6 +26,7 @@
        :initial-data="initialData"
        :lock-category="true"
        :saving="saving"
+        :readonly="!canEdit"
        :disable-submit="isSubmitBlocked"
        :disable-submit-message="submitBlockMessage"
        :restricted-mode="isRestrictedMode"
@@ -34,6 +35,16 @@
        @cancel="handleCancel"
      />
    </section>
+
+    <!-- Comments -->
+    <div class="mt-4">
+      <CommentSection
+        entity-type="product_category"
+        :entity-id="String(route.params.id)"
+        :entity-name="initialData?.name"
+        show-resolved
+      />
+    </div>
  </main>
 </template>

@@ -47,6 +58,7 @@ import { useCategoryEditGuard } from '~/composables/useCategoryEditGuard'
 import { useProductTypes } from '~/composables/useProductTypes'
 import { useToast } from '~/composables/useToast'

+const { canEdit } = usePermissions()
 const route = useRoute()
 const router = useRouter()
 const { showError, showSuccess } = useToast()
@@ -126,6 +138,7 @@ const handleCancel = () => {
 }

 const handleSubmit = async (payload: Parameters<typeof updateModelType>[1]) => {
+  if (!canEdit.value) return
  if (guardSubmitOrNotify()) {
    return
  }
--- a/app/pages/product-category/new.vue
+++ b/app/pages/product-category/new.vue
@@ -20,6 +20,7 @@
        initial-category="PRODUCT"
        :lock-category="true"
        :saving="saving"
+        :readonly="!canEdit"
        @submit="handleSubmit"
        @cancel="handleCancel"
      />
@@ -35,6 +36,8 @@ import { createModelType } from '~/services/modelTypes'
 import { invalidateEntityTypeCache } from '~/composables/useEntityTypes'
 import { useToast } from '~/composables/useToast'

+const { canEdit } = usePermissions()
+
 useHead(() => ({
  title: 'Nouvelle catégorie de produit',
 }))
@@ -50,6 +53,7 @@ const handleCancel = () => {
 }

 const handleSubmit = async (payload: Parameters<typeof createModelType>[0]) => {
+  if (!canEdit.value) return
  saving.value = true
  try {
    const enrichedPayload = {
--- a/app/pages/product/[id]/edit.vue
+++ b/app/pages/product/[id]/edit.vue
@@ -64,7 +64,7 @@
              v-model="editionForm.name"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
              required
            >
          </div>
@@ -79,7 +79,7 @@
              v-model="editionForm.reference"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
            >
          </div>

@@ -90,7 +90,7 @@
            <ConstructeurSelect
              v-model="editionForm.constructeurIds"
              class="w-full"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
              placeholder="Rechercher un ou plusieurs fournisseurs..."
              :initial-options="product?.constructeurs || []"
            />
@@ -108,7 +108,7 @@
              step="0.01"
              min="0"
              class="input input-bordered input-sm md:input-md"
-              :disabled="saving"
+              :disabled="!canEdit || saving"
            >
          </div>
        </div>
@@ -148,7 +148,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
              <input
                v-else-if="field.type === 'number'"
@@ -157,14 +157,14 @@
                step="0.01"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
              <select
                v-else-if="field.type === 'select'"
                v-model="field.value"
                class="select select-bordered select-sm md:select-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
                <option value="">Sélectionner...</option>
                <option
@@ -175,24 +175,24 @@
                  {{ option }}
                </option>
              </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                <input
                  v-model="field.value"
                  type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                  true-value="true"
                  false-value="false"
-                  :disabled="saving"
+                  :disabled="!canEdit || saving"
                >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
              <input
                v-else-if="field.type === 'date'"
                v-model="field.value"
                type="date"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
              <input
                v-else
@@ -200,7 +200,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="saving"
+                :disabled="!canEdit || saving"
              >
            </div>
          </div>
@@ -218,7 +218,7 @@
              {{ selectedFiles.length }} document{{ selectedFiles.length > 1 ? 's' : '' }} sélectionné{{ selectedFiles.length > 1 ? 's' : '' }}
            </span>
          </header>
-          <div :class="{ 'pointer-events-none opacity-60': saving || uploadingDocuments }">
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || saving || uploadingDocuments }">
            <DocumentUpload
              v-model="selectedFiles"
              title="Déposer vos fichiers"
@@ -286,6 +286,7 @@
                  Télécharger
                </button>
                <button
+                  v-if="canEdit"
                  type="button"
                  class="btn btn-error btn-xs"
                  :disabled="uploadingDocuments || saving"
@@ -381,6 +382,16 @@
        <p v-if="product && !requiredCustomFieldsFilled" class="text-xs text-error text-right">
          Merci de renseigner tous les champs personnalisés obligatoires.
        </p>
+
+        <!-- Comments -->
+        <div class="mt-4">
+          <CommentSection
+            entity-type="product"
+            :entity-id="String(route.params.id)"
+            :entity-name="product?.name"
+            show-resolved
+          />
+        </div>
      </div>
    </section>
  </main>
@@ -424,6 +435,7 @@ import {
  historyDiffEntries as _historyDiffEntries,
 } from '~/shared/utils/historyDisplayUtils'

+const { canEdit } = usePermissions()
 const route = useRoute()
 const router = useRouter()
 const toast = useToast()
@@ -489,7 +501,7 @@ const requiredCustomFieldsFilled = computed(() =>
 )

 const canSubmit = computed(() =>
-  Boolean(product.value && editionForm.name.trim().length >= 2 && requiredCustomFieldsFilled.value && !saving.value),
+  Boolean(canEdit.value && product.value && editionForm.name.trim().length >= 2 && requiredCustomFieldsFilled.value && !saving.value),
 )

 const structurePreview = computed(() => formatProductStructurePreview(structure.value))
--- a/app/pages/product/create.vue
+++ b/app/pages/product/create.vue
@@ -28,7 +28,7 @@
              empty-text="Aucune catégorie disponible"
              :option-label="typeOptionLabel"
              :option-description="typeOptionDescription"
-              :disabled="loadingTypes || submitting"
+              :disabled="!canEdit || loadingTypes || submitting"
            />
            <p v-if="loadingTypes" class="text-xs text-base-content/60 mt-1">
              Chargement des catégories…
@@ -45,7 +45,7 @@
              v-model="creationForm.name"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Nom affiché dans le catalogue"
              required
            >
@@ -61,7 +61,7 @@
              v-model="creationForm.reference"
              type="text"
              class="input input-bordered input-sm md:input-md"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Référence interne ou fournisseur"
            >
          </div>
@@ -73,7 +73,7 @@
            <ConstructeurSelect
              v-model="creationForm.constructeurIds"
              class="w-full"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Rechercher un ou plusieurs fournisseurs..."
            />
          </div>
@@ -90,7 +90,7 @@
              step="0.01"
              min="0"
              class="input input-bordered input-sm md:input-md"
-              :disabled="submitting || !selectedType"
+              :disabled="!canEdit || submitting || !selectedType"
              placeholder="Valeur indicatrice"
            >
          </div>
@@ -135,7 +135,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
              <input
                v-else-if="field.type === 'number'"
@@ -144,14 +144,14 @@
                step="0.01"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
              <select
                v-else-if="field.type === 'select'"
                v-model="field.value"
                class="select select-bordered select-sm md:select-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
                <option value="">Sélectionner...</option>
                <option
@@ -162,24 +162,24 @@
                  {{ option }}
                </option>
              </select>
-              <div v-else-if="field.type === 'boolean'" class="flex items-center gap-2">
+              <label v-else-if="field.type === 'boolean'" class="flex items-center gap-3 cursor-pointer">
                <input
                  v-model="field.value"
                  type="checkbox"
-                  class="checkbox checkbox-sm"
+                  class="toggle toggle-primary toggle-sm md:toggle-md"
                  true-value="true"
                  false-value="false"
-                  :disabled="submitting"
+                  :disabled="!canEdit || submitting"
                >
-                <span class="text-sm">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
-              </div>
+                <span class="text-sm" :class="field.value === 'true' ? 'text-success font-medium' : 'text-base-content/60'">{{ field.value === 'true' ? 'Oui' : 'Non' }}</span>
+              </label>
              <input
                v-else-if="field.type === 'date'"
                v-model="field.value"
                type="date"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
              <input
                v-else
@@ -187,7 +187,7 @@
                type="text"
                class="input input-bordered input-sm md:input-md"
                :required="field.required"
-                :disabled="submitting"
+                :disabled="!canEdit || submitting"
              >
            </div>
          </div>
@@ -205,7 +205,7 @@
              {{ selectedDocuments.length }} document{{ selectedDocuments.length > 1 ? 's' : '' }} sélectionné{{ selectedDocuments.length > 1 ? 's' : '' }}
            </span>
          </header>
-          <div :class="{ 'pointer-events-none opacity-60': submitting || uploadingDocuments }">
+          <div :class="{ 'pointer-events-none opacity-60': !canEdit || submitting || uploadingDocuments }">
            <DocumentUpload
              v-model="selectedDocuments"
              title="Déposer vos fichiers"
@@ -267,6 +267,7 @@ const { createProduct } = useProducts()
 const toast = useToast()
 const { upsertCustomFieldValue } = useCustomFields()
 const { uploadDocuments } = useDocuments()
+const { canEdit } = usePermissions()

 const initialTypeId = ref<string>(typeof route.query.typeId === 'string' ? route.query.typeId : '')
 const selectedTypeId = ref<string>(initialTypeId.value)
@@ -346,6 +347,7 @@ const requiredCustomFieldsFilled = computed(() =>
 )

 const canSubmit = computed(() => Boolean(
+  canEdit.value &&
  selectedType.value &&
  creationForm.name.trim().length >= 2 &&
  requiredCustomFieldsFilled.value &&
--- a/app/pages/profiles/index.vue
+++ b/app/pages/profiles/index.vue
@@ -1,55 +1,74 @@
 <template>
  <main class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
-    <div class="w-full max-w-2xl">
+    <div class="w-full max-w-md">
      <div class="card bg-base-100 shadow-2xl">
        <div class="card-body">
-          <h1 class="text-2xl font-bold mb-2">
-            Choisir un profil
+          <h1 class="text-2xl font-bold mb-6 text-center">
+            Connexion
          </h1>
-          <p class="text-sm text-base-content/70 mb-6">
-            Sélectionnez votre profil pour accéder à l'application. La création et la gestion se font via le menu utilisateur.
-          </p>

-          <section class="space-y-4">
-            <header class="flex items-center justify-between">
-              <h2 class="font-semibold">
-                Profils disponibles
-              </h2>
-              <button
-                type="button"
-                class="btn btn-ghost btn-xs"
-                :disabled="loadingProfiles"
-                @click="refreshProfiles"
-              >
-                <span v-if="loadingProfiles" class="loading loading-spinner loading-xs" />
-                <span v-else>Rafraîchir</span>
-              </button>
-            </header>
+          <div v-if="loadingProfiles" class="flex justify-center py-8">
+            <span class="loading loading-spinner loading-lg" />
+          </div>

-            <div v-if="profiles.length" class="space-y-2 max-h-64 overflow-y-auto">
-              <button
-                v-for="profile in profiles"
-                :key="profile.id"
-                type="button"
-                class="btn btn-outline btn-sm w-full justify-between"
-                @click="selectProfile(profile.id)"
+          <form v-else @submit.prevent="handleLogin">
+            <div class="form-control mb-4">
+              <label class="label">
+                <span class="label-text">Profil</span>
+              </label>
+              <select
+                v-model="selectedProfileId"
+                class="select select-bordered w-full"
+                required
              >
-                <span>{{ profile.firstName }} {{ profile.lastName }}</span>
-                <IconLucideChevronRight class="w-4 h-4" aria-hidden="true" />
-              </button>
+                <option value="" disabled>
+                  Choisir un profil...
+                </option>
+                <option
+                  v-for="profile in profiles"
+                  :key="profile.id"
+                  :value="profile.id"
+                >
+                  {{ profile.firstName }} {{ profile.lastName }}
+                </option>
+              </select>
            </div>
-            <p v-else class="text-sm text-base-content/60">
-              Aucun profil enregistré.
-            </p>
-          </section>

-          <footer v-if="activeProfile" class="mt-6 flex justify-between items-center">
+            <div class="form-control mb-2">
+              <label class="label">
+                <span class="label-text">Mot de passe</span>
+              </label>
+              <input
+                ref="passwordInput"
+                v-model="password"
+                type="password"
+                placeholder="Mot de passe"
+                class="input input-bordered w-full"
+                :class="{ 'input-error': loginError }"
+              >
+            </div>
+
+            <p v-if="loginError" class="text-error text-sm mb-4">
+              {{ loginError }}
+            </p>
+
+            <button
+              type="submit"
+              class="btn btn-primary w-full mt-4"
+              :disabled="!selectedProfileId || submitting"
+            >
+              <span v-if="submitting" class="loading loading-spinner loading-xs" />
+              Se connecter
+            </button>
+          </form>
+
+          <footer v-if="activeProfile" class="mt-6 pt-4 border-t border-base-300 flex justify-between items-center">
            <div class="text-sm text-base-content/70">
-              Profil actuel :
+              Connecte :
              <span class="font-semibold">{{ activeProfile.firstName }} {{ activeProfile.lastName }}</span>
            </div>
            <button type="button" class="btn btn-outline btn-sm" @click="handleLogout">
-              Déconnexion
+              Deconnexion
            </button>
          </footer>
        </div>
@@ -59,32 +78,43 @@
 </template>

 <script setup>
-import { onMounted } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useProfiles, useProfileSession } from '#imports'
-import IconLucideChevronRight from '~icons/lucide/chevron-right'

 const router = useRouter()
 const { profiles, loadingProfiles, fetchProfiles } = useProfiles()
 const { activeProfile, activateProfile, fetchCurrentProfile, logout } = useProfileSession()

-const refreshProfiles = async () => {
-  await fetchProfiles()
-}
+const selectedProfileId = ref('')
+const password = ref('')
+const loginError = ref('')
+const submitting = ref(false)
+const passwordInput = ref(null)

-const selectProfile = async (profileId) => {
+const handleLogin = async () => {
+  if (!selectedProfileId.value) { return }
+  submitting.value = true
+  loginError.value = ''
  try {
-    await activateProfile(profileId)
-    await fetchProfiles()
+    await activateProfile(selectedProfileId.value, password.value || undefined)
    await router.push('/')
  } catch (error) {
-    console.error('Erreur lors de la sélection du profil', error)
+    const err = error
+    if (err?.status === 401 || err?.statusCode === 401) {
+      loginError.value = 'Mot de passe incorrect.'
+    } else {
+      loginError.value = 'Erreur lors de la connexion.'
+    }
+  } finally {
+    submitting.value = false
  }
 }

 const handleLogout = async () => {
  await logout()
-  await router.push('/profiles')
+  selectedProfileId.value = ''
+  password.value = ''
 }

 onMounted(async () => {
--- a/app/pages/profiles/manage.vue
+++ b/app/pages/profiles/manage.vue
@@ -1,196 +0,0 @@
-<template>
-  <main class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 p-6">
-    <div class="max-w-4xl mx-auto">
-      <div class="flex items-center justify-between mb-6">
-        <div>
-          <h1 class="text-2xl font-bold">
-            Gestion des profils
-          </h1>
-          <p class="text-sm text-base-content/70">
-            Sélectionnez, créez ou supprimez des profils.
-          </p>
-        </div>
-        <NuxtLink to="/" class="btn btn-ghost btn-sm">
-          Retour
-        </NuxtLink>
-      </div>
-
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
-        <section class="card bg-base-100 shadow-lg">
-          <div class="card-body space-y-4">
-            <header class="flex items-center justify-between">
-              <h2 class="card-title text-lg">
-                Profils existants
-              </h2>
-              <button type="button" class="btn btn-ghost btn-xs" :disabled="loadingProfiles" @click="refresh">
-                <span v-if="loadingProfiles" class="loading loading-spinner loading-xs" />
-                <span v-else>Rafraîchir</span>
-              </button>
-            </header>
-
-            <div v-if="profiles.length" class="space-y-2 max-h-80 overflow-y-auto">
-              <div
-                v-for="profile in profiles"
-                :key="profile.id"
-                class="flex items-center justify-between rounded-lg border border-base-200 bg-base-100 px-3 py-2"
-              >
-                <div>
-                  <p class="font-medium">
-                    {{ profile.firstName }} {{ profile.lastName }}
-                  </p>
-                  <p class="text-xs text-base-content/60">
-                    ID : {{ profile.id }}
-                  </p>
-                </div>
-                <div class="flex items-center gap-2">
-                  <button
-                    type="button"
-                    class="btn btn-sm"
-                    :class="profile.id === activeProfile?.id ? 'btn-primary' : 'btn-outline'"
-                    @click="select(profile.id)"
-                  >
-                    {{ profile.id === activeProfile?.id ? 'Actif' : 'Activer' }}
-                  </button>
-                  <button
-                    type="button"
-                    class="btn btn-error btn-sm"
-                    @click="remove(profile.id)"
-                  >
-                    <span v-if="deleting === profile.id" class="loading loading-spinner loading-xs" />
-                    <span v-else>Supprimer</span>
-                  </button>
-                </div>
-              </div>
-            </div>
-            <p v-else class="text-sm text-base-content/60">
-              Aucun profil enregistré.
-            </p>
-          </div>
-        </section>
-
-        <section class="card bg-base-100 shadow-lg">
-          <div class="card-body space-y-4">
-            <h2 class="card-title text-lg">
-              Créer un profil
-            </h2>
-            <form class="space-y-3" @submit.prevent="create">
-              <div class="form-control">
-                <label class="label"><span class="label-text">Prénom</span></label>
-                <input
-                  v-model="createForm.firstName"
-                  type="text"
-                  class="input input-bordered"
-                  placeholder="Prénom"
-                  required
-                >
-              </div>
-              <div class="form-control">
-                <label class="label"><span class="label-text">Nom</span></label>
-                <input
-                  v-model="createForm.lastName"
-                  type="text"
-                  class="input input-bordered"
-                  placeholder="Nom"
-                  required
-                >
-              </div>
-              <button type="submit" class="btn btn-primary w-full" :disabled="creating">
-                <span v-if="creating" class="loading loading-spinner loading-sm" />
-                <span v-else>Créer et activer</span>
-              </button>
-            </form>
-          </div>
-        </section>
-      </div>
-
-      <div v-if="activeProfile" class="mt-8 flex items-center justify-between bg-base-100 shadow-lg rounded-lg p-4">
-        <div>
-          <p class="text-sm text-base-content/70">
-            Profil actif :
-          </p>
-          <p class="font-semibold text-base-content">
-            {{ activeProfile.firstName }} {{ activeProfile.lastName }}
-          </p>
-        </div>
-        <button type="button" class="btn btn-outline" @click="handleLogout">
-          Déconnexion
-        </button>
-      </div>
-    </div>
-  </main>
-</template>
-
-<script setup>
-import { reactive, ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import { useProfiles, useProfileSession } from '#imports'
-
-const router = useRouter()
-const { profiles, loadingProfiles, fetchProfiles, createProfile, deleteProfile } = useProfiles()
-const { activeProfile, activateProfile, fetchCurrentProfile, logout } = useProfileSession()
-
-const createForm = reactive({
-  firstName: '',
-  lastName: ''
-})
-
-const creating = ref(false)
-const deleting = ref(null)
-
-const refresh = async () => {
-  await fetchProfiles()
-  await fetchCurrentProfile()
-}
-
-const select = async (profileId) => {
-  try {
-    await activateProfile(profileId)
-    await refresh()
-  } catch (error) {
-    console.error('Erreur lors de la sélection du profil', error)
-  }
-}
-
-const create = async () => {
-  creating.value = true
-  try {
-    const profile = await createProfile({
-      firstName: createForm.firstName,
-      lastName: createForm.lastName
-    })
-    createForm.firstName = ''
-    createForm.lastName = ''
-    await activateProfile(profile.id)
-    await refresh()
-  } catch (error) {
-    console.error('Erreur lors de la création du profil', error)
-  } finally {
-    creating.value = false
-  }
-}
-
-const { confirm } = useConfirm()
-
-const remove = async (profileId) => {
-  if (!await confirm({ message: 'Supprimer ce profil ?' })) { return }
-  deleting.value = profileId
-  try {
-    await deleteProfile(profileId)
-    await refresh()
-  } catch (error) {
-    console.error('Erreur lors de la suppression du profil', error)
-  } finally {
-    deleting.value = null
-  }
-}
-
-const handleLogout = async () => {
-  await logout()
-  await refresh()
-  await router.push('/profiles')
-}
-
-onMounted(async () => {
-  await refresh()
-})
-</script>
--- a/app/pages/sites.vue
+++ b/app/pages/sites.vue
@@ -11,7 +11,7 @@
        <h2 class="text-2xl font-bold">
          Sites
        </h2>
-        <button class="btn btn-primary" @click="openCreateSiteModal">
+        <button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">
          <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
          Ajouter un site
        </button>
@@ -30,7 +30,7 @@
          <p class="text-gray-500 mb-4">
            Commencez par ajouter votre premier site.
          </p>
-          <button class="btn btn-primary" @click="openCreateSiteModal">
+          <button v-if="canEdit" class="btn btn-primary" @click="openCreateSiteModal">
            Ajouter un site
          </button>
        </div>
@@ -50,6 +50,7 @@
    <SiteCreateModal
      :visible="showAddSiteModal"
      :site="newSite"
+      :disabled="!canEdit"
      @close="closeCreateModal"
      @submit="handleCreateSite"
    />
@@ -64,6 +65,7 @@
      :can-preview-document="canPreviewDocument"
      :document-icon="documentIcon"
      :format-size="formatSize"
+      :disabled="!canEdit"
      @close="closeEditModal"
      @submit="handleUpdateSite"
      @remove-document="handleRemoveSiteDocument"
@@ -83,6 +85,8 @@ import SiteCreateModal from '~/components/sites/SiteCreateModal.vue'
 import SiteEditModal from '~/components/sites/SiteEditModal.vue'
 import { useSiteManagement } from '~/composables/useSiteManagement'

+const { canEdit } = usePermissions()
+
 const {
  sites,
  loading,
--- a/app/pages/type/[id].vue
+++ b/app/pages/type/[id].vue
@@ -127,6 +127,13 @@
          </div>
        </div>
      </div>
+
+      <!-- Commentaires -->
+      <CommentSection
+        entity-type="machine_skeleton"
+        :entity-id="type.id"
+        :entity-name="type.name"
+      />
    </div>

    <!-- Error State -->
@@ -153,6 +160,7 @@ import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
 import { useToast } from '~/composables/useToast'
 import IconLucideSquarePen from '~icons/lucide/square-pen'

+const { canEdit } = usePermissions()
 const route = useRoute()
 const { getMachineTypeById } = useMachineTypesApi()
 const { showError } = useToast()
--- a/app/pages/type/edit/[id].vue
+++ b/app/pages/type/edit/[id].vue
@@ -54,6 +54,7 @@ import { useMachineTypesApi } from '~/composables/useMachineTypesApi'
 import { useToast } from '~/composables/useToast'
 import { extractRelationId } from '~/shared/apiRelations'

+const { canEdit } = usePermissions()
 const route = useRoute()
 const router = useRouter()
 const { getMachineTypeById, updateMachineType } = useMachineTypesApi()
@@ -204,6 +205,10 @@ const saveChanges = async () => {

 // Charger le type au montage
 onMounted(async () => {
+  if (!canEdit.value) {
+    router.replace(`/type/${route.params.id}`)
+    return
+  }
  try {
    const typeId = route.params.id
    const result = await getMachineTypeById(typeId, true)
--- a/migration.md
+++ b/migration.md
@@ -0,0 +1,229 @@
+# Plan de migration — Réduction de code frontend
+
+> Objectif : réduire ~5 700 LOC sans modifier le fonctionnel.
+> Branche : à partir de `refacto/F1-decoupage-mega-composants`
+> Statut global : **EN ATTENTE**
+
+---
+
+## Phase 1 — Pages catalogue (3 pages, ~1 200 LOC → ~350 LOC)
+
+### M1.1 · Composant générique `CatalogPage.vue`
+
+- **Motif** : `component-catalog.vue` (348 LOC), `pieces-catalog.vue` (463 LOC) et `product-catalog.vue` (408 LOC) partagent 95 % de structure (recherche, tri, pagination, tableau, suppression, états vides/loading).
+- **Différences isolées** : colonnes du tableau, garde de suppression, extraction fournisseur.
+- **Plan** :
+  1. Créer `app/components/common/CatalogPage.vue` acceptant :
+     - `columns: ColumnDef[]` (nom, clé, slot optionnel)
+     - `fetchFn: (params) => Promise<PaginatedResult>`
+     - `deleteFn: (id) => Promise<Result>`
+     - `deleteGuard?: (item) => string | null` (message bloquant ou null)
+     - `entityLabel: string`, `createRoute: string`
+     - Slots nommés pour colonnes custom (`#col-supplier`, etc.)
+  2. Extraire `supplierDisplayUtils.ts` (pattern `MAX_VISIBLE_SUPPLIERS` dupliqué dans pieces-catalog et product-catalog).
+  3. Réduire chaque page catalogue à ~80 LOC (config + slots custom).
+- **Gain estimé** : ~850 LOC
+- **Statut** : `[ ]`
+
+---
+
+## Phase 2 — Composables CRUD génériques (~1 170 LOC → ~400 LOC)
+
+### M2.1 · Factory `useEntityCRUD<T>(config)`
+
+- **Motif** : `usePieces.ts` (240), `useProducts.ts` (305), `useComposants.ts` (231), `useSites.ts` (124) suivent le même pattern CRUD : refs `loading/loaded/error`, `loadItems()` paginé, `create/update/delete` avec mise à jour cache + toast.
+- **Différences isolées** : endpoint, normaliseur, enrichissement constructeurs, champs de tri.
+- **Plan** :
+  1. Créer `app/composables/useEntityCRUD.ts` :
+     ```ts
+     interface EntityCRUDConfig {
+       endpoint: string
+       label: string
+       normalizer?: (item: any) => any
+       enricher?: (item: any) => Promise<any>
+       defaultSort?: { field: string; dir: 'asc' | 'desc' }
+     }
+     export function useEntityCRUD(config: EntityCRUDConfig)
+     ```
+  2. Extraire `extractTotal()` dans `apiHelpers.ts` (dupliqué 3×, ~10 LOC chacun).
+  3. Extraire `buildPaginatedQuery(options)` dans `apiHelpers.ts` (dupliqué 3×, ~15 LOC chacun).
+  4. Extraire pattern `withResolvedConstructeurs()` dans `useEntityEnricher.ts` (dupliqué 3× dans pieces/products/composants, ~50 LOC chacun).
+  5. Réduire chaque composable à un appel de factory + méthodes spécifiques.
+  6. Garder `useMachines.ts` séparé (méthodes spéciales : `reconfigureSkeleton`, `createMachineFromType`).
+- **Gain estimé** : ~770 LOC
+- **Statut** : `[ ]`
+
+### M2.2 · Helper `withLoadingState()`
+
+- **Motif** : pattern `loading.value = true; try { ... } finally { loading.value = false }` répété 10+ fois dans les composables CRUD.
+- **Plan** : créer `app/composables/useLoadingHelper.ts` exportant :
+  ```ts
+  async function withLoadingState<T>(loading: Ref<boolean>, fn: () => Promise<T>): Promise<T>
+  ```
+- **Gain estimé** : ~100 LOC
+- **Statut** : `[ ]`
+
+### M2.3 · Fusion `usePersistedValue` + `usePersistedSort`
+
+- **Motif** : même pattern `useCookie()` + `watch()` + JSON parse/stringify.
+- **Plan** : fusionner en `usePersistedState<T>(key, fallback, prefix?)`.
+- **Gain estimé** : ~30 LOC
+- **Statut** : `[ ]`
+
+---
+
+## Phase 3 — Pages edit entités (~2 750 LOC → ~1 200 LOC)
+
+### M3.1 · Composant `HistorySection.vue`
+
+- **Motif** : bloc historique identique (loading/error/empty + itération entries) dans `component/[id]/edit.vue` (L437-503), `pieces/[id]/edit.vue` (L384-450), `product/[id]/edit.vue` (L304-370) — ~67 LOC × 3.
+- **Plan** : créer `app/components/common/HistorySection.vue` avec props `entries`, `loading`, `error`.
+- **Gain estimé** : ~130 LOC
+- **Statut** : `[ ]`
+
+### M3.2 · Composant `DocumentsSection.vue`
+
+- **Motif** : bloc document (upload, liste, preview, download, delete) dupliqué dans les 3 pages edit + `MachineDocumentsCard.vue` + `SiteEditModal.vue` — ~70-180 LOC × 5.
+- **Plan** : créer `app/components/common/DocumentsSection.vue` avec props `documents`, `entityId`, `entityType` et events `upload`, `delete`, `preview`.
+- **Gain estimé** : ~400 LOC
+- **Statut** : `[ ]`
+
+### M3.3 · Composable `useEntityEditForm(config)`
+
+- **Motif** : les 3 pages edit partagent : chargement entité + types + constructeurs, gestion champs custom, normalisation payload, sauvegarde, gestion erreur.
+- **Différences** : component a structure display, piece a product selection, product est plus simple.
+- **Plan** :
+  1. Créer `app/composables/useEntityEditForm.ts` gérant le cycle de vie commun (load, save, custom fields sync).
+  2. Chaque page edit ne garde que ses spécificités.
+- **Gain estimé** : ~500 LOC
+- **Statut** : `[ ]`
+
+### M3.4 · Réutilisation `customFieldFormUtils.ts` dans `component/create.vue`
+
+- **Motif** : `component/create.vue` (1 266 LOC) réimplémente `resolveFieldName`, `resolveFieldType`, `resolveDefaultValue` déjà dans `customFieldFormUtils.ts`. Aussi 3 fonctions `resolveXxxLabel` quasi-identiques (~18 LOC × 3).
+- **Plan** :
+  1. Remplacer les fonctions locales par les imports de `customFieldFormUtils.ts`.
+  2. Créer `resolveTypeLabel(entity, typeField, labelField, fallback)` générique.
+- **Gain estimé** : ~120 LOC
+- **Statut** : `[ ]`
+
+---
+
+## Phase 4 — Décomposition `useMachineDetailData.ts` (1 410 LOC → ~500 LOC)
+
+### M4.1 · Extraire `useMachineDocuments.ts`
+
+- **Motif** : gestion documents (upload, delete, preview, refresh) = ~200 LOC dans le composable monolithique.
+- **Gain estimé** : ~150 LOC (après factorisation avec DocumentsSection)
+- **Statut** : `[ ]`
+
+### M4.2 · Extraire `useMachineConstructeurs.ts`
+
+- **Motif** : résolution constructeurs avec chaînes de fallback 4 niveaux, `uniqueConstructeurIds`, `resolveConstructeurs` = ~80 LOC.
+- **Gain estimé** : ~60 LOC
+- **Statut** : `[ ]`
+
+### M4.3 · Fusionner `transformCustomFields` et `transformComponentCustomFields`
+
+- **Motif** : L303-405 et L407-514 — logique quasi-identique de transformation des champs custom, seule la source (machine vs composant) diffère.
+- **Plan** : créer `transformEntityCustomFields(entity, fieldSource, config)` paramétrable.
+- **Gain estimé** : ~100 LOC
+- **Statut** : `[ ]`
+
+### M4.4 · Extraire groupement de requirements
+
+- **Motif** : `componentRequirementGroups`, `pieceRequirementGroups` = computed complexes avec construction de maps et filtres répétitifs.
+- **Gain estimé** : ~80 LOC
+- **Statut** : `[ ]`
+
+---
+
+## Phase 5 — `StructureNodeEditor.vue` (1 167 LOC → ~600 LOC)
+
+### M5.1 · Composable `useDragDrop.ts`
+
+- **Motif** : 4 handlers drag-drop quasi-identiques (custom fields, pièces, produits, sous-composants) avec chacun `draggingIndex`, `dropTargetIndex`, `reorderClass()`, `handleDragStart/Over/End`.
+- **Plan** : créer `useDragDrop<T>(items: Ref<T[]>)` retournant `{ dragging, target, reorderClass, onDragStart, onDragOver, onDragEnd, onDrop }`.
+- **Gain estimé** : ~350 LOC
+- **Statut** : `[ ]`
+
+### M5.2 · Extraire validation noeud
+
+- **Motif** : `isAssignmentNodeComplete` + logique de validation dispersée.
+- **Plan** : déplacer vers `app/shared/utils/structureValidation.ts`.
+- **Gain estimé** : ~40 LOC
+- **Statut** : `[ ]`
+
+---
+
+## Phase 6 — Micro-duplications restantes (du `micro-dup-report.md`)
+
+### M6.1 · `useControlledModel.ts` (MDUP-004)
+
+- **Motif** : `computed({ get, set })` pour transiter `v-model` entre props et emits — dupliqué dans 6 composants.
+- **Gain estimé** : ~60 LOC
+- **Statut** : `[ ]`
+
+### M6.2 · `ModalShell.vue` (MDUP-008) + `ModalActions.vue` (MDUP-007)
+
+- **Motif** : squelette de modale DaisyUI (`.modal` + `.modal-box` + titre + footer) dupliqué dans 4+ composants. Pieds de modale « Annuler + Primaire + spinner » dupliqués 5×.
+- **Gain estimé** : ~120 LOC
+- **Statut** : `[ ]`
+
+### M6.3 · `LoadingButton.vue` (MDUP-010) + `FieldText.vue` (MDUP-009)
+
+- **Motif** : bouton primaire avec spinner (3 occurrences), champ texte simple label+input (5 occurrences).
+- **Gain estimé** : ~80 LOC
+- **Statut** : `[ ]`
+
+### M6.4 · `createRequirementDefaults` + `useEnsureOptionsLoaded` (MDUP-005, MDUP-006)
+
+- **Motif** : factory de requirement par défaut + `onMounted` identiques dans les sections composant/pièce.
+- **Gain estimé** : ~30 LOC
+- **Statut** : `[ ]`
+
+---
+
+## Phase 7 — Consolidation custom fields (~1 150 LOC → ~800 LOC)
+
+### M7.1 · Fusionner logique de résolution dans `customFieldUtils.ts`
+
+- **Motif** : `customFieldUtils.ts` (440), `entityCustomFieldLogic.ts` (349), `customFieldFormUtils.ts` (367) contiennent des fonctions de résolution de champs qui se chevauchent (`resolveFieldId`, `resolveFieldName`, génération de clé, déduplication).
+- **Plan** : consolider les fonctions dupliquées en gardant la séparation thématique (utils / form / entity) mais en partageant les primitives.
+- **Gain estimé** : ~150 LOC
+- **Statut** : `[ ]`
+
+---
+
+## Récapitulatif
+
+| Phase | Cible | LOC avant | Gain estimé | Priorité |
+|-------|-------|-----------|-------------|----------|
+| **P1** | Pages catalogue | ~1 220 | ~850 | Haute |
+| **P2** | Composables CRUD | ~1 170 | ~900 | Haute |
+| **P3** | Pages edit entités | ~2 750 | ~1 150 | Haute |
+| **P4** | useMachineDetailData | ~1 410 | ~390 | Moyenne |
+| **P5** | StructureNodeEditor | ~1 167 | ~390 | Moyenne |
+| **P6** | Micro-duplications | ~400 | ~290 | Basse |
+| **P7** | Custom fields utils | ~1 150 | ~150 | Basse |
+| | **Total** | | **~4 120 LOC** | |
+
+### Ordre recommandé
+
+1. **P2** (CRUD generics) — fondation pour P1 et P3
+2. **P1** (catalogues) — dépend de P2 pour les fetch functions
+3. **P3** (pages edit) — plus gros gain absolu, dépend partiellement de P2
+4. **P5** (drag-drop) — indépendant, quick win
+5. **P4** (machine detail) — complexe mais fort impact
+6. **P6** (micro-dup) — petits gains, faible risque
+7. **P7** (custom fields) — délicat, à faire en dernier
+
+### Vérification après chaque phase
+
+```bash
+cd Inventory_frontend
+npx nuxi typecheck        # 0 erreurs
+npm run lint:fix           # 0 erreurs
+npm run build              # succès
+npx vitest run             # 54+ tests pass
+```
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -41,7 +41,7 @@ export default defineNuxtConfig({
      || process.env.NUXT_PUBLIC_API_BASE_URL
      || 'http://localhost/api',
    public: {
-      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || 'http://localhost:8081/api',
+      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || '/api',
      appUrl: process.env.NUXT_PUBLIC_APP_URL || 'http://localhost:3001',
      appName: process.env.NUXT_PUBLIC_APP_NAME || 'Inventory Management System',
      appVersion: appVersion,
@@ -54,7 +54,15 @@ export default defineNuxtConfig({
    }
  },
  vite: {
-    plugins: [tailwindcss()]
+    plugins: [tailwindcss()],
+    server: {
+      proxy: {
+        '/api': {
+          target: 'http://localhost',
+          changeOrigin: true,
+        },
+      },
+    },
  },
  css: ['~/assets/app.css'],
  router: {
--- a/package-lock.json
+++ b/package-lock.json
@@ -5550,12 +5550,15 @@
      "license": "MIT"
    },
    "node_modules/baseline-browser-mapping": {
-      "version": "2.8.7",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.8.7.tgz",
-      "integrity": "sha512-bxxN2M3a4d1CRoQC//IqsR5XrLh0IJ8TCv2x6Y9N0nckNz/rTjZB3//GGscZziZOxmjP55rzxg/ze7usFI9FqQ==",
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.10.0.tgz",
+      "integrity": "sha512-lIyg0szRfYbiy67j9KN8IyeD7q7hcmqnJ1ddWmNt19ItGpNN64mnllmxUNFIOdOm6by97jlL6wfpTTJrmnjWAA==",
      "license": "Apache-2.0",
      "bin": {
-        "baseline-browser-mapping": "dist/cli.js"
+        "baseline-browser-mapping": "dist/cli.cjs"
+      },
+      "engines": {
+        "node": ">=6.0.0"
      }
    },
    "node_modules/binary-extensions": {
@@ -5847,9 +5850,9 @@
      }
    },
    "node_modules/caniuse-lite": {
-      "version": "1.0.30001745",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001745.tgz",
-      "integrity": "sha512-ywt6i8FzvdgrrrGbr1jZVObnVv6adj+0if2/omv9cmR2oiZs30zL4DIyaptKcbOrBdOIc74QTMoJvSE2QHh5UQ==",
+      "version": "1.0.30001775",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001775.tgz",
+      "integrity": "sha512-s3Qv7Lht9zbVKE9XoTyRG6wVDCKdtOFIjBGg3+Yhn6JaytuNKPIjBMTMIY1AnOH3seL5mvF+x33oGAyK3hVt3A==",
      "funding": [
        {
          "type": "opencollective",
Author	SHA1	Message	Date
Matthieu	a98ab8c275	feat(comments): add comment/ticket system across all entity pages Add CommentSection component for inline comments on entity detail pages (machines, pieces, composants, products, categories, skeleton types). Add dedicated /comments page with filters, pagination and clickable links. Add unresolved count badge on avatar and in profile dropdown. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 14:06:06 +01:00
Matthieu	e22463874c	fix(constructeurs): improve search filtering and duplicate prevention Switch ConstructeurSelect to client-side filtering instead of debounced API calls. Add duplicate name check before creating a new constructeur in both ConstructeurSelect and the constructeurs page. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 14:05:54 +01:00
Matthieu	256039264e	chore: update package-lock.json Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 10:02:13 +01:00
Matthieu	e459da7c20	fix(ui) : replace checkbox with toggle switch for boolean custom fields Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 09:56:51 +01:00
Matthieu	e84b5cf674	feat(ui) : display role badge in profile dropdown Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-03-02 09:42:05 +01:00
Matthieu	cc70fe2b29	feat(permissions) : add role-based UI guards and readonly mode for viewers - Add usePermissions composable (isAdmin, canEdit, canView) - Password-protected profile login with modal on profiles page - Disable all form fields for ROLE_VIEWER across edit/create pages - Show navigation buttons (Modifier/Consulter) for all roles, hide delete for viewers - Add readonly prop to ModelTypeForm for category pages - Disable modal fields (sites, constructeurs) for viewers - Guard /admin routes in middleware Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-26 13:36:42 +01:00