feat: add homepage
This commit is contained in:
224
frontend/src/pages/ExtractPage.vue
Normal file
224
frontend/src/pages/ExtractPage.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<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">
|
||||
<!-- Upload zone when no file -->
|
||||
<div v-if="!pdfFile" class="flex-1 flex items-center justify-center p-8 bg-gray-800">
|
||||
<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"
|
||||
@click="triggerFileInput"
|
||||
@dragover.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@drop.prevent="onDrop"
|
||||
:class="{ 'border-blue-500 bg-blue-500/10': isDragging }"
|
||||
>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="application/pdf,.pdf"
|
||||
class="hidden"
|
||||
@change="onFileChange"
|
||||
/>
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
<p class="text-gray-400 mb-2">Glisser un PDF ici</p>
|
||||
<p class="text-sm text-gray-500">ou <span class="text-blue-400">cliquer pour parcourir</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PDF Preview when file loaded -->
|
||||
<PdfPreview
|
||||
v-else
|
||||
:file="pdfFile"
|
||||
:file-name="pdfFile.name"
|
||||
class="flex-1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Right panel: JSON Viewer -->
|
||||
<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">
|
||||
<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"
|
||||
>
|
||||
Extraire les donnees du PDF
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Placeholder when no file -->
|
||||
<div v-if="!pdfFile" class="flex-1 flex items-center justify-center text-gray-400">
|
||||
<p>Selectionnez un PDF pour commencer</p>
|
||||
</div>
|
||||
|
||||
<JsonViewer
|
||||
v-else
|
||||
:data="extractedData"
|
||||
:is-loading="isExtracting"
|
||||
class="flex-1 overflow-hidden"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { pendingFile } from '../store'
|
||||
import PdfPreview from '../components/PdfPreview.vue'
|
||||
import JsonViewer from '../components/JsonViewer.vue'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const fileInput = ref(null)
|
||||
const isDragging = ref(false)
|
||||
const pdfFile = ref(null)
|
||||
const extractedData = ref(null)
|
||||
const isExtracting = ref(false)
|
||||
const isSaving = ref(false)
|
||||
const saveMessage = ref(null)
|
||||
|
||||
// Check for pending file from store on mount
|
||||
onMounted(() => {
|
||||
if (pendingFile.value) {
|
||||
pdfFile.value = pendingFile.value
|
||||
pendingFile.value = null // Clear the store
|
||||
extractCurrentFile()
|
||||
}
|
||||
})
|
||||
|
||||
function triggerFileInput() {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
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
|
||||
extractCurrentFile()
|
||||
}
|
||||
e.target.value = ''
|
||||
}
|
||||
|
||||
function onDrop(e) {
|
||||
isDragging.value = false
|
||||
const file = e.dataTransfer.files[0]
|
||||
if (file && file.name.toLowerCase().endsWith('.pdf')) {
|
||||
pdfFile.value = file
|
||||
extractedData.value = null
|
||||
saveMessage.value = null
|
||||
extractCurrentFile()
|
||||
}
|
||||
}
|
||||
|
||||
async function extractCurrentFile() {
|
||||
if (!pdfFile.value) return
|
||||
|
||||
isExtracting.value = true
|
||||
|
||||
try {
|
||||
const formData = new FormData()
|
||||
formData.append('file', pdfFile.value)
|
||||
|
||||
const response = await fetch('/api/extract', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json()
|
||||
throw new Error(errorData.detail || 'Erreur lors de l\'extraction')
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
extractedData.value = data
|
||||
} catch (err) {
|
||||
console.error('Extraction error:', err)
|
||||
alert('Erreur: ' + err.message)
|
||||
} finally {
|
||||
isExtracting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function saveToDatabase() {
|
||||
if (!extractedData.value) return
|
||||
|
||||
isSaving.value = true
|
||||
saveMessage.value = null
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/save', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
source_file: extractedData.value.source_file,
|
||||
data: extractedData.value.data
|
||||
})
|
||||
})
|
||||
|
||||
const result = await response.json()
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(result.detail || 'Erreur lors de la sauvegarde')
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
// Success - redirect to home
|
||||
router.push('/')
|
||||
} else {
|
||||
// Duplicate detected - stay on current view
|
||||
saveMessage.value = {
|
||||
type: 'duplicate',
|
||||
title: 'Document deja existant',
|
||||
details: `Reference: ${result.reference} | Date: ${result.date}`
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Save error:', err)
|
||||
saveMessage.value = {
|
||||
type: 'error',
|
||||
title: 'Erreur lors de la sauvegarde',
|
||||
details: err.message
|
||||
}
|
||||
} finally {
|
||||
isSaving.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
164
frontend/src/pages/HomePage.vue
Normal file
164
frontend/src/pages/HomePage.vue
Normal file
@@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="flex-1 overflow-auto p-6 bg-gray-800">
|
||||
<div class="max-w-4xl mx-auto space-y-6">
|
||||
|
||||
<!-- Upload zone compacte -->
|
||||
<div
|
||||
class="border-2 border-dashed border-gray-600 rounded-lg p-6 text-center hover:border-blue-500 transition-colors cursor-pointer bg-gray-900/50"
|
||||
@click="triggerFileInput"
|
||||
@dragover.prevent="isDragging = true"
|
||||
@dragleave.prevent="isDragging = false"
|
||||
@drop.prevent="onDrop"
|
||||
:class="{ 'border-blue-500 bg-blue-500/10': isDragging }"
|
||||
>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="application/pdf,.pdf"
|
||||
class="hidden"
|
||||
@change="onFileSelect"
|
||||
/>
|
||||
<div class="text-gray-400">
|
||||
<svg class="mx-auto h-10 w-10 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
<p class="text-sm">
|
||||
<span v-if="!isDragging">Glisser un PDF ici ou <span class="text-blue-400">cliquer pour importer</span></span>
|
||||
<span v-else class="text-blue-400 font-medium">Déposer le fichier ici</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats rapides -->
|
||||
<div class="grid grid-cols-3 md:grid-cols-6 gap-3">
|
||||
<div v-for="stat in statsDisplay" :key="stat.key" class="bg-gray-900 rounded-lg p-3 text-center">
|
||||
<div class="text-2xl font-bold text-white">{{ stats[stat.key] ?? '-' }}</div>
|
||||
<div class="text-xs text-gray-400">{{ stat.label }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Derniers documents -->
|
||||
<div class="bg-gray-900 rounded-lg overflow-hidden">
|
||||
<div class="px-4 py-3 border-b border-gray-700">
|
||||
<h2 class="text-sm font-medium text-gray-300">Derniers documents importes</h2>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoading" class="p-8 text-center text-gray-500">
|
||||
Chargement...
|
||||
</div>
|
||||
|
||||
<div v-else-if="documents.length === 0" class="p-8 text-center text-gray-500">
|
||||
Aucun document importe pour le moment.
|
||||
</div>
|
||||
|
||||
<table v-else class="w-full">
|
||||
<thead class="bg-gray-800/50">
|
||||
<tr>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase">Reference</th>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase">Date</th>
|
||||
<th class="px-4 py-2 text-left text-xs font-medium text-gray-400 uppercase">Immeuble</th>
|
||||
<th class="px-4 py-2 text-right text-xs font-medium text-gray-400 uppercase">Solde</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-gray-800">
|
||||
<tr v-for="doc in documents" :key="doc.id" class="hover:bg-gray-800/50">
|
||||
<td class="px-4 py-3 text-sm text-white font-mono">{{ doc.reference }}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-300">{{ formatDate(doc.date) }}</td>
|
||||
<td class="px-4 py-3 text-sm text-gray-300">
|
||||
<span class="text-gray-500">{{ doc.immeuble_code }}</span>
|
||||
<span v-if="doc.immeuble_adresse" class="ml-2">{{ doc.immeuble_adresse }}</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-sm text-right">
|
||||
<span :class="doc.solde_type === 'crediteur' ? 'text-green-400' : 'text-red-400'">
|
||||
{{ formatAmount(doc.solde_montant) }}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { pendingFile } from '../store'
|
||||
|
||||
const router = useRouter()
|
||||
const fileInput = ref(null)
|
||||
const isDragging = ref(false)
|
||||
const isLoading = ref(true)
|
||||
const stats = ref({})
|
||||
const documents = ref([])
|
||||
|
||||
const statsDisplay = [
|
||||
{ key: 'documents', label: 'Documents' },
|
||||
{ key: 'immeubles', label: 'Immeubles' },
|
||||
{ key: 'lots', label: 'Lots' },
|
||||
{ key: 'locataires', label: 'Locataires' },
|
||||
{ key: 'revenus', label: 'Revenus' },
|
||||
{ key: 'depenses', label: 'Depenses' },
|
||||
]
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '-'
|
||||
const [year, month, day] = dateStr.split('-')
|
||||
return `${day}/${month}/${year}`
|
||||
}
|
||||
|
||||
function formatAmount(amount) {
|
||||
if (amount == null) return '-'
|
||||
return new Intl.NumberFormat('fr-FR', { style: 'currency', currency: 'EUR' }).format(amount)
|
||||
}
|
||||
|
||||
async function loadData() {
|
||||
isLoading.value = true
|
||||
try {
|
||||
const [statsRes, docsRes] = await Promise.all([
|
||||
fetch('/api/stats'),
|
||||
fetch('/api/documents?limit=10')
|
||||
])
|
||||
|
||||
if (statsRes.ok) {
|
||||
stats.value = await statsRes.json()
|
||||
}
|
||||
|
||||
if (docsRes.ok) {
|
||||
documents.value = await docsRes.json()
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load dashboard data:', err)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function triggerFileInput() {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
function onFileSelect(e) {
|
||||
const file = e.target.files[0]
|
||||
if (file && file.name.toLowerCase().endsWith('.pdf')) {
|
||||
pendingFile.value = file
|
||||
router.push('/extract')
|
||||
}
|
||||
e.target.value = ''
|
||||
}
|
||||
|
||||
function onDrop(e) {
|
||||
isDragging.value = false
|
||||
const file = e.dataTransfer.files[0]
|
||||
if (file && file.name.toLowerCase().endsWith('.pdf')) {
|
||||
pendingFile.value = file
|
||||
router.push('/extract')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
</script>
|
||||
Reference in New Issue
Block a user