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,27 +1,29 @@
|
||||
<template>
|
||||
<div class="flex-1 flex flex-col overflow-hidden">
|
||||
<div class="page-fixed">
|
||||
<!-- Header avec breadcrumb et actions -->
|
||||
<div class="flex-shrink-0 px-6 py-4 bg-gray-800 border-b border-gray-700">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex-shrink-0 px-6 py-4 bg-gray-900 border-b border-gray-700">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 text-sm text-gray-400 mb-1">
|
||||
<router-link to="/documents" class="hover:text-white transition-colors">Documents</router-link>
|
||||
<span>›</span>
|
||||
<span class="text-white">{{ documentData?.reference || 'Chargement...' }}</span>
|
||||
</div>
|
||||
<h1 class="text-xl font-semibold text-white">
|
||||
<h1 class="page-title">
|
||||
Édition du document {{ documentData?.reference }}
|
||||
</h1>
|
||||
<p v-if="documentData" class="text-sm text-gray-400 mt-1">
|
||||
<p v-if="documentData" class="page-subtitle">
|
||||
{{ documentData.immeuble?.adresse || '-' }} - {{ formatDate(documentData.date) }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Masque pendant le tagging : celui du bandeau de tagging fait foi. -->
|
||||
<button
|
||||
v-if="!showTagging"
|
||||
@click="cancel"
|
||||
:disabled="isSaving"
|
||||
class="px-4 py-2 text-sm text-gray-400 hover:text-white transition-colors disabled:opacity-50"
|
||||
class="btn btn-ghost"
|
||||
>
|
||||
Annuler
|
||||
</button>
|
||||
@@ -30,7 +32,7 @@
|
||||
@click="reExtract"
|
||||
:disabled="isSaving || isReExtracting || !documentData?.has_pdf"
|
||||
:title="documentData?.has_pdf ? 'Relancer l\'extraction depuis le PDF stocké' : 'PDF non disponible pour ce document'"
|
||||
class="px-4 py-2 text-sm bg-amber-600 text-white rounded-lg hover:bg-amber-700 transition-colors disabled:opacity-50 flex items-center gap-2"
|
||||
class="btn btn-warning"
|
||||
>
|
||||
<svg
|
||||
class="w-4 h-4"
|
||||
@@ -46,7 +48,7 @@
|
||||
v-if="!showTagging && extractedData"
|
||||
@click="goToTagging"
|
||||
:disabled="isSaving"
|
||||
class="px-4 py-2 text-sm bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center gap-2"
|
||||
class="btn btn-primary"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
|
||||
@@ -58,9 +60,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Loading state -->
|
||||
<div v-if="isLoading" class="flex-1 flex items-center justify-center bg-gray-800">
|
||||
<div v-if="isLoading" class="flex-1 flex items-center justify-center bg-gray-950">
|
||||
<div class="text-center">
|
||||
<div class="inline-block animate-spin rounded-full h-12 w-12 border-4 border-gray-600 border-t-blue-400 mb-4"></div>
|
||||
<div class="spinner h-12 w-12 mb-4"></div>
|
||||
<p class="text-gray-400">Chargement du document...</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -68,9 +70,9 @@
|
||||
<!-- Corps : Split view PDF + Données -->
|
||||
<div v-else class="flex-1 flex overflow-hidden">
|
||||
<!-- Gauche : PDF Preview -->
|
||||
<div class="w-1/2 border-r border-gray-700 flex flex-col">
|
||||
<div class="flex-shrink-0 px-4 py-2 bg-gray-700/50 border-b border-gray-700">
|
||||
<span class="text-sm text-gray-300">Aperçu PDF</span>
|
||||
<div class="w-2/5 border-r border-gray-700 flex flex-col">
|
||||
<div class="flex-shrink-0 px-4 py-2 bg-gray-900 border-b border-gray-700">
|
||||
<span class="card-title">Aperçu PDF</span>
|
||||
</div>
|
||||
<div class="flex-1 overflow-hidden">
|
||||
<PdfPreview
|
||||
@@ -79,7 +81,7 @@
|
||||
:file-name="documentData?.source_file || 'document.pdf'"
|
||||
class="h-full"
|
||||
/>
|
||||
<div v-else class="h-full flex items-center justify-center bg-gray-800 text-gray-500">
|
||||
<div v-else class="h-full flex items-center justify-center bg-gray-950 text-gray-500">
|
||||
<div class="text-center">
|
||||
<svg class="mx-auto h-16 w-16 text-gray-600 mb-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||||
@@ -92,9 +94,9 @@
|
||||
</div>
|
||||
|
||||
<!-- Droite : Édition ou Tagging -->
|
||||
<div class="w-1/2 flex flex-col bg-gray-50">
|
||||
<div class="w-3/5 flex flex-col bg-gray-950">
|
||||
<!-- Bandeau erreur de re-extraction -->
|
||||
<div v-if="reExtractError" class="flex-shrink-0 px-4 py-2 bg-red-500/10 border-b border-red-500/30 text-sm text-red-600">
|
||||
<div v-if="reExtractError" class="flex-shrink-0 px-4 py-2 bg-red-500/10 border-b border-red-500/30 text-sm text-red-400">
|
||||
{{ reExtractError }}
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user