fix : resolve runtime errors and improve configuration

- Add explicit imports for useClientService/useProjectService (not auto-imported from services/)
- Fix AppDrawer v-if placement on Teleport to avoid slot warning
- Add json format support in API Platform config (415 fix)
- Support both hydra:member and member keys in extractHydraMembers
- Add Vite/Nitro dev proxy for API calls
- Update CLAUDE.md with full project documentation
- Use tertiary-500 background for project cards

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

config/packages/api_platform.yaml

@@ -1,6 +1,11 @@
 api_platform:
     title: Hello API Platform
     version: 1.0.0
+    formats:
+        jsonld: ['application/ld+json']
+        json: ['application/json']
+    patch_formats:
+        json: ['application/merge-patch+json']
     defaults:
         stateless: true
         cache_headers:

frontend/components/AppDrawer.vue

@@ -1,8 +1,7 @@
 <template>
-    <Teleport to="body">
+    <Teleport v-if="modelValue" to="body">
-        <Transition name="drawer">
+        <Transition name="drawer" appear>
             <div
-                v-if="modelValue"
                 class="fixed inset-0 z-40 flex justify-end"
             >
                 <div

frontend/components/ClientDrawer.vue

@@ -49,6 +49,7 @@
 
 <script setup lang="ts">
 import type { Client, ClientWrite } from '~/services/dto/client'
+import { useClientService } from '~/services/clients'
 
 const props = defineProps<{
     modelValue: boolean

frontend/components/ProjectDrawer.vue

@@ -40,6 +40,7 @@
 <script setup lang="ts">
 import type { Project, ProjectWrite } from '~/services/dto/project'
 import type { Client } from '~/services/dto/client'
+import { useProjectService } from '~/services/projects'
 
 const props = defineProps<{
     modelValue: boolean

frontend/composables/useApi.ts

@@ -31,7 +31,7 @@ export type ApiFetchOptions<ResponseType extends 'json' | 'blob'> =
 
 export const useApi = (): ApiClient => {
   const config = useRuntimeConfig()
-  const baseURL = config.public.apiBase ?? '/api'
+  const baseURL = config.public.apiBase || '/api'
   const toast = useToast()
   const auth = useAuthStore()
   const nuxtApp = useNuxtApp()

frontend/nuxt.config.ts

@@ -17,10 +17,30 @@ export default defineNuxtConfig({
     ],
     runtimeConfig: {
         public: {
-            apiBase: process.env.NUXT_PUBLIC_API_BASE
+            apiBase: process.env.NUXT_PUBLIC_API_BASE || '/api'
         }
     },
-    devServer: {port: 3002},
+    devServer: {
+        port: 3002,
+    },
+    nitro: {
+        devProxy: {
+            '/api': {
+                target: 'http://nginx',
+                changeOrigin: true,
+            },
+        },
+    },
+    vite: {
+        server: {
+            proxy: {
+                '/api': {
+                    target: 'http://nginx',
+                    changeOrigin: true,
+                },
+            },
+        },
+    },
     toast: {
         settings: {
             timeout: 2000,

frontend/pages/clients.vue

@@ -51,6 +51,7 @@
 
 <script setup lang="ts">
 import type { Client } from '~/services/dto/client'
+import { useClientService } from '~/services/clients'
 
 useHead({ title: 'Clients' })
 

frontend/pages/projects.vue

@@ -14,7 +14,7 @@
             <div
                 v-for="project in projects"
                 :key="project.id"
-                class="cursor-pointer rounded-lg border border-neutral-200 bg-white shadow-sm transition hover:shadow-md"
+                class="cursor-pointer rounded-lg border border-neutral-200 bg-tertiary-500 shadow-sm transition hover:shadow-md"
                 @click="openEdit(project)"
             >
                 <div class="h-2 rounded-t-lg" :style="{ backgroundColor: project.color }" />
@@ -46,6 +46,8 @@
 <script setup lang="ts">
 import type { Project } from '~/services/dto/project'
 import type { Client } from '~/services/dto/client'
+import { useProjectService } from '~/services/projects'
+import { useClientService } from '~/services/clients'
 
 useHead({ title: 'Projets' })
 

frontend/utils/api.ts

@@ -1,8 +1,10 @@
 export type HydraCollection<T> = {
-    'hydra:member': T[]
+    'hydra:member'?: T[]
-    'hydra:totalItems': number
+    'hydra:totalItems'?: number
+    'member'?: T[]
+    'totalItems'?: number
 }
 
 export function extractHydraMembers<T>(response: HydraCollection<T>): T[] {
-    return response['hydra:member'] ?? []
+    return response['hydra:member'] ?? response['member'] ?? []
 }