Merge branch 'feature/ERP-7-mise-en-place-du-modular-monolith' into develop

# Conflicts:
#	docker-compose.yml

frontend/app/layouts/auth.vue

@@ -0,0 +1,7 @@
+<template>
+    <div class="min-h-screen bg-tertiary-500 from-tertiary-500 via-white to-neutral-100 text-neutral-900">
+        <main class="mx-auto flex min-h-screen w-full max-w-[720px] items-center px-6 py-12">
+            <slot />
+        </main>
+    </div>
+</template>

frontend/app/layouts/default.vue

@@ -0,0 +1,53 @@
+<template>
+    <div class="h-screen overflow-hidden">
+        <div class="flex h-full">
+            <MalioSidebar
+                v-model="ui.sidebarCollapsed"
+                :sections="translatedSections"
+            >
+                <template #logo>
+                    <img src="/LOGO_MALIO.png" alt="Malio"/>
+                </template>
+                <template #logo-collapsed>
+                    <img src="/LOGO_MALIO_COLLAPSED.png" alt="Malio"/>
+                </template>
+            </MalioSidebar>
+
+            <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
+                <main
+                    class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-24 sm:px-8 lg:px-16">
+                    <div
+                        aria-hidden="true"
+                        class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12"/>
+                    <slot/>
+                </main>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const {t} = useI18n()
+const ui = useUiStore()
+const {sections} = useSidebar()
+const route = useRoute()
+
+const translatedSections = computed(() =>
+    sections.value.map(section => ({
+        label: t(section.label),
+        icon: section.icon,
+        items: section.items.map(item => ({
+            label: t(item.label),
+            to: item.to,
+        })),
+    }))
+)
+
+watch(() => route.path, () => {
+    ui.closeMobileSidebar()
+})
+
+useHead({
+    titleTemplate: (title) => title || 'Coltura',
+})
+</script>

frontend/app/middleware/auth.global.ts

@@ -13,4 +13,11 @@ export default defineNuxtRouteMiddleware(async (to) => {
     if (isLogin && auth.isAuthenticated) {
         return navigateTo('/')
     }
+
+    if (auth.isAuthenticated) {
+        const { loaded, loadSidebar } = useSidebar()
+        if (!loaded.value) {
+            await loadSidebar()
+        }
+    }
 })

frontend/app/middleware/modules.global.ts

@@ -0,0 +1,18 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+    const auth = useAuthStore()
+
+    // Don't block routes for unauthenticated users — auth middleware handles them first.
+    if (!auth.isAuthenticated) {
+        return
+    }
+
+    const { loaded, loadSidebar, isRouteDisabled } = useSidebar()
+
+    if (!loaded.value) {
+        await loadSidebar()
+    }
+
+    if (isRouteDisabled(to.path)) {
+        return navigateTo('/')
+    }
+})

frontend/components/ui/AppTopNav.vue

@@ -1,48 +0,0 @@
-<template>
-    <header class="border-b border-neutral-200 bg-primary-500 px-3 py-2 text-white sm:px-5 sm:py-2 max-h-[60px]">
-        <div class="flex h-full items-center justify-between">
-            <MalioButtonIcon
-                icon="mdi:menu"
-                aria-label="Menu"
-                variant="ghost"
-                icon-size="24"
-                button-class="lg:hidden text-white hover:bg-primary-600"
-                @click="ui.openMobileSidebar()"
-            />
-            <div class="hidden items-center gap-2 lg:flex">
-                <h1 class="text-lg font-bold tracking-tight">Coltura</h1>
-            </div>
-            <div class="ml-auto flex items-center gap-4 text-xl text-white sm:gap-8">
-                <div class="group relative flex gap-2 sm:gap-4">
-                    <Icon name="mdi:account-circle-outline" class="self-center cursor-pointer" size="36" />
-                    <p class="hidden self-center cursor-pointer sm:block">{{ user?.username }}</p>
-                    <div class="invisible absolute right-0 top-full z-50 mt-2 w-44 rounded-md border border-neutral-200 bg-white py-1 text-sm text-neutral-800 opacity-0 shadow-lg transition-all group-hover:visible group-hover:opacity-100">
-                        <button
-                            type="button"
-                            class="block w-full px-3 py-2 text-left hover:bg-neutral-100"
-                            @click="handleLogout"
-                        >
-                            Deconnexion
-                        </button>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </header>
-</template>
-
-<script setup lang="ts">
-import type { UserData } from '~/services/dto/user-data'
-
-defineProps<{
-    user?: UserData | null
-}>()
-
-const auth = useAuthStore()
-const ui = useUiStore()
-
-async function handleLogout() {
-    await auth.logout()
-    await navigateTo('/login')
-}
-</script>

frontend/components/ui/SidebarLink.vue

@@ -1,52 +0,0 @@
-<template>
-    <NuxtLink
-        :to="to"
-        class="group/link relative flex items-center transition-colors hover:text-primary-500"
-        :class="linkClasses"
-        :active-class="exact ? '' : activeClass"
-        :exact-active-class="exact ? activeClass : ''"
-    >
-        <Icon :name="icon" :size="sub ? '20' : '24'" class="flex-shrink-0" />
-        <span
-            v-if="!collapsed"
-            class="self-baseline whitespace-nowrap overflow-hidden transition-opacity duration-300"
-            :class="sub ? 'text-sm' : 'text-md'"
-        >
-            {{ label }}
-        </span>
-        <div
-            v-if="collapsed"
-            class="pointer-events-none absolute left-full z-50 ml-2 rounded-md bg-neutral-800 px-2 py-1 text-xs text-white opacity-0 shadow-lg transition-opacity group-hover/link:pointer-events-auto group-hover/link:opacity-100 whitespace-nowrap"
-        >
-            {{ label }}
-        </div>
-    </NuxtLink>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-    to: string
-    icon: string
-    label: string
-    collapsed: boolean
-    sub?: boolean
-    exact?: boolean
-}>()
-
-const activeClass = computed(() => {
-    if (props.collapsed) {
-        return '!text-primary-500 bg-primary-500/10'
-    }
-    return '!text-primary-500 bg-tertiary-500'
-})
-
-const linkClasses = computed(() => {
-    if (props.collapsed) {
-        return 'justify-center w-10 h-10 mx-auto my-1 p-2 rounded-lg text-neutral-600 hover:text-primary-500 hover:bg-primary-500/10'
-    }
-    if (props.sub) {
-        return 'gap-3 px-4 py-2 pl-12 text-sm font-semibold text-neutral-700'
-    }
-    return 'gap-3 px-4 py-3 text-md font-semibold text-neutral-700'
-})
-</script>

frontend/composables/useApi.ts

@@ -1,203 +0,0 @@
-import type { FetchOptions } from 'ofetch'
-import { $fetch, FetchError } from 'ofetch'
-import { useAuthStore } from '~/stores/auth'
-
-export type AnyObject = Record<string, unknown>
-
-export type ApiClient = {
-  get<T>(url: string, query?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
-  post<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
-  put<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
-  patch<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
-  delete<T>(url: string, query?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
-}
-
-export type ApiFetchOptions<ResponseType extends 'json' | 'blob'> =
-  FetchOptions<ResponseType> & {
-    toast?: boolean
-    toastOn401?: boolean
-    toastTitle?: string
-    toastErrorMessage?: string
-    toastSuccessMessage?: string
-    toastErrorKey?: string
-    toastSuccessKey?: string
-  }
-
-let isHandlingUnauthorized = false
-
-export function useApi(): ApiClient {
-  const config = useRuntimeConfig()
-  const baseURL = config.public.apiBase || '/api'
-  const toast = useToast()
-  const auth = useAuthStore()
-  const nuxtApp = useNuxtApp()
-  const i18n = nuxtApp.$i18n as
-    | {
-        t: (key: string) => string
-        te?: (key: string) => boolean
-      }
-    | undefined
-  const t = (key: string) => (i18n?.t ? String(i18n.t(key)) : key)
-  const te = (key: string) => (i18n?.te ? i18n.te(key) : false)
-
-  function extractErrorMessage(error: unknown, responseData?: unknown): string {
-    const data = responseData ?? (error as FetchError)?.data
-
-    if (typeof data === 'string') {
-      return data
-    }
-
-    if (data && typeof data === 'object') {
-      const record = data as Record<string, unknown>
-      return (
-        (record['hydra:description'] as string) ||
-        (record.detail as string) ||
-        (record.message as string) ||
-        (record.error as string) ||
-        (record.title as string) ||
-        (record['hydra:title'] as string) ||
-        ''
-      )
-    }
-
-    return (error as FetchError)?.message ?? 'Erreur inconnue.'
-  }
-
-  const methodErrorKeys: Record<string, string> = {
-    GET: 'errors.http.get',
-    POST: 'errors.http.post',
-    PUT: 'errors.http.put',
-    PATCH: 'errors.http.patch',
-    DELETE: 'errors.http.delete'
-  }
-
-  const client = $fetch.create({
-    baseURL,
-    retry: 0,
-    credentials: 'include',
-    onResponse({ options, response }) {
-      const apiOptions = options as ApiFetchOptions<'json'>
-      if (apiOptions?.toast === false) {
-        return
-      }
-
-      if (response?.status && response.status >= 400) {
-        return
-      }
-
-      const successKey = apiOptions?.toastSuccessKey
-      const successMessage =
-        apiOptions?.toastSuccessMessage ||
-        (successKey ? (te(successKey) ? t(successKey) : successKey) : '')
-
-      if (successMessage) {
-        toast.success({
-          title: 'Succes',
-          message: successMessage
-        })
-      }
-    },
-    async onResponseError({ response, error, options }) {
-      const apiOptions = options as ApiFetchOptions<'json'>
-      if (response?.status === 401) {
-        const requestUrl = typeof options?.url === 'string' ? options.url : ''
-        const isLoginCheck = requestUrl.includes('/login_check')
-        const isLogout = requestUrl.includes('/logout')
-        const shouldToast401 = apiOptions?.toastOn401 === true && apiOptions?.toast !== false
-
-        if (shouldToast401) {
-          const errorKey = apiOptions?.toastErrorKey
-          const errorMessage =
-            errorKey ? (te(errorKey) ? t(errorKey) : errorKey) : ''
-          const extractedMessage = extractErrorMessage(error, response?._data)
-          const message =
-            apiOptions?.toastErrorMessage ||
-            errorMessage ||
-            extractedMessage ||
-            'Une erreur est survenue.'
-
-          toast.error({
-            title: apiOptions?.toastTitle ?? 'Erreur',
-            message
-          })
-        }
-
-        if (!isLoginCheck && !isLogout) {
-          if (!isHandlingUnauthorized) {
-            isHandlingUnauthorized = true
-            auth.clearSession()
-            await navigateTo('/login')
-            isHandlingUnauthorized = false
-          }
-        }
-
-        return
-      }
-
-      if (apiOptions?.toast === false) {
-        return
-      }
-
-      const method =
-        typeof options?.method === 'string' ? options.method.toUpperCase() : 'GET'
-      const defaultKey = methodErrorKeys[method]
-      const defaultMessage =
-        defaultKey && te(defaultKey) ? t(defaultKey) : ''
-      const errorKey = apiOptions?.toastErrorKey
-      const errorMessage =
-        errorKey ? (te(errorKey) ? t(errorKey) : errorKey) : ''
-      const extractedMessage = extractErrorMessage(error, response?._data)
-      const message =
-        apiOptions?.toastErrorMessage ||
-        errorMessage ||
-        defaultMessage ||
-        extractedMessage ||
-        'Une erreur est survenue.'
-
-      toast.error({
-        title: apiOptions?.toastTitle ?? 'Erreur',
-        message
-      })
-    }
-  })
-
-  function request<T>(
-    method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
-    url: string,
-    options: ApiFetchOptions<'json'> = {}
-  ) {
-    const needsJsonBody = method === 'POST' || method === 'PUT'
-    const needsMergePatch = method === 'PATCH'
-    const isFormData = typeof FormData !== 'undefined' && options.body instanceof FormData
-
-    const headers = new Headers(options.headers as HeadersInit | undefined)
-
-    if (!isFormData) {
-      if (needsMergePatch && !headers.has('Content-Type')) {
-        headers.set('Content-Type', 'application/merge-patch+json')
-      } else if (needsJsonBody && !headers.has('Content-Type')) {
-        headers.set('Content-Type', 'application/json')
-      }
-    }
-
-    return client<T>(url, { ...options, method, headers })
-  }
-
-  return {
-    get<T>(url: string, query: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
-      return request<T>('GET', url, { ...options, query })
-    },
-    post<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
-      return request<T>('POST', url, { ...options, body })
-    },
-    put<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
-      return request<T>('PUT', url, { ...options, body })
-    },
-    patch<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
-      return request<T>('PATCH', url, { ...options, body })
-    },
-    delete<T>(url: string, query: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
-      return request<T>('DELETE', url, { ...options, query })
-    }
-  }
-}

frontend/eslint.config.mjs

@@ -0,0 +1,60 @@
+import nuxt from '@nuxt/eslint-config'
+
+export default await nuxt(
+    {
+        features: {
+            stylistic: false,
+            typescript: true,
+            nuxt: {
+                sortConfigKeys: false,
+            },
+        },
+        dirs: {
+            root: ['.', './app'],
+        },
+    },
+    {
+        name: 'coltura/custom-overrides',
+        rules: {
+            // Indentation 4 espaces (convention CLAUDE.md)
+            'vue/html-indent': ['error', 4],
+            indent: ['error', 4, { SwitchCase: 1 }],
+
+            // Vue — relaxed
+            'vue/multi-word-component-names': 'off',
+            'vue/no-multiple-template-root': 'off',
+            'vue/require-default-prop': 'off',
+            'vue/html-self-closing': 'off',
+            'vue/singleline-html-element-content-newline': 'off',
+            'vue/multiline-html-element-content-newline': 'off',
+            'vue/attributes-order': 'off',
+            'vue/v-on-event-hyphenation': 'off',
+
+            // Console — allow console.error only
+            'no-console': ['warn', { allow: ['error'] }],
+
+            // Unused vars — warn, ignore underscore-prefixed
+            'no-unused-vars': 'off',
+            '@typescript-eslint/no-unused-vars': ['warn', {
+                argsIgnorePattern: '^_',
+                varsIgnorePattern: '^_',
+                caughtErrorsIgnorePattern: '^_',
+            }],
+
+            // TypeScript — progressive strictness
+            '@typescript-eslint/no-explicit-any': 'warn',
+            '@typescript-eslint/no-dynamic-delete': 'off',
+            '@typescript-eslint/no-invalid-void-type': 'off',
+
+            // Formatting — leave to stylistic tools
+            'require-await': 'off',
+            'comma-dangle': 'off',
+            curly: 'off',
+            semi: 'off',
+            quotes: 'off',
+            'no-trailing-spaces': 'off',
+            'no-multiple-empty-lines': 'off',
+            'no-irregular-whitespace': 'off',
+        },
+    },
+)

frontend/i18n/locales/fr.json

@@ -12,14 +12,26 @@
         "no": "Non",
         "actions": "Actions"
     },
-    "nav": {
-        "dashboard": "Tableau de bord",
-        "admin": "Administration"
+    "sidebar": {
+        "general": {
+            "section": "Général",
+            "dashboard": "Tableau de bord",
+            "admin": "Administration",
+            "logout": "Déconnexion"
+        },
+        "commercial": {
+            "section": "Commercial",
+            "suppliers": "Répertoire fournisseurs"
+        }
     },
     "dashboard": {
         "title": "Tableau de bord",
         "welcome": "Bienvenue sur Coltura"
     },
+    "commercial": {
+        "title": "Commercial",
+        "welcome": "Module Commercial"
+    },
     "auth": {
         "login": "Connexion",
         "logout": "Deconnexion",
@@ -29,7 +41,7 @@
     "errors": {
         "auth": {
             "login": "Identifiants invalides",
-            "session": "Session expir\u00e9e",
+            "session": "Session expirée",
             "logout": "Erreur lors de la deconnexion"
         },
         "http": {

frontend/layouts/auth.vue

@@ -1,7 +0,0 @@
-<template>
-  <div class="min-h-screen bg-tertiary-500 from-tertiary-500 via-white to-neutral-100 text-neutral-900">
-    <main class="mx-auto flex min-h-screen w-full max-w-[720px] items-center px-6 py-12">
-      <slot />
-    </main>
-  </div>
-</template>

frontend/layouts/default.vue

@@ -1,111 +0,0 @@
-<template>
-    <div class="h-screen overflow-hidden">
-        <div class="flex h-full">
-            <!-- Mobile sidebar overlay -->
-            <Transition name="sidebar-overlay">
-                <div
-                    v-if="ui.sidebarOpen"
-                    class="fixed inset-0 z-40 bg-black/50 lg:hidden"
-                    @click="ui.closeMobileSidebar()"
-                />
-            </Transition>
-
-            <aside
-                class="fixed inset-y-0 left-0 z-50 flex h-full flex-shrink-0 flex-col border-r border-neutral-200 bg-tertiary-500 transition-transform duration-300 lg:static lg:z-auto lg:translate-x-0"
-                :class="[
-                    ui.sidebarCollapsed ? 'lg:w-16' : 'lg:w-64',
-                    ui.sidebarOpen ? 'w-64 translate-x-0' : '-translate-x-full',
-                ]"
-            >
-                <div class="flex items-center overflow-hidden" :class="sidebarIsCollapsed ? 'justify-center p-3' : 'justify-between'">
-                    <span v-if="!sidebarIsCollapsed" class="px-4 py-3 text-lg font-bold text-white">
-                        Coltura
-                    </span>
-                    <span v-else class="px-2 py-3 text-sm font-bold text-white">
-                        C
-                    </span>
-                    <button
-                        class="mr-2 rounded-md p-2 text-neutral-500 hover:bg-neutral-200 hover:text-neutral-700 transition-colors lg:hidden"
-                        @click="ui.closeMobileSidebar()"
-                    >
-                        <Icon name="mdi:close" size="20" />
-                    </button>
-                </div>
-                <nav class="flex-1 overflow-hidden" :class="sidebarIsCollapsed ? 'px-1 pb-6' : 'px-4 pb-6'">
-                    <SidebarLink
-                        to="/"
-                        icon="mdi:view-dashboard-outline"
-                        :label="$t('nav.dashboard')"
-                        :collapsed="sidebarIsCollapsed"
-                        :class="sidebarIsCollapsed ? 'mt-4' : 'border-t border-secondary-500 pt-6'"
-                        @click="ui.closeMobileSidebar()"
-                    />
-                    <SidebarLink
-                        to="/admin"
-                        icon="mdi:cog-outline"
-                        :label="$t('nav.admin')"
-                        :collapsed="sidebarIsCollapsed"
-                        @click="ui.closeMobileSidebar()"
-                    />
-                </nav>
-
-                <div class="flex items-center justify-center p-4">
-                    <p v-if="!sidebarIsCollapsed" class="font-bold text-white">v {{ version }}</p>
-                </div>
-
-                <!-- Collapse toggle button -->
-                <button
-                    class="absolute top-1/2 -right-4 z-10 hidden h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border border-neutral-200 bg-white text-neutral-400 shadow-sm hover:text-neutral-700 transition-colors lg:flex"
-                    :title="ui.sidebarCollapsed ? 'Ouvrir le menu' : 'Reduire le menu'"
-                    @click="ui.toggleSidebar()"
-                >
-                    <Icon
-                        :name="ui.sidebarCollapsed ? 'mdi:chevron-right' : 'mdi:chevron-left'"
-                        size="18"
-                    />
-                </button>
-            </aside>
-
-            <div class="h-full flex-1 flex flex-col min-h-0 min-w-0">
-                <AppTopNav :user="auth.user" />
-                <main class="flex flex-1 flex-col overflow-y-auto overflow-x-hidden bg-white px-4 pb-24 sm:px-8 lg:px-16">
-                    <div aria-hidden="true" class="pointer-events-none sticky top-0 z-30 h-8 flex-shrink-0 bg-white sm:h-12" />
-                    <slot/>
-                </main>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script setup lang="ts">
-import { useAppVersion } from '~/composables/useAppVersion'
-
-const auth = useAuthStore()
-const ui = useUiStore()
-const {version} = useAppVersion()
-const route = useRoute()
-
-const sidebarIsCollapsed = computed(() => {
-    if (ui.sidebarOpen) return false
-    return ui.sidebarCollapsed
-})
-
-watch(() => route.path, () => {
-    ui.closeMobileSidebar()
-})
-
-useHead({
-    titleTemplate: (title) => title || 'Coltura',
-})
-</script>
-
-<style scoped>
-.sidebar-overlay-enter-active,
-.sidebar-overlay-leave-active {
-    transition: opacity 0.3s ease;
-}
-.sidebar-overlay-enter-from,
-.sidebar-overlay-leave-to {
-    opacity: 0;
-}
-</style>

frontend/modules/commercial/nuxt.config.ts

@@ -0,0 +1 @@
+export default defineNuxtConfig({})

frontend/modules/commercial/pages/commercial.vue

@@ -0,0 +1,12 @@
+<template>
+    <div>
+        <h1 class="text-xl font-bold text-primary-500 sm:text-2xl">{{ $t('commercial.title') }}</h1>
+        <p class="mt-4 text-neutral-500">{{ $t('commercial.welcome') }}</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+const { t } = useI18n()
+
+useHead({ title: t('commercial.title') })
+</script>

frontend/modules/core/nuxt.config.ts

@@ -0,0 +1 @@
+export default defineNuxtConfig({})

frontend/modules/core/pages/login.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="mx-auto w-full max-w-lg">
-    <span
-        class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
-    >
-        <img src="/coltura.png" alt="Logo" class="w-[150px]"/>
-    </span>
+        <span
+            class="flex items-center justify-center bg-white text-xl font-bold uppercase text-primary-500 p-4"
+        >
+            <img src="/LOGO_MALIO.png" alt="Logo" class="w-[150px]"/>
+        </span>
         <form
             class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
             @submit.prevent="handleSubmit"
@@ -13,22 +13,16 @@
                 label="Nom d'utilisateur"
                 autocomplete="username"
                 group-class="mt-0"
-                inputClass="w-full"
+                input-class="w-full"
                 v-model="username"
             />
 
-            <div>
-                <label class="text-sm font-semibold text-neutral-700" for="password">
-                    Mot de passe
-                </label>
-                <input
-                    id="password"
-                    v-model="password"
-                    type="password"
-                    autocomplete="current-password"
-                    class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20"
-                />
-            </div>
+            <MalioInputPassword
+                v-model="password"
+                label="Mot de passe"
+                autocomplete="current-password"
+                input-class="w-full"
+            />
 
             <MalioButton
                 label="Se connecter"

frontend/modules/core/pages/logout.vue

@@ -0,0 +1,18 @@
+<template>
+    <div class="flex h-full items-center justify-center">
+        <p class="text-neutral-500">{{ $t('auth.logout') }}...</p>
+    </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({ layout: 'auth' })
+
+const auth = useAuthStore()
+const { resetSidebar } = useSidebar()
+
+onMounted(async () => {
+    await auth.logout()
+    resetSidebar()
+    await navigateTo('/login')
+})
+</script>

frontend/nuxt.config.ts

@@ -1,14 +1,29 @@
+import { readdirSync, existsSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+// Auto-detect module layers: every directory under frontend/modules/ becomes a Nuxt layer.
+const modulesDir = resolve(__dirname, 'modules')
+const moduleLayers = existsSync(modulesDir)
+    ? readdirSync(modulesDir, { withFileTypes: true })
+        .filter(d => d.isDirectory())
+        .map(d => `./modules/${d.name}`)
+    : []
+
 export default defineNuxtConfig({
     compatibilityDate: '2025-07-15',
     devtools: {enabled: false},
     ssr: false,
+    srcDir: '.',
     css: ['~/assets/css/main.css'],
     app: {
         baseURL: process.env.NODE_ENV === 'production'
             ? (process.env.NUXT_PUBLIC_APP_BASE || '/')
             : '/'
     },
-    extends: ['@malio/layer-ui'],
+    extends: [
+        '@malio/layer-ui',
+        ...moduleLayers,
+    ],
     modules: [
         '@nuxtjs/tailwindcss',
         '@pinia/nuxt',
@@ -22,11 +37,22 @@ export default defineNuxtConfig({
         }
     },
     devServer: {
-        port: 3003,
+        port: 3004,
+    },
+    dir: {
+        layouts: 'app/layouts',
+        middleware: 'app/middleware',
     },
     components: [
-        {path: '~/components', pathPrefix: false},
+        {path: '~/shared/components', pathPrefix: false},
     ],
+    imports: {
+        dirs: [
+            'shared/composables',
+            'shared/utils',
+            'shared/stores',
+        ],
+    },
     vite: {
         server: {
             allowedHosts: true,

frontend/package.json

@@ -8,10 +8,12 @@
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
-    "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist"
+    "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
   },
   "dependencies": {
-    "@malio/layer-ui": "^1.2.2",
+    "@malio/layer-ui": "^1.2.3",
     "@nuxt/icon": "^2.2.1",
     "@nuxtjs/i18n": "^10.2.3",
     "@nuxtjs/tailwindcss": "^6.14.0",
@@ -21,5 +23,13 @@
     "pinia": "^3.0.4",
     "vue": "^3.5.29",
     "vue-router": "^4.6.4"
+  },
+  "devDependencies": {
+    "@nuxt/eslint-config": "^1.9.0",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
+    "eslint": "^9.36.0",
+    "eslint-plugin-vue": "^10.5.0",
+    "vue-eslint-parser": "^10.2.0"
   }
 }

frontend/shared/composables/useApi.ts

@@ -0,0 +1,202 @@
+import type { FetchOptions , FetchError } from 'ofetch'
+import { $fetch } from 'ofetch'
+
+export type AnyObject = Record<string, unknown>
+
+export type ApiClient = {
+  get<T>(url: string, query?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  post<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  put<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  patch<T>(url: string, body?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+  delete<T>(url: string, query?: AnyObject, options?: ApiFetchOptions<'json'>): Promise<T>
+}
+
+export type ApiFetchOptions<ResponseType extends 'json' | 'blob'> =
+  FetchOptions<ResponseType> & {
+    toast?: boolean
+    toastOn401?: boolean
+    toastTitle?: string
+    toastErrorMessage?: string
+    toastSuccessMessage?: string
+    toastErrorKey?: string
+    toastSuccessKey?: string
+  }
+
+let isHandlingUnauthorized = false
+
+export function useApi(): ApiClient {
+    const config = useRuntimeConfig()
+    const baseURL = config.public.apiBase || '/api'
+    const toast = useToast()
+    const auth = useAuthStore()
+    const nuxtApp = useNuxtApp()
+    const i18n = nuxtApp.$i18n as
+    | {
+        t: (key: string) => string
+        te?: (key: string) => boolean
+      }
+    | undefined
+    const t = (key: string) => (i18n?.t ? String(i18n.t(key)) : key)
+    const te = (key: string) => (i18n?.te ? i18n.te(key) : false)
+
+    function extractErrorMessage(error: unknown, responseData?: unknown): string {
+        const data = responseData ?? (error as FetchError)?.data
+
+        if (typeof data === 'string') {
+            return data
+        }
+
+        if (data && typeof data === 'object') {
+            const record = data as Record<string, unknown>
+            return (
+                (record['hydra:description'] as string) ||
+        (record.detail as string) ||
+        (record.message as string) ||
+        (record.error as string) ||
+        (record.title as string) ||
+        (record['hydra:title'] as string) ||
+        ''
+            )
+        }
+
+        return (error as FetchError)?.message ?? 'Erreur inconnue.'
+    }
+
+    const methodErrorKeys: Record<string, string> = {
+        GET: 'errors.http.get',
+        POST: 'errors.http.post',
+        PUT: 'errors.http.put',
+        PATCH: 'errors.http.patch',
+        DELETE: 'errors.http.delete'
+    }
+
+    const client = $fetch.create({
+        baseURL,
+        retry: 0,
+        credentials: 'include',
+        onResponse({ options, response }) {
+            const apiOptions = options as ApiFetchOptions<'json'>
+            if (apiOptions?.toast === false) {
+                return
+            }
+
+            if (response?.status && response.status >= 400) {
+                return
+            }
+
+            const successKey = apiOptions?.toastSuccessKey
+            const successMessage =
+        apiOptions?.toastSuccessMessage ||
+        (successKey ? (te(successKey) ? t(successKey) : successKey) : '')
+
+            if (successMessage) {
+                toast.success({
+                    title: 'Succes',
+                    message: successMessage
+                })
+            }
+        },
+        async onResponseError({ response, error, options }) {
+            const apiOptions = options as ApiFetchOptions<'json'>
+            if (response?.status === 401) {
+                const requestUrl = typeof options?.url === 'string' ? options.url : ''
+                const isLoginCheck = requestUrl.includes('/login_check')
+                const isLogout = requestUrl.includes('/logout')
+                const shouldToast401 = apiOptions?.toastOn401 === true && apiOptions?.toast !== false
+
+                if (shouldToast401) {
+                    const errorKey = apiOptions?.toastErrorKey
+                    const errorMessage =
+            errorKey ? (te(errorKey) ? t(errorKey) : errorKey) : ''
+                    const extractedMessage = extractErrorMessage(error, response?._data)
+                    const message =
+            apiOptions?.toastErrorMessage ||
+            errorMessage ||
+            extractedMessage ||
+            'Une erreur est survenue.'
+
+                    toast.error({
+                        title: apiOptions?.toastTitle ?? 'Erreur',
+                        message
+                    })
+                }
+
+                if (!isLoginCheck && !isLogout) {
+                    if (!isHandlingUnauthorized) {
+                        isHandlingUnauthorized = true
+                        auth.clearSession()
+                        await navigateTo('/login')
+                        isHandlingUnauthorized = false
+                    }
+                }
+
+                return
+            }
+
+            if (apiOptions?.toast === false) {
+                return
+            }
+
+            const method =
+        typeof options?.method === 'string' ? options.method.toUpperCase() : 'GET'
+            const defaultKey = methodErrorKeys[method]
+            const defaultMessage =
+        defaultKey && te(defaultKey) ? t(defaultKey) : ''
+            const errorKey = apiOptions?.toastErrorKey
+            const errorMessage =
+        errorKey ? (te(errorKey) ? t(errorKey) : errorKey) : ''
+            const extractedMessage = extractErrorMessage(error, response?._data)
+            const message =
+        apiOptions?.toastErrorMessage ||
+        errorMessage ||
+        defaultMessage ||
+        extractedMessage ||
+        'Une erreur est survenue.'
+
+            toast.error({
+                title: apiOptions?.toastTitle ?? 'Erreur',
+                message
+            })
+        }
+    })
+
+    function request<T>(
+        method: 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE',
+        url: string,
+        options: ApiFetchOptions<'json'> = {}
+    ) {
+        const needsJsonBody = method === 'POST' || method === 'PUT'
+        const needsMergePatch = method === 'PATCH'
+        const isFormData = typeof FormData !== 'undefined' && options.body instanceof FormData
+
+        const headers = new Headers(options.headers as HeadersInit | undefined)
+
+        if (!isFormData) {
+            if (needsMergePatch && !headers.has('Content-Type')) {
+                headers.set('Content-Type', 'application/merge-patch+json')
+            } else if (needsJsonBody && !headers.has('Content-Type')) {
+                headers.set('Content-Type', 'application/json')
+            }
+        }
+
+        return client<T>(url, { ...options, method, headers })
+    }
+
+    return {
+        get<T>(url: string, query: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+            return request<T>('GET', url, { ...options, query })
+        },
+        post<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+            return request<T>('POST', url, { ...options, body })
+        },
+        put<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+            return request<T>('PUT', url, { ...options, body })
+        },
+        patch<T>(url: string, body: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+            return request<T>('PATCH', url, { ...options, body })
+        },
+        delete<T>(url: string, query: AnyObject = {}, options: ApiFetchOptions<'json'> = {}) {
+            return request<T>('DELETE', url, { ...options, query })
+        }
+    }
+}

frontend/shared/composables/useSidebar.ts

@@ -0,0 +1,46 @@
+import type { SidebarSection } from '~/shared/types'
+
+const sections = ref<SidebarSection[]>([])
+const disabledRoutes = ref<string[]>([])
+const loaded = ref(false)
+
+export function useSidebar() {
+    async function loadSidebar() {
+        try {
+            const api = useApi()
+            const data = await api.get<{ sections: SidebarSection[]; disabledRoutes: string[] }>(
+                '/sidebar',
+                {},
+                { toast: false }
+            )
+            sections.value = data.sections ?? []
+            disabledRoutes.value = data.disabledRoutes ?? []
+            loaded.value = true
+        } catch {
+            sections.value = []
+            disabledRoutes.value = []
+            loaded.value = true
+        }
+    }
+
+    function isRouteDisabled(path: string): boolean {
+        return disabledRoutes.value.some(
+            disabled => path === disabled || path.startsWith(disabled + '/')
+        )
+    }
+
+    function resetSidebar() {
+        sections.value = []
+        disabledRoutes.value = []
+        loaded.value = false
+    }
+
+    return {
+        sections,
+        disabledRoutes,
+        loaded,
+        loadSidebar,
+        resetSidebar,
+        isRouteDisabled,
+    }
+}

frontend/shared/services/auth.ts

@@ -1,4 +1,4 @@
-import type { UserData } from './dto/user-data'
+import type { UserData } from '~/shared/types/user-data'
 
 export function getCurrentUser() {
     const api = useApi()

frontend/shared/stores/auth.ts

@@ -1,6 +1,6 @@
 import { defineStore } from 'pinia'
-import type { UserData } from '~/services/dto/user-data'
-import { getCurrentUser, login, logout } from '~/services/auth'
+import type { UserData } from '~/shared/types/user-data'
+import { getCurrentUser, login, logout } from '~/shared/services/auth'
 
 export const useAuthStore = defineStore('auth', {
     state: () => ({

frontend/shared/types/index.ts

@@ -0,0 +1,11 @@
+export interface SidebarItem {
+    label: string
+    to: string
+    icon: string
+}
+
+export interface SidebarSection {
+    label: string
+    icon: string
+    items: SidebarItem[]
+}