feat : mise à jour de la structure du projet

frontend/app/layouts/default.vue

@@ -0,0 +1,52 @@
+<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/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/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

@@ -3,7 +3,7 @@
     <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]"/>
+        <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"
@@ -17,18 +17,12 @@
                 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"
+              inputClass="w-full"
+          />
 
             <MalioButton
                 label="Se connecter"

frontend/modules/core/pages/logout.vue

@@ -0,0 +1,16 @@
+<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()
+
+onMounted(async () => {
+    await auth.logout()
+    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

@@ -11,7 +11,7 @@
     "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist"
   },
   "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",

frontend/shared/composables/useApi.ts

@@ -1,6 +1,5 @@
 import type { FetchOptions } from 'ofetch'
 import { $fetch, FetchError } from 'ofetch'
-import { useAuthStore } from '~/stores/auth'
 
 export type AnyObject = Record<string, unknown>
 

frontend/shared/composables/useSidebar.ts

@@ -0,0 +1,39 @@
+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 + '/')
+        )
+    }
+
+    return {
+        sections,
+        disabledRoutes,
+        loaded,
+        loadSidebar,
+        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[]
+}