feat: add depense tagging

frontend/src/components/TaggingStep.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="flex flex-col h-full bg-gray-50">
+    <!-- Header -->
+    <div class="flex-shrink-0 p-4 bg-white border-b border-gray-200">
+      <div class="flex items-center gap-2">
+        <h2 class="text-lg font-semibold text-gray-900">Tagging des dépenses</h2>
+        <span v-if="isDuplicate" class="px-2 py-1 text-xs font-medium bg-orange-100 text-orange-800 rounded">
+          ⚠️ Écrasement
+        </span>
+      </div>
+      <p class="text-sm text-gray-600 mt-1">
+        {{ taggedCount }} / {{ depenses.length }} dépenses taggées
+        <span v-if="predictions.length > 0" class="text-green-600 ml-2">
+          ({{ predictedCount }} pré-remplies automatiquement)
+        </span>
+      </p>
+      <p v-if="isDuplicate" class="text-xs text-orange-600 mt-1">
+        Les données existantes seront remplacées lors de la validation
+      </p>
+    </div>
+
+    <!-- Loading state -->
+    <div v-if="isLoadingPredictions" class="flex-1 flex items-center justify-center">
+      <div class="text-center">
+        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4"></div>
+        <p class="text-gray-600">Analyse en cours...</p>
+      </div>
+    </div>
+
+    <!-- List of expenses to tag -->
+    <div v-else class="flex-1 overflow-y-auto p-4 space-y-3">
+      <div
+        v-for="(depense, index) in depenses"
+        :key="index"
+        class="bg-white rounded-lg shadow-sm border border-gray-200 p-4"
+      >
+        <!-- Expense info -->
+        <div class="flex items-start justify-between gap-4 mb-3">
+          <div class="flex-1 min-w-0">
+            <div class="font-medium text-gray-900 truncate">
+              {{ depense.fournisseur || 'Fournisseur inconnu' }}
+            </div>
+            <div class="text-sm text-gray-600 truncate">
+              {{ depense.sous_categorie || depense.description || 'Aucune description' }}
+            </div>
+            <div class="text-sm text-gray-500 mt-1">
+              Montant: {{ formatMontant(depense.montants?.debit || 0) }} €
+            </div>
+          </div>
+
+          <!-- Tag selector -->
+          <div class="flex-shrink-0 w-48">
+            <select
+              v-model="selectedTags[index]"
+              @change="onTagChange(index)"
+              class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-sm"
+              :class="{
+                'bg-green-50 border-green-300': selectedTags[index] && predictions[index]?.tag_id,
+                'bg-yellow-50 border-yellow-300': !selectedTags[index]
+              }"
+            >
+              <option :value="null">-- Sélectionner un tag --</option>
+              <option
+                v-for="tag in availableTags"
+                :key="tag.id"
+                :value="tag.id"
+              >
+                {{ tag.nom }}
+              </option>
+            </select>
+          </div>
+        </div>
+
+        <!-- Prediction info -->
+        <div
+          v-if="predictions[index] && predictions[index].tag_id"
+          class="flex items-center gap-2 text-xs text-gray-600 bg-blue-50 border border-blue-200 rounded px-3 py-2"
+        >
+          <svg class="w-4 h-4 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+          <span>
+            Confiance: {{ predictions[index].confidence }}% - {{ predictions[index].reason }}
+          </span>
+        </div>
+        
+        <!-- No prediction warning -->
+        <div
+          v-else-if="predictions[index] && !predictions[index].tag_id && !selectedTags[index]"
+          class="flex items-center gap-2 text-xs text-gray-600 bg-gray-50 border border-gray-200 rounded px-3 py-2"
+        >
+          <svg class="w-4 h-4 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+          </svg>
+          <span>{{ predictions[index].reason }}</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Action buttons -->
+    <div class="flex-shrink-0 p-4 bg-white border-t border-gray-200">
+      <div class="flex items-center justify-between gap-4">
+        <button
+          @click="$emit('cancel')"
+          class="px-4 py-2 text-gray-700 bg-gray-100 rounded-lg hover:bg-gray-200 transition-colors"
+        >
+          Annuler
+        </button>
+        
+        <div class="flex items-center gap-3">
+          <span v-if="taggedCount < depenses.length" class="text-sm text-yellow-600">
+            ⚠️ {{ depenses.length - taggedCount }} dépense(s) sans tag
+          </span>
+          <button
+            @click="validateAndSave"
+            :disabled="taggedCount === 0"
+            class="px-6 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
+          >
+            Valider et enregistrer
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+
+const props = defineProps({
+  depenses: {
+    type: Array,
+    required: true
+  },
+  isDuplicate: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['save', 'cancel'])
+
+const availableTags = ref([])
+const predictions = ref([])
+const selectedTags = ref({})
+const isLoadingPredictions = ref(false)
+
+const taggedCount = computed(() => {
+  return Object.values(selectedTags.value).filter(tag => tag !== null && tag !== undefined).length
+})
+
+const predictedCount = computed(() => {
+  return predictions.value.filter(p => p.tag_id !== null).length
+})
+
+onMounted(async () => {
+  await loadTags()
+  await loadPredictions()
+})
+
+async function loadTags() {
+  try {
+    const response = await fetch('/api/tags')
+    if (!response.ok) throw new Error('Erreur lors du chargement des tags')
+    availableTags.value = await response.json()
+  } catch (err) {
+    console.error('Error loading tags:', err)
+    alert('Erreur: ' + err.message)
+  }
+}
+
+async function loadPredictions() {
+  isLoadingPredictions.value = true
+  
+  try {
+    const response = await fetch('/api/predict-tags', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        depenses: props.depenses
+      })
+    })
+    
+    if (!response.ok) throw new Error('Erreur lors de la prédiction')
+    
+    const data = await response.json()
+    predictions.value = data.predictions
+    
+    // Pre-fill tags with predictions
+    data.predictions.forEach(pred => {
+      if (pred.tag_id !== null) {
+        selectedTags.value[pred.index] = pred.tag_id
+      }
+    })
+  } catch (err) {
+    console.error('Error loading predictions:', err)
+  } finally {
+    isLoadingPredictions.value = false
+  }
+}
+
+function onTagChange(index) {
+  // Just trigger reactivity
+  selectedTags.value = { ...selectedTags.value }
+}
+
+function validateAndSave() {
+  // If duplicate, ask for confirmation
+  if (props.isDuplicate) {
+    const confirmed = confirm(
+      '⚠️ Ce document existe déjà en base.\n\n' +
+      'Voulez-vous vraiment écraser les données existantes ?\n\n' +
+      'Les anciennes données seront définitivement supprimées.'
+    )
+    if (!confirmed) {
+      return
+    }
+  }
+  
+  // Convert selectedTags to array format expected by backend
+  const depensesTagsArray = Object.entries(selectedTags.value)
+    .filter(([_, tagId]) => tagId !== null && tagId !== undefined)
+    .map(([index, tagId]) => ({
+      index: parseInt(index),
+      tag_id: tagId
+    }))
+  
+  emit('save', depensesTagsArray, props.isDuplicate)
+}
+
+function formatMontant(value) {
+  return new Intl.NumberFormat('fr-FR', {
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2
+  }).format(value)
+}
+</script>

frontend/src/pages/ExtractPage.vue

@@ -38,10 +38,10 @@
       />
     </div>
 
-    <!-- Right panel: JSON Viewer -->
+    <!-- Right panel: JSON Viewer or Tagging Step -->
     <div class="w-1/2 flex flex-col bg-gray-50">
       <!-- Extract button bar -->
-      <div v-if="pdfFile && !extractedData && !isExtracting" class="flex-shrink-0 p-4 bg-white border-b border-gray-200">
+      <div v-if="pdfFile && !extractedData && !isExtracting && !showTagging" class="flex-shrink-0 p-4 bg-white border-b border-gray-200">
         <button
           @click="extractCurrentFile"
           class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
@@ -50,42 +50,62 @@
         </button>
       </div>
       
-      <!-- Save button bar (when data is extracted) -->
-      <div v-if="extractedData && !isExtracting" class="flex-shrink-0 p-4 bg-white border-b border-gray-200">
-        <div class="flex items-center gap-3">
-          <button
-            @click="saveToDatabase"
-            :disabled="isSaving"
-            class="flex-1 px-4 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors font-medium disabled:opacity-50 disabled:cursor-not-allowed"
-          >
-            <span v-if="isSaving">Sauvegarde en cours...</span>
-            <span v-else>Sauvegarder en base</span>
-          </button>
+      <!-- Continue to tagging button (when data is extracted) -->
+      <div v-if="extractedData && !isExtracting && !showTagging" class="flex-shrink-0 p-4 bg-white border-b border-gray-200">
+        <!-- Duplicate warning -->
+        <div v-if="saveMessage && saveMessage.type === 'duplicate'" class="mb-3">
+          <div class="px-4 py-3 rounded-lg text-sm bg-yellow-100 text-yellow-800 border border-yellow-200">
+            <div class="font-medium flex items-center gap-2">
+              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
+              </svg>
+              {{ saveMessage.title }}
+            </div>
+            <div v-if="saveMessage.details" class="mt-1 text-xs opacity-90">{{ saveMessage.details }}</div>
+          </div>
         </div>
         
-        <!-- Save feedback message -->
-        <div v-if="saveMessage" class="mt-3">
-          <div 
-            :class="[
-              'px-4 py-3 rounded-lg text-sm',
-              saveMessage.type === 'success' ? 'bg-green-100 text-green-800 border border-green-200' : '',
-              saveMessage.type === 'duplicate' ? 'bg-yellow-100 text-yellow-800 border border-yellow-200' : '',
-              saveMessage.type === 'error' ? 'bg-red-100 text-red-800 border border-red-200' : ''
-            ]"
-          >
-            <div class="font-medium">{{ saveMessage.title }}</div>
-            <div v-if="saveMessage.details" class="mt-1 text-xs opacity-80">{{ saveMessage.details }}</div>
-          </div>
+        <button
+          @click="goToTagging"
+          class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
+        >
+          Continuer vers le tagging
+        </button>
+      </div>
+      
+      <!-- Tagging step -->
+      <TaggingStep
+        v-if="showTagging && extractedData"
+        :depenses="extractedData.data.recapitulatif_operations"
+        :is-duplicate="isDuplicate"
+        @save="handleTaggingSave"
+        @cancel="showTagging = false"
+        class="flex-1"
+      />
+      
+      <!-- Save feedback message -->
+      <div v-if="saveMessage && showTagging" class="flex-shrink-0 p-4 bg-white border-t border-gray-200">
+        <div 
+          :class="[
+            'px-4 py-3 rounded-lg text-sm',
+            saveMessage.type === 'success' ? 'bg-green-100 text-green-800 border border-green-200' : '',
+            saveMessage.type === 'duplicate' ? 'bg-yellow-100 text-yellow-800 border border-yellow-200' : '',
+            saveMessage.type === 'error' ? 'bg-red-100 text-red-800 border border-red-200' : ''
+          ]"
+        >
+          <div class="font-medium">{{ saveMessage.title }}</div>
+          <div v-if="saveMessage.details" class="mt-1 text-xs opacity-80">{{ saveMessage.details }}</div>
         </div>
       </div>
       
       <!-- Placeholder when no file -->
-      <div v-if="!pdfFile" class="flex-1 flex items-center justify-center text-gray-400">
+      <div v-if="!pdfFile && !showTagging" class="flex-1 flex items-center justify-center text-gray-400">
         <p>Selectionnez un PDF pour commencer</p>
       </div>
       
+      <!-- JSON Viewer (only shown when not tagging) -->
       <JsonViewer 
-        v-else
+        v-if="pdfFile && !showTagging"
         :data="extractedData" 
         :is-loading="isExtracting"
         class="flex-1 overflow-hidden"
@@ -100,6 +120,7 @@ import { useRouter } from 'vue-router'
 import { pendingFile } from '../store'
 import PdfPreview from '../components/PdfPreview.vue'
 import JsonViewer from '../components/JsonViewer.vue'
+import TaggingStep from '../components/TaggingStep.vue'
 
 const router = useRouter()
 
@@ -110,6 +131,8 @@ const extractedData = ref(null)
 const isExtracting = ref(false)
 const isSaving = ref(false)
 const saveMessage = ref(null)
+const showTagging = ref(false)
+const isDuplicate = ref(false)
 
 // Check for pending file from store on mount
 onMounted(() => {
@@ -124,12 +147,18 @@ function triggerFileInput() {
   fileInput.value?.click()
 }
 
+function resetState() {
+  extractedData.value = null
+  saveMessage.value = null
+  showTagging.value = false
+  isDuplicate.value = false
+}
+
 function onFileChange(e) {
   const file = e.target.files[0]
   if (file && file.name.toLowerCase().endsWith('.pdf')) {
     pdfFile.value = file
-    extractedData.value = null
-    saveMessage.value = null
+    resetState()
     extractCurrentFile()
   }
   e.target.value = ''
@@ -140,8 +169,7 @@ function onDrop(e) {
   const file = e.dataTransfer.files[0]
   if (file && file.name.toLowerCase().endsWith('.pdf')) {
     pdfFile.value = file
-    extractedData.value = null
-    saveMessage.value = null
+    resetState()
     extractCurrentFile()
   }
 }
@@ -150,6 +178,7 @@ async function extractCurrentFile() {
   if (!pdfFile.value) return
   
   isExtracting.value = true
+  saveMessage.value = null
   
   try {
     const formData = new FormData()
@@ -167,6 +196,9 @@ async function extractCurrentFile() {
     
     const data = await response.json()
     extractedData.value = data
+    
+    // Check for duplicate immediately after extraction
+    await checkDuplicate()
   } catch (err) {
     console.error('Extraction error:', err)
     alert('Erreur: ' + err.message)
@@ -175,7 +207,42 @@ async function extractCurrentFile() {
   }
 }
 
-async function saveToDatabase() {
+async function checkDuplicate() {
+  if (!extractedData.value) return
+  
+  try {
+    const metadata = extractedData.value.data.metadata
+    const reference = metadata.document?.reference
+    const date = metadata.document?.date
+    
+    if (!reference || !date) return
+    
+    const response = await fetch(`/api/check-duplicate?reference=${encodeURIComponent(reference)}&date=${encodeURIComponent(date)}`)
+    const result = await response.json()
+    
+    if (result.exists) {
+      isDuplicate.value = true
+      saveMessage.value = {
+        type: 'duplicate',
+        title: '⚠️ Document déjà existant en base',
+        details: `Ce document (Référence: ${reference}, Date: ${date}) a déjà été importé. Vous pouvez continuer pour le réimporter (les anciennes données seront écrasées).`
+      }
+    } else {
+      isDuplicate.value = false
+    }
+  } catch (err) {
+    console.error('Duplicate check error:', err)
+    isDuplicate.value = false
+    // Don't block the flow if check fails
+  }
+}
+
+function goToTagging() {
+  showTagging.value = true
+  saveMessage.value = null
+}
+
+async function handleTaggingSave(depensesTags, shouldOverwrite) {
   if (!extractedData.value) return
   
   isSaving.value = true
@@ -189,7 +256,9 @@ async function saveToDatabase() {
       },
       body: JSON.stringify({
         source_file: extractedData.value.source_file,
-        data: extractedData.value.data
+        data: extractedData.value.data,
+        depenses_tags: depensesTags,
+        overwrite: shouldOverwrite || false
       })
     })