feat: add depense tagging

This commit is contained in:
2026-01-19 05:19:11 +01:00
parent c5e51a7513
commit 0fd6bdaeb3
8 changed files with 711 additions and 43 deletions

View File

@@ -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
})
})