From b240dc6fc415a691fee2e1a80b38c5ddffdaf99a Mon Sep 17 00:00:00 2001
From: matthieu <matthieu@yuno.malio.fr>
Date: Mon, 9 Mar 2026 22:55:10 +0100
Subject: [PATCH] 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     |  5 +++++
 frontend/components/AppDrawer.vue     |  5 ++---
 frontend/components/ClientDrawer.vue  |  1 +
 frontend/components/ProjectDrawer.vue |  1 +
 frontend/composables/useApi.ts        |  2 +-
 frontend/nuxt.config.ts               | 24 ++++++++++++++++++++++--
 frontend/pages/clients.vue            |  1 +
 frontend/pages/projects.vue           |  4 +++-
 frontend/utils/api.ts                 |  8 +++++---
 9 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/config/packages/api_platform.yaml b/config/packages/api_platform.yaml
index 02f295a..4948233 100644
--- a/config/packages/api_platform.yaml
+++ b/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:
diff --git a/frontend/components/AppDrawer.vue b/frontend/components/AppDrawer.vue
index 46ffe7b..c46b4dd 100644
--- a/frontend/components/AppDrawer.vue
+++ b/frontend/components/AppDrawer.vue
@@ -1,8 +1,7 @@
 <template>
-    <Teleport to="body">
-        <Transition name="drawer">
+    <Teleport v-if="modelValue" to="body">
+        <Transition name="drawer" appear>
             <div
-                v-if="modelValue"
                 class="fixed inset-0 z-40 flex justify-end"
             >
                 <div
diff --git a/frontend/components/ClientDrawer.vue b/frontend/components/ClientDrawer.vue
index a6d6171..c24a537 100644
--- a/frontend/components/ClientDrawer.vue
+++ b/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
diff --git a/frontend/components/ProjectDrawer.vue b/frontend/components/ProjectDrawer.vue
index ff3ec7c..868e21a 100644
--- a/frontend/components/ProjectDrawer.vue
+++ b/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
diff --git a/frontend/composables/useApi.ts b/frontend/composables/useApi.ts
index ec296b4..b81a602 100644
--- a/frontend/composables/useApi.ts
+++ b/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()
diff --git a/frontend/nuxt.config.ts b/frontend/nuxt.config.ts
index d7aed0e..0499f49 100644
--- a/frontend/nuxt.config.ts
+++ b/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,
diff --git a/frontend/pages/clients.vue b/frontend/pages/clients.vue
index 2ad6bf3..cb6aa48 100644
--- a/frontend/pages/clients.vue
+++ b/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' })
 
diff --git a/frontend/pages/projects.vue b/frontend/pages/projects.vue
index bce0c82..d18b067 100644
--- a/frontend/pages/projects.vue
+++ b/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' })
 
diff --git a/frontend/utils/api.ts b/frontend/utils/api.ts
index 6a220e1..00c033b 100644
--- a/frontend/utils/api.ts
+++ b/frontend/utils/api.ts
@@ -1,8 +1,10 @@
 export type HydraCollection<T> = {
-    'hydra:member': T[]
-    'hydra:totalItems': number
+    'hydra:member'?: T[]
+    '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'] ?? []
 }