feat : init project Coltura (CRM/ERP)

Symfony 8 + API Platform 4 + Nuxt 4 monorepo.
Backend: User entity, JWT auth, fixtures.
Frontend: login, dashboard, auth middleware, i18n, @malio/layer-ui.
Docker: dev (ports 8083/3003/5436) + prod multi-stage.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

frontend/app.vue

@@ -0,0 +1,13 @@
+<template>
+    <NuxtLayout>
+        <NuxtPage />
+    </NuxtLayout>
+</template>
+
+<script setup lang="ts">
+const { load } = useAppVersion()
+
+onMounted(() => {
+    load()
+})
+</script>

frontend/assets/css/main.css

@@ -0,0 +1 @@
+/* Coltura - Custom styles */

frontend/composables/useApi.ts

@@ -0,0 +1,206 @@
+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()
+            const route = useRoute()
+            if (route.path !== '/login') {
+              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/composables/useAppVersion.ts

@@ -0,0 +1,15 @@
+const version = ref('')
+
+export function useAppVersion() {
+    async function load() {
+        try {
+            const api = useApi()
+            const data = await api.get<{ version: string }>('/version', {}, { toast: false })
+            version.value = data.version
+        } catch {
+            version.value = '?'
+        }
+    }
+
+    return { version, load }
+}

frontend/i18n.config.ts

@@ -0,0 +1,5 @@
+export default defineI18nConfig(() => ({
+    legacy: false,
+    locale: 'fr',
+    fallbackLocale: 'fr',
+}))

frontend/i18n/locales/fr.json

@@ -0,0 +1,48 @@
+{
+    "common": {
+        "loading": "Chargement...",
+        "save": "Enregistrer",
+        "cancel": "Annuler",
+        "delete": "Supprimer",
+        "edit": "Modifier",
+        "create": "Creer",
+        "search": "Rechercher",
+        "confirm": "Confirmer",
+        "yes": "Oui",
+        "no": "Non",
+        "actions": "Actions"
+    },
+    "nav": {
+        "dashboard": "Tableau de bord",
+        "admin": "Administration"
+    },
+    "dashboard": {
+        "title": "Tableau de bord",
+        "welcome": "Bienvenue sur Coltura"
+    },
+    "auth": {
+        "login": "Connexion",
+        "logout": "Deconnexion",
+        "username": "Nom d'utilisateur",
+        "password": "Mot de passe"
+    },
+    "errors": {
+        "auth": {
+            "login": "Identifiants invalides",
+            "session": "Session expir\u00e9e",
+            "logout": "Erreur lors de la deconnexion"
+        },
+        "http": {
+            "get": "Erreur lors du chargement",
+            "post": "Erreur lors de la creation",
+            "put": "Erreur lors de la mise a jour",
+            "patch": "Erreur lors de la modification",
+            "delete": "Erreur lors de la suppression"
+        }
+    },
+    "success": {
+        "auth": {
+            "logout": "Deconnexion reussie"
+        }
+    }
+}

frontend/layouts/default.vue

@@ -0,0 +1,111 @@
+<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/middleware/auth.global.ts

@@ -0,0 +1,16 @@
+export default defineNuxtRouteMiddleware(async (to) => {
+    const auth = useAuthStore()
+    const isLogin = to.path === '/login'
+
+    if (!auth.checked) {
+        await auth.ensureSession()
+    }
+
+    if (!isLogin && !auth.isAuthenticated) {
+        return navigateTo('/login')
+    }
+
+    if (isLogin && auth.isAuthenticated) {
+        return navigateTo('/')
+    }
+})

frontend/nuxt.config.ts

@@ -0,0 +1,59 @@
+export default defineNuxtConfig({
+    compatibilityDate: '2025-07-15',
+    devtools: {enabled: false},
+    ssr: false,
+    css: ['~/assets/css/main.css'],
+    app: {
+        baseURL: process.env.NODE_ENV === 'production'
+            ? (process.env.NUXT_PUBLIC_APP_BASE || '/')
+            : '/'
+    },
+    extends: ['@malio/layer-ui'],
+    modules: [
+        '@nuxtjs/tailwindcss',
+        '@pinia/nuxt',
+        'nuxt-toast',
+        '@nuxtjs/i18n',
+        '@nuxt/icon',
+    ],
+    runtimeConfig: {
+        public: {
+            apiBase: process.env.NUXT_PUBLIC_API_BASE
+        }
+    },
+    devServer: {
+        port: 3003,
+    },
+    components: [
+        {path: '~/components', pathPrefix: false},
+    ],
+    vite: {
+        server: {
+            allowedHosts: true,
+            proxy: {
+                '/api': {
+                    target: 'http://nginx',
+                    changeOrigin: true,
+                },
+            },
+        },
+    },
+    toast: {
+        settings: {
+            timeout: 2000,
+            closeOnClick: true,
+            progressBar: false
+        }
+    },
+    i18n: {
+        strategy: 'no_prefix',
+        defaultLocale: 'fr',
+        langDir: 'locales',
+        locales: [
+            {code: 'fr', file: 'fr.json', name: 'Français'}
+        ],
+    },
+    typescript: {
+        strict: true
+    },
+})

frontend/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "coltura-frontend",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "build": "nuxt build",
+        "dev": "nuxt dev",
+        "generate": "nuxt generate",
+        "preview": "nuxt preview",
+        "postinstall": "nuxt prepare",
+        "build:dist": "nuxt generate && rm -rf dist && cp -R .output/public dist"
+    },
+    "dependencies": {
+        "@malio/layer-ui": "^1.2.0",
+        "@nuxt/icon": "^2.2.1",
+        "@nuxtjs/i18n": "^10.2.3",
+        "@nuxtjs/tailwindcss": "^6.14.0",
+        "@pinia/nuxt": "^0.11.3",
+        "nuxt": "^4.3.1",
+        "nuxt-toast": "^1.4.0",
+        "pinia": "^3.0.4",
+        "vue": "^3.5.29",
+        "vue-router": "^4.6.4"
+    }
+}

frontend/pages/index.vue

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

frontend/pages/login.vue

@@ -0,0 +1,68 @@
+<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>
+        <form
+            class="mt-8 space-y-6 rounded-lg border border-neutral-200 bg-white p-6 shadow-sm"
+            @submit.prevent="handleSubmit"
+        >
+            <MalioInputText
+                label="Nom d'utilisateur"
+                autocomplete="username"
+                group-class="mt-0"
+                inputClass="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>
+
+            <MalioButton
+                label="Se connecter"
+                button-class="w-full"
+                :disabled="isSubmitting"
+                @click="handleSubmit"
+            />
+            <p class="font-bold">v{{ version }}</p>
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({layout: 'auth'})
+useHead({
+    title: 'Connexion'
+})
+
+const auth = useAuthStore()
+const {version} = useAppVersion()
+
+const username = ref('')
+const password = ref('')
+const isSubmitting = ref(false)
+
+async function handleSubmit() {
+    if (isSubmitting.value) return
+
+    isSubmitting.value = true
+    try {
+        await auth.login(username.value, password.value)
+        await navigateTo('/')
+    } finally {
+        isSubmitting.value = false
+    }
+}
+</script>

frontend/services/auth.ts

@@ -0,0 +1,22 @@
+import type { UserData } from './dto/user-data'
+
+export function getCurrentUser() {
+    const api = useApi()
+    return api.get<UserData>('/me', {}, { toastErrorKey: 'errors.auth.session' })
+}
+
+export function login(username: string, password: string) {
+    const api = useApi()
+    return api.post('/login_check', { username, password }, {
+        toastOn401: true,
+        toastErrorKey: 'errors.auth.login'
+    })
+}
+
+export function logout() {
+    const api = useApi()
+    return api.post('/logout', {}, {
+        toastErrorKey: 'errors.auth.logout',
+        toastSuccessKey: 'success.auth.logout'
+    })
+}

frontend/services/dto/user-data.ts

@@ -0,0 +1,5 @@
+export interface UserData {
+    id: number
+    username: string
+    roles: string[]
+}

frontend/stores/auth.ts

@@ -0,0 +1,71 @@
+import { defineStore } from 'pinia'
+import type { UserData } from '~/services/dto/user-data'
+import { getCurrentUser, login, logout } from '~/services/auth'
+
+export const useAuthStore = defineStore('auth', {
+    state: () => ({
+        user: null as UserData | null,
+        isLoading: false,
+        checked: false
+    }),
+    getters: {
+        isAuthenticated: (state) => Boolean(state.user)
+    },
+    actions: {
+        clearSession() {
+            this.user = null
+            this.checked = true
+            this.isLoading = false
+        },
+        async ensureSession() {
+            if (this.checked) {
+                return this.user
+            }
+
+            this.checked = true
+
+            try {
+                const me = await getCurrentUser()
+                this.user = me
+                return me
+            } catch {
+                this.user = null
+                return null
+            }
+        },
+        async login(username: string, password: string) {
+            this.isLoading = true
+
+            try {
+                await login(username, password)
+                const me = await getCurrentUser()
+                this.user = me
+                this.checked = true
+                return me
+            } finally {
+                this.isLoading = false
+            }
+        },
+        async logout() {
+            this.isLoading = true
+
+            try {
+                await logout()
+            } catch {
+                // Ignore logout errors so we can still clear local auth state.
+            } finally {
+                this.user = null
+                this.checked = true
+                this.isLoading = false
+            }
+        },
+        async refreshUser() {
+            try {
+                const me = await getCurrentUser()
+                this.user = me
+            } catch {
+                // Silently fail — user session might have expired
+            }
+        }
+    }
+})

frontend/stores/ui.ts

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia'
+
+export const useUiStore = defineStore('ui', {
+    state: () => ({
+        sidebarCollapsed: false,
+        sidebarOpen: false,
+    }),
+    actions: {
+        toggleSidebar() {
+            this.sidebarCollapsed = !this.sidebarCollapsed
+        },
+        openMobileSidebar() {
+            this.sidebarOpen = true
+        },
+        closeMobileSidebar() {
+            this.sidebarOpen = false
+        },
+    },
+})

frontend/tailwind.config.ts

@@ -0,0 +1,12 @@
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+    content: [
+        './components/**/*.{vue,js,ts}',
+        './layouts/**/*.vue',
+        './pages/**/*.vue',
+        './composables/**/*.{js,ts}',
+        './plugins/**/*.{js,ts}',
+        './app.vue',
+    ],
+}

frontend/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./.nuxt/tsconfig.app.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.server.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.shared.json"
+    },
+    {
+      "path": "./.nuxt/tsconfig.node.json"
+    }
+  ]
+}

frontend/utils/api.ts

@@ -0,0 +1,8 @@
+export interface HydraCollection<T> {
+    'hydra:member': T[]
+    'hydra:totalItems': number
+}
+
+export function extractHydraMembers<T>(collection: HydraCollection<T>): T[] {
+    return collection['hydra:member'] ?? []
+}