refactor(ui): passe les pages en pleine largeur
Chaque page plafonnait sa largeur differemment (max-w-4xl pour Config, 5xl pour IA, 6xl pour l'accueil et les documents, 7xl pour les revenus et les depenses) : sur un ecran large, les donnees se tassaient au centre. Les pages n'ont plus de plafond, le contenu occupe l'ecran avec une marge laterale fixe. Pour tirer parti de la place gagnee : Config affiche ses deux sections cote a cote, et le split apercu PDF / donnees passe de 50-50 a 40-60 en faveur des donnees. Pendant le tagging, le bouton « Annuler » de l'en-tete d'edition est masque : il faisait doublon avec celui du bandeau de tagging, qui a un sens different (retour a l'edition, et non abandon). La sortie vers la liste reste le fil d'Ariane. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -1,12 +1,12 @@
|
||||
<template>
|
||||
<div class="flex-1 flex overflow-hidden">
|
||||
<!-- Left panel: Upload or PDF Preview -->
|
||||
<div class="w-1/2 flex flex-col border-r border-gray-700">
|
||||
<div class="w-2/5 flex flex-col border-r border-gray-700">
|
||||
<!-- Upload zone when no file -->
|
||||
<div v-if="!pdfFile" class="flex-1 flex items-center justify-center p-8 bg-gray-800">
|
||||
<div v-if="!pdfFile" class="flex-1 flex items-center justify-center p-8 bg-gray-950">
|
||||
<div class="max-w-md w-full">
|
||||
<div
|
||||
class="border-2 border-dashed border-gray-600 rounded-lg p-8 text-center hover:border-blue-500 transition-colors cursor-pointer bg-gray-900/50"
|
||||
<div
|
||||
class="border-2 border-dashed border-gray-700 rounded-lg p-8 text-center hover:border-blue-500 transition-colors cursor-pointer bg-gray-900/50"
|
||||
@click="triggerFileInput"
|
||||
@dragover.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@@ -39,22 +39,22 @@
|
||||
</div>
|
||||
|
||||
<!-- Right panel: JSON Viewer or Tagging Step -->
|
||||
<div class="w-1/2 flex flex-col bg-gray-50">
|
||||
<div class="w-3/5 flex flex-col bg-gray-950">
|
||||
<!-- Extract button bar -->
|
||||
<div v-if="pdfFile && !extractedData && !isExtracting && !showTagging" 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-gray-900 border-b border-gray-700">
|
||||
<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"
|
||||
class="btn btn-primary w-full py-2.5"
|
||||
>
|
||||
Extraire les donnees du PDF
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 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">
|
||||
<div v-if="extractedData && !isExtracting && !showTagging" class="flex-shrink-0 p-4 bg-gray-900 border-b border-gray-700">
|
||||
<!-- 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="px-4 py-3 rounded-lg text-sm bg-amber-500/10 text-amber-400 border border-amber-500/30">
|
||||
<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" />
|
||||
@@ -64,10 +64,10 @@
|
||||
<div v-if="saveMessage.details" class="mt-1 text-xs opacity-90">{{ saveMessage.details }}</div>
|
||||
</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"
|
||||
class="btn btn-primary w-full py-2.5"
|
||||
>
|
||||
Continuer vers le tagging
|
||||
</button>
|
||||
@@ -84,13 +84,13 @@
|
||||
/>
|
||||
|
||||
<!-- Save feedback message -->
|
||||
<div v-if="saveMessage && showTagging" class="flex-shrink-0 p-4 bg-white border-t border-gray-200">
|
||||
<div
|
||||
<div v-if="saveMessage && showTagging" class="flex-shrink-0 p-4 bg-gray-900 border-t border-gray-700">
|
||||
<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' : ''
|
||||
'px-4 py-3 rounded-lg text-sm border',
|
||||
saveMessage.type === 'success' ? 'bg-green-500/10 text-green-400 border-green-500/30' : '',
|
||||
saveMessage.type === 'duplicate' ? 'bg-amber-500/10 text-amber-400 border-amber-500/30' : '',
|
||||
saveMessage.type === 'error' ? 'bg-red-500/10 text-red-400 border-red-500/30' : ''
|
||||
]"
|
||||
>
|
||||
<div class="font-medium">{{ saveMessage.title }}</div>
|
||||
@@ -99,7 +99,7 @@
|
||||
</div>
|
||||
|
||||
<!-- Placeholder when no file -->
|
||||
<div v-if="!pdfFile && !showTagging" 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-500">
|
||||
<p>Selectionnez un PDF pour commencer</p>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user