feat(documents): migrate storage to filesystem, add server-side pagination

- Replace Base64 data URIs with file-based storage served via dedicated endpoints
- Add DocumentPreviewModal navigation, DocumentThumbnail fileUrl support
- Refactor documents page with server-side pagination, search, sort and filters
- Update all components to use fileUrl/downloadUrl instead of raw path
- Add pagination composable support (total, page, itemsPerPage, attachmentFilter)

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

app/composables/useApi.ts

@@ -20,11 +20,10 @@ export function useApi() {
 
   const apiCall = async <T = any>(endpoint: string, options: ApiCallOptions = {}): Promise<ApiResponse<T>> => {
     const url = `${API_BASE_URL}${endpoint}`
+    const isFormData = options.body instanceof FormData
     const defaultOptions: ApiCallOptions = {
       credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      headers: isFormData ? {} : { 'Content-Type': 'application/json' },
     }
 
     // Ajouter un timeout à la requête
@@ -115,6 +114,13 @@ export function useApi() {
     })
   }
 
+  const postFormData = async <T = any>(endpoint: string, formData: FormData): Promise<ApiResponse<T>> => {
+    return apiCall<T>(endpoint, {
+      method: 'POST',
+      body: formData,
+    })
+  }
+
   const del = async <T = any>(endpoint: string): Promise<ApiResponse<T>> => {
     return apiCall<T>(endpoint, { method: 'DELETE' })
   }
@@ -123,6 +129,7 @@ export function useApi() {
     apiCall,
     get,
     post,
+    postFormData,
     patch,
     put,
     delete: del,

app/composables/useComposants.ts

@@ -10,6 +10,7 @@ export interface Composant {
   id: string
   name: string
   reference?: string | null
+  description?: string | null
   typeComposantId?: string | null
   typeComposant?: { id: string; name?: string } | null
   productId?: string | null

app/composables/useDocuments.ts

@@ -1,7 +1,6 @@
 import { ref } from 'vue'
 import { useApi } from './useApi'
 import { useToast } from './useToast'
-import { normalizeRelationIds } from '~/shared/apiRelations'
 import { extractCollection } from '~/shared/utils/apiHelpers'
 
 export interface Document {
@@ -10,12 +9,21 @@ export interface Document {
   filename: string
   mimeType: string
   size: number
-  path: string
+  fileUrl: string
+  downloadUrl: string
+  /** @deprecated Legacy Base64 data URI — use fileUrl instead */
+  path?: string
+  createdAt?: string
   siteId?: string
   machineId?: string
   composantId?: string
   productId?: string
   pieceId?: string
+  site?: { id: string; name?: string } | null
+  machine?: { id: string; name?: string } | null
+  composant?: { id: string; name?: string } | null
+  piece?: { id: string; name?: string } | null
+  product?: { id: string; name?: string } | null
 }
 
 export interface UploadContext {
@@ -32,19 +40,30 @@ export interface DocumentResult {
   error?: string
 }
 
-const documents = ref<Document[]>([])
-const loading = ref(false)
+interface LoadDocumentsOptions {
+  search?: string
+  page?: number
+  itemsPerPage?: number
+  orderBy?: string
+  orderDir?: 'asc' | 'desc'
+  attachmentFilter?: string
+  force?: boolean
+}
 
-const fileToBase64 = (file: File): Promise<string> =>
-  new Promise((resolve, reject) => {
-    const reader = new FileReader()
-    reader.onload = () => resolve(reader.result as string)
-    reader.onerror = () => reject(new Error(`Lecture du fichier ${file.name} impossible`))
-    reader.readAsDataURL(file)
-  })
+const documents = ref<Document[]>([])
+const total = ref(0)
+const loading = ref(false)
+const loaded = ref(false)
+
+const extractTotal = (payload: unknown, fallbackLength: number): number => {
+  const p = payload as Record<string, unknown> | null
+  if (typeof p?.totalItems === 'number') return p.totalItems
+  if (typeof p?.['hydra:totalItems'] === 'number') return p['hydra:totalItems']
+  return fallbackLength
+}
 
 export function useDocuments() {
-  const { get, post, delete: del } = useApi()
+  const { get, postFormData, delete: del } = useApi()
   const { showError, showSuccess } = useToast()
 
   const loadFromEndpoint = async (
@@ -76,10 +95,61 @@ export function useDocuments() {
     }
   }
 
-  const loadDocuments = async (
-    options: { updateStore?: boolean; itemsPerPage?: number } = {},
-  ): Promise<DocumentResult> => {
-    return loadFromEndpoint('/documents', { updateStore: options.updateStore ?? true, itemsPerPage: options.itemsPerPage })
+  const loadDocuments = async (options: LoadDocumentsOptions = {}): Promise<DocumentResult> => {
+    const {
+      search = '',
+      page = 1,
+      itemsPerPage = 30,
+      orderBy = 'createdAt',
+      orderDir = 'desc',
+      attachmentFilter = 'all',
+      force = false,
+    } = options
+
+    if (!force && loaded.value && !search && page === 1 && attachmentFilter === 'all') {
+      return { success: true, data: documents.value }
+    }
+
+    if (loading.value) {
+      return { success: true, data: documents.value }
+    }
+
+    loading.value = true
+    try {
+      const params = new URLSearchParams()
+      params.set('itemsPerPage', String(itemsPerPage))
+      params.set('page', String(page))
+
+      if (search && search.trim()) {
+        params.set('name', search.trim())
+      }
+
+      if (attachmentFilter && attachmentFilter !== 'all') {
+        params.set(`exists[${attachmentFilter}]`, 'true')
+      }
+
+      params.set(`order[${orderBy}]`, orderDir)
+
+      const result = await get(`/documents?${params.toString()}`)
+      if (result.success) {
+        const items = extractCollection(result.data)
+        documents.value = items
+        total.value = extractTotal(result.data, items.length)
+        loaded.value = true
+        return { success: true, data: items }
+      }
+      if (result.error) {
+        showError(result.error)
+      }
+      return result as DocumentResult
+    } catch (error) {
+      const err = error as Error
+      console.error('Erreur lors du chargement des documents:', error)
+      showError('Impossible de charger les documents')
+      return { success: false, error: err.message }
+    } finally {
+      loading.value = false
+    }
   }
 
   const loadDocumentsBySite = async (
@@ -145,18 +215,17 @@ export function useDocuments() {
 
     try {
       for (const file of files) {
-        const dataUrl = await fileToBase64(file)
+        const formData = new FormData()
+        formData.append('file', file)
+        formData.append('name', file.name)
 
-        const payload = normalizeRelationIds({
-          name: file.name,
-          filename: file.name,
-          mimeType: file.type || 'application/octet-stream',
-          size: file.size,
-          path: dataUrl,
-          ...context,
-        })
+        if (context.siteId) formData.append('siteId', context.siteId)
+        if (context.machineId) formData.append('machineId', context.machineId)
+        if (context.composantId) formData.append('composantId', context.composantId)
+        if (context.productId) formData.append('productId', context.productId)
+        if (context.pieceId) formData.append('pieceId', context.pieceId)
 
-        const result = await post('/documents', payload)
+        const result = await postFormData('/documents', formData)
         if (result.success) {
           created.push(result.data as Document)
           showSuccess(`Document "${file.name}" ajouté`)
@@ -213,7 +282,9 @@ export function useDocuments() {
 
   return {
     documents,
+    total,
     loading,
+    loaded,
     loadDocuments,
     loadDocumentsBySite,
     loadDocumentsByMachine,

app/composables/usePieces.ts

@@ -10,6 +10,7 @@ export interface Piece {
   id: string
   name: string
   reference?: string | null
+  description?: string | null
   typePieceId?: string | null
   typePiece?: { id: string; name?: string } | null
   productId?: string | null

app/composables/useSiteManagement.ts

@@ -23,6 +23,8 @@ type SiteDocument = {
   mimeType?: string
   size?: number
   path?: string
+  fileUrl?: string
+  downloadUrl?: string
 }
 
 type SiteWithDocuments = {
@@ -209,17 +211,23 @@ export function useSiteManagement() {
   }
 
   const downloadDocument = (doc: SiteDocument) => {
-    if (!doc?.path) return
+    if (doc?.downloadUrl) {
+      window.open(doc.downloadUrl, '_blank')
+      return
+    }
 
-    if (doc.path.startsWith('data:')) {
+    const url = doc?.fileUrl || doc?.path
+    if (!url) return
+
+    if (url.startsWith('data:')) {
       const link = document.createElement('a')
-      link.href = doc.path
+      link.href = url
       link.download = doc.filename || doc.name || 'document'
       link.click()
       return
     }
 
-    window.open(doc.path, '_blank')
+    window.open(url, '_blank')
   }
 
   const openPreview = (doc: SiteDocument) => {