feat(site): allow document management

app/components/DocumentUpload.vue

@@ -0,0 +1,151 @@
+<template>
+  <div
+    class="border-2 border-dashed rounded-lg p-6 transition-colors"
+    :class="dragActive ? 'border-primary bg-primary/5' : 'border-base-300 bg-base-100'"
+    @dragover.prevent="onDragOver"
+    @dragleave.prevent="onDragLeave"
+    @drop.prevent="onDrop"
+  >
+    <div class="flex flex-col items-center gap-3 text-center">
+      <svg class="w-10 h-10 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 00-.88 7.912L6 24h12a4 4 0 00.88-7.912L18 16H7zm5-14a4 4 0 014 4v4h1.586a1 1 0 01.707 1.707l-5.586 5.586a1 1 0 01-1.414 0L7.707 11.707A1 1 0 018.414 10H10V6a4 4 0 014-4z" />
+      </svg>
+
+      <div>
+        <h3 class="font-semibold">{{ title }}</h3>
+        <p class="text-sm text-gray-500">{{ subtitle }}</p>
+      </div>
+
+      <div class="flex flex-wrap justify-center gap-2">
+        <button type="button" class="btn btn-primary btn-sm" @click="triggerFileDialog">
+          Sélectionner des fichiers
+        </button>
+        <span class="text-xs text-gray-500">ou glisser-déposer ici</span>
+      </div>
+
+      <input
+        ref="fileInput"
+        type="file"
+        class="hidden"
+        :accept="accept"
+        :multiple="multiple"
+        @change="onFileChange"
+      />
+
+      <ul v-if="selectedFiles.length" class="mt-4 w-full space-y-2 text-left">
+        <li v-for="file in selectedFiles" :key="file.name" class="flex items-center justify-between text-sm">
+          <div class="flex flex-col">
+            <span class="font-medium">{{ file.name }}</span>
+            <span class="text-xs text-gray-500">{{ formatSize(file.size) }} • {{ file.type || 'Type inconnu' }}</span>
+          </div>
+          <button type="button" class="btn btn-ghost btn-xs" @click="removeFile(file)">
+            Retirer
+          </button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: 'Ajouter des documents',
+  },
+  subtitle: {
+    type: String,
+    default: 'Formats acceptés : PDF, images, textes…',
+  },
+  accept: {
+    type: String,
+    default: '',
+  },
+  multiple: {
+    type: Boolean,
+    default: true,
+  },
+  modelValue: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const emit = defineEmits(['update:modelValue', 'files-added'])
+
+const dragActive = ref(false)
+const fileInput = ref(null)
+const internalFiles = ref([])
+
+const selectedFiles = computed(() => internalFiles.value)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (Array.isArray(newValue)) {
+      internalFiles.value = [...newValue]
+    }
+  },
+  { immediate: true }
+)
+
+const triggerFileDialog = () => {
+  fileInput.value?.click()
+}
+
+const emitFiles = (files) => {
+  internalFiles.value = files
+  emit('update:modelValue', files)
+  emit('files-added', files)
+}
+
+const handleFiles = (fileList) => {
+  const files = Array.from(fileList)
+  if (!props.multiple) {
+    emitFiles(files.slice(0, 1))
+  } else {
+    const merged = [...internalFiles.value]
+    files.forEach((file) => {
+      if (!merged.some(existing => existing.name === file.name && existing.size === file.size)) {
+        merged.push(file)
+      }
+    })
+    emitFiles(merged)
+  }
+}
+
+const onFileChange = (event) => {
+  handleFiles(event.target.files || [])
+  event.target.value = ''
+}
+
+const onDragOver = () => {
+  dragActive.value = true
+}
+
+const onDragLeave = () => {
+  dragActive.value = false
+}
+
+const onDrop = (event) => {
+  dragActive.value = false
+  if (event.dataTransfer?.files?.length) {
+    handleFiles(event.dataTransfer.files)
+  }
+}
+
+const removeFile = (fileToRemove) => {
+  const filtered = internalFiles.value.filter(file => file !== fileToRemove)
+  emitFiles(filtered)
+}
+
+const formatSize = (size) => {
+  if (!size) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  const index = Math.floor(Math.log(size) / Math.log(1024))
+  const formatted = size / Math.pow(1024, index)
+  return `${formatted.toFixed(1)} ${units[index]}`
+}
+</script>

app/composables/useDocuments.js

@@ -0,0 +1,126 @@
+import { ref } from 'vue'
+import { useApi } from './useApi'
+import { useToast } from './useToast'
+
+const documents = ref([])
+const loading = ref(false)
+
+const fileToBase64 = (file) =>
+  new Promise((resolve, reject) => {
+    const reader = new FileReader()
+    reader.onload = () => resolve(reader.result)
+    reader.onerror = () => reject(new Error(`Lecture du fichier ${file.name} impossible`))
+    reader.readAsDataURL(file)
+  })
+
+export function useDocuments() {
+  const { get, post, delete: del } = useApi()
+  const { showError, showSuccess } = useToast()
+
+  const loadDocuments = async () => {
+    loading.value = true
+    try {
+      const result = await get('/documents')
+      if (result.success) {
+        documents.value = result.data
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors du chargement des documents:', error)
+      showError("Impossible de charger les documents")
+      return { success: false, error: error.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const loadDocumentsBySite = async (siteId) => {
+    if (!siteId) return { success: false, error: 'Aucun site sélectionné' }
+    loading.value = true
+    try {
+      const result = await get(`/documents/site/${siteId}`)
+      if (result.success) {
+        documents.value = result.data
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors du chargement des documents du site:', error)
+      showError("Impossible de charger les documents du site")
+      return { success: false, error: error.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const uploadDocuments = async ({ files = [], context = {} }) => {
+    if (!files.length) return { success: false, error: 'Aucun fichier sélectionné' }
+
+    loading.value = true
+    const created = []
+
+    try {
+      for (const file of files) {
+        const dataUrl = await fileToBase64(file)
+
+        const payload = {
+          name: file.name,
+          filename: file.name,
+          mimeType: file.type || 'application/octet-stream',
+          size: file.size,
+          path: dataUrl,
+          ...context,
+        }
+
+        const result = await post('/documents', payload)
+        if (result.success) {
+          created.push(result.data)
+          showSuccess(`Document "${file.name}" ajouté`)
+        } else if (result.error) {
+          showError(`Erreur sur ${file.name} : ${result.error}`)
+        }
+      }
+
+      if (created.length) {
+        documents.value = [...created, ...documents.value]
+        return { success: true, data: created }
+      }
+
+      return { success: false, error: 'Aucun document ajouté' }
+    } catch (error) {
+      console.error('Erreur lors de l\'upload des documents:', error)
+      showError("Échec de l'ajout des documents")
+      return { success: false, error: error.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const deleteDocument = async (id) => {
+    if (!id) return { success: false, error: 'Identifiant manquant' }
+
+    loading.value = true
+    try {
+      const result = await del(`/documents/${id}`)
+      if (result.success) {
+        documents.value = documents.value.filter(doc => doc.id !== id)
+        showSuccess('Document supprimé')
+      }
+      return result
+    } catch (error) {
+      console.error('Erreur lors de la suppression du document:', error)
+      showError("Impossible de supprimer le document")
+      return { success: false, error: error.message }
+    } finally {
+      loading.value = false
+    }
+  }
+
+  return {
+    documents,
+    loading,
+    loadDocuments,
+    loadDocumentsBySite,
+    uploadDocuments,
+    deleteDocument,
+  }
+}

app/pages/documents.vue

@@ -0,0 +1,180 @@
+<template>
+  <main class="container mx-auto px-6 py-8 space-y-8">
+    <div class="hero min-h-[25vh] bg-gradient-to-r from-primary to-secondary">
+      <div class="hero-content text-center text-neutral-content">
+        <div class="max-w-xl">
+          <h1 class="mb-3 text-4xl font-bold">Gestion documentaire</h1>
+          <p class="text-sm opacity-90">
+            Consultez tous les documents liés à vos sites, machines et composants. Recherchez et filtrez pour retrouver rapidement l'information.
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <section class="card bg-base-100 shadow-lg">
+      <div class="card-body space-y-6">
+        <div class="flex flex-col gap-4 md:flex-row md:items-end md:justify-between">
+          <div class="w-full md:w-2/3">
+            <label class="label">
+              <span class="label-text">Recherche</span>
+            </label>
+            <input
+              v-model="searchTerm"
+              type="search"
+              placeholder="Nom du document, type, site, machine..."
+              class="input input-bordered w-full"
+            />
+          </div>
+
+          <div class="w-full md:w-1/3">
+            <label class="label">
+              <span class="label-text">Filtrer par rattachement</span>
+            </label>
+            <select v-model="attachmentFilter" class="select select-bordered w-full">
+              <option value="all">Tous</option>
+              <option value="site">Sites</option>
+              <option value="machine">Machines</option>
+              <option value="composant">Composants</option>
+              <option value="piece">Pièces</option>
+            </select>
+          </div>
+        </div>
+
+        <div class="divider my-0"></div>
+
+        <div v-if="loading" class="flex flex-col items-center justify-center py-16 text-sm text-gray-500">
+          <span class="loading loading-spinner loading-lg mb-3"></span>
+          Chargement des documents...
+        </div>
+
+        <div v-else-if="filteredDocuments.length === 0" class="text-center py-16 text-sm text-gray-500">
+          <svg class="mx-auto mb-4 h-14 w-14 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 000 2.828L11.586 19a2 2 0 002.828 0L21 12.414V7H15.172z" />
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 17L3 20m0 0l3 3m-3-3h12" />
+          </svg>
+          Aucun document ne correspond à votre recherche pour l'instant.
+        </div>
+
+        <div v-else class="overflow-x-auto">
+          <table class="table">
+            <thead>
+              <tr class="text-xs uppercase">
+                <th>Nom</th>
+                <th>Type</th>
+                <th>Taille</th>
+                <th>Rattaché à</th>
+                <th>Date</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr v-for="document in filteredDocuments" :key="document.id" class="text-sm">
+                <td>
+                  <div class="font-semibold">{{ document.name }}</div>
+                  <div class="text-xs text-gray-500">{{ document.filename }}</div>
+                </td>
+                <td>{{ document.mimeType || 'Inconnu' }}</td>
+                <td>{{ formatSize(document.size) }}</td>
+                <td>
+                  <div class="flex flex-col text-xs">
+                    <span v-if="document.site">Site · {{ document.site.name }}</span>
+                    <span v-else-if="document.machine">Machine · {{ document.machine.name }}</span>
+                    <span v-else-if="document.composant">Composant · {{ document.composant.name }}</span>
+                    <span v-else-if="document.piece">Pièce · {{ document.piece.name }}</span>
+                    <span v-else class="text-gray-400">Non défini</span>
+                  </div>
+                </td>
+                <td>{{ formatDate(document.createdAt) }}</td>
+                <td class="text-right">
+                  <div class="flex justify-end gap-2">
+                    <button class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+                      Télécharger
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useDocuments } from '~/composables/useDocuments'
+
+const { documents, loading, loadDocuments } = useDocuments()
+
+const searchTerm = ref('')
+const attachmentFilter = ref('all')
+
+onMounted(() => {
+  loadDocuments()
+})
+
+const filteredDocuments = computed(() => {
+  const term = searchTerm.value.trim().toLowerCase()
+  const filter = attachmentFilter.value
+
+  return documents.value.filter((document) => {
+    const matchesFilter =
+      filter === 'all' ||
+      (filter === 'site' && document.siteId) ||
+      (filter === 'machine' && document.machineId) ||
+      (filter === 'composant' && document.composantId) ||
+      (filter === 'piece' && document.pieceId)
+
+    if (!matchesFilter) return false
+
+    if (!term) return true
+
+    const searchable = [
+      document.name,
+      document.filename,
+      document.mimeType,
+      document.site?.name,
+      document.machine?.name,
+      document.composant?.name,
+      document.piece?.name,
+    ]
+      .filter(Boolean)
+      .map(value => value.toLowerCase())
+
+    return searchable.some(value => value.includes(term))
+  })
+})
+
+const formatSize = (size) => {
+  if (size === undefined || size === null) return '—'
+  if (size === 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
+  const formatted = size / Math.pow(1024, index)
+  return `${formatted.toFixed(1)} ${units[index]}`
+}
+
+const formatDate = (date) => {
+  if (!date) return '—'
+  return new Intl.DateTimeFormat('fr-FR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(new Date(date))
+}
+
+const downloadDocument = (doc) => {
+  if (!doc?.path) return
+
+  if (doc.path.startsWith('data:')) {
+    const link = document.createElement('a')
+    link.href = doc.path
+    link.download = doc.filename || doc.name || 'document'
+    link.click()
+    return
+  }
+
+  window.open(doc.path, '_blank')
+}
+</script>

app/pages/sites.vue

@@ -291,11 +291,60 @@
             </div>
           </div>
 
+          <div class="border-t border-base-200 pt-4 space-y-4">
+            <div class="flex items-center justify-between">
+              <div>
+                <h4 class="font-semibold text-sm">Documents liés</h4>
+                <p class="text-xs text-gray-500">Ajoutez des documents (PDF, images...) relatifs à ce site.</p>
+              </div>
+              <span v-if="selectedFiles.length" class="badge badge-outline">
+                {{ selectedFiles.length }} fichier{{ selectedFiles.length > 1 ? 's' : '' }} prêt{{ selectedFiles.length > 1 ? 's' : '' }} à être ajouté
+              </span>
+            </div>
+
+            <DocumentUpload
+              v-model="selectedFiles"
+              title="Déposer vos fichiers"
+              subtitle="Formats courants acceptés : PDF, JPG, PNG, DOCX..."
+            />
+
+            <div v-if="siteDocuments.length" class="space-y-3">
+              <h5 class="text-sm font-medium">Documents existants</h5>
+              <div class="space-y-2 max-h-48 overflow-y-auto pr-1">
+                <div
+                  v-for="document in siteDocuments"
+                  :key="document.id"
+                  class="flex items-center justify-between rounded border border-base-200 bg-base-100 px-3 py-2"
+                >
+                  <div class="text-sm">
+                    <div class="font-medium">{{ document.name }}</div>
+                    <div class="text-xs text-gray-500">
+                      {{ document.mimeType || 'Inconnu' }} • {{ formatSize(document.size) }}
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-2">
+                    <button type="button" class="btn btn-ghost btn-xs" @click="downloadDocument(document)">
+                      Télécharger
+                    </button>
+                    <button
+                      type="button"
+                      class="btn btn-error btn-xs"
+                      @click="handleRemoveSiteDocument(document.id)"
+                    >
+                      Supprimer
+                    </button>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
           <div class="modal-action">
             <button type="button" class="btn" @click="closeEditModal">
               Annuler
             </button>
-            <button type="submit" class="btn btn-primary">
+            <button type="submit" class="btn btn-primary" :disabled="uploadingDocuments">
+              <span v-if="uploadingDocuments" class="loading loading-spinner loading-xs mr-2"></span>
               Enregistrer
             </button>
           </div>
@@ -306,11 +355,14 @@
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, computed } from 'vue'
 import { useSites } from '~/composables/useSites'
 import { useToast } from '~/composables/useToast'
+import { useDocuments } from '~/composables/useDocuments'
+import DocumentUpload from '~/components/DocumentUpload.vue'
 
 const { sites, loading, loadSites, createSite, updateSite, deleteSite } = useSites()
+const { uploadDocuments, deleteDocument, loadDocumentsBySite, documents: documentStore } = useDocuments()
 
 // Data
 const showAddSiteModal = ref(false)
@@ -336,6 +388,11 @@ const editSiteForm = reactive({
   contactCity: ''
 })
 
+const selectedFiles = ref([])
+const uploadingDocuments = ref(false)
+
+const siteDocuments = computed(() => siteBeingEdited.value?.documents || [])
+
 // Methods
 const handleCreateSite = async () => {
   const result = await createSite({
@@ -367,6 +424,8 @@ const editSite = (site) => {
   editSiteForm.contactAddress = site.contactAddress || ''
   editSiteForm.contactPostalCode = site.contactPostalCode || ''
   editSiteForm.contactCity = site.contactCity || ''
+  selectedFiles.value = []
+  refreshSiteDocuments(site.id)
   showEditSiteModal.value = true
 }
 
@@ -382,14 +441,121 @@ const handleUpdateSite = async () => {
     contactCity: editSiteForm.contactCity
   })
 
-  if (result.success) {
-    closeEditModal()
+  if (!result.success) return
+
+  let uploadedDocuments = []
+  if (selectedFiles.value.length) {
+    uploadingDocuments.value = true
+    const uploadResult = await uploadDocuments({
+      files: selectedFiles.value,
+      context: { siteId: siteBeingEdited.value.id }
+    })
+    uploadingDocuments.value = false
+
+    if (uploadResult.success) {
+      uploadedDocuments = uploadResult.data || []
+      selectedFiles.value = []
+    }
   }
+
+  if (uploadedDocuments.length) {
+    if (siteBeingEdited.value) {
+      siteBeingEdited.value.documents = [...uploadedDocuments, ...(siteBeingEdited.value.documents || [])]
+    }
+    const index = sites.value.findIndex(site => site.id === siteBeingEdited.value?.id)
+    if (index !== -1) {
+      sites.value[index] = {
+        ...sites.value[index],
+        name: editSiteForm.name,
+        contactName: editSiteForm.contactName,
+        contactPhone: editSiteForm.contactPhone,
+        contactAddress: editSiteForm.contactAddress,
+        contactPostalCode: editSiteForm.contactPostalCode,
+        contactCity: editSiteForm.contactCity,
+        documents: [...uploadedDocuments, ...(sites.value[index].documents || [])]
+      }
+    }
+  } else {
+    const index = sites.value.findIndex(site => site.id === siteBeingEdited.value?.id)
+    if (index !== -1) {
+      sites.value[index] = {
+        ...sites.value[index],
+        name: editSiteForm.name,
+        contactName: editSiteForm.contactName,
+        contactPhone: editSiteForm.contactPhone,
+        contactAddress: editSiteForm.contactAddress,
+        contactPostalCode: editSiteForm.contactPostalCode,
+        contactCity: editSiteForm.contactCity,
+      }
+    }
+  }
+
+  closeEditModal()
 }
 
 const closeEditModal = () => {
   showEditSiteModal.value = false
   siteBeingEdited.value = null
+  selectedFiles.value = []
+}
+
+const handleRemoveSiteDocument = async (documentId) => {
+  if (!documentId) return
+
+  const result = await deleteDocument(documentId)
+  if (result.success) {
+    if (siteBeingEdited.value) {
+      siteBeingEdited.value.documents = (siteBeingEdited.value.documents || []).filter(doc => doc.id !== documentId)
+    }
+
+    const index = sites.value.findIndex(site => site.id === siteBeingEdited.value?.id)
+    if (index !== -1) {
+      const updatedDocs = (sites.value[index].documents || []).filter(doc => doc.id !== documentId)
+      sites.value[index] = {
+        ...sites.value[index],
+        documents: updatedDocs,
+      }
+    }
+  }
+}
+
+const downloadDocument = (doc) => {
+  if (!doc?.path) return
+
+  if (doc.path.startsWith('data:')) {
+    const link = document.createElement('a')
+    link.href = doc.path
+    link.download = doc.filename || doc.name || 'document'
+    link.click()
+    return
+  }
+
+  window.open(doc.path, '_blank')
+}
+
+const refreshSiteDocuments = async (siteId) => {
+  if (!siteId) return
+  const result = await loadDocumentsBySite(siteId)
+  if (result.success && siteBeingEdited.value && siteBeingEdited.value.id === siteId) {
+    const cloned = [...documentStore.value]
+    siteBeingEdited.value.documents = cloned
+    const index = sites.value.findIndex(site => site.id === siteId)
+    if (index !== -1) {
+      sites.value[index] = {
+        ...sites.value[index],
+        documents: cloned,
+      }
+    }
+  }
+}
+
+const formatSize = (size) => {
+  if (size === undefined || size === null) return '—'
+  if (size === 0) return '0 B'
+  const units = ['B', 'KB', 'MB', 'GB']
+  const index = Math.min(units.length - 1, Math.floor(Math.log(size) / Math.log(1024)))
+  const formatted = size / Math.pow(1024, index)
+  return `${formatted.toFixed(1)} ${units[index]}`
 }
 
 const confirmDeleteSite = async (site) => {