feat: add depense tagging
This commit is contained in:
239
frontend/src/components/TaggingStep.vue
Normal file
239
frontend/src/components/TaggingStep.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user