feat: add homepage

frontend/src/App.vue

@@ -3,143 +3,60 @@
     <!-- Header compact -->
     <header class="flex-shrink-0 bg-gray-800 border-b border-gray-700 px-4 py-2">
       <div class="flex items-center justify-between">
-        <h1 class="text-lg font-semibold text-white">
+        <router-link to="/" class="text-lg font-semibold text-white hover:text-blue-400 transition-colors">
           Plesna Gerance
           <span class="text-gray-400 font-normal text-sm ml-2">Extracteur de comptes rendus</span>
-        </h1>
+        </router-link>
         
-        <!-- Upload button in header when file is loaded -->
-        <div class="flex items-center gap-3">
-          <label 
-            v-if="pdfFile"
-            class="cursor-pointer px-3 py-1.5 bg-blue-600 text-white text-sm rounded hover:bg-blue-700 transition-colors"
+        <!-- Navigation -->
+        <nav class="flex items-center gap-3">
+          <router-link 
+            to="/" 
+            class="px-3 py-1.5 text-sm rounded transition-colors"
+            :class="$route.path === '/' ? 'bg-gray-700 text-white' : 'text-gray-400 hover:text-white'"
           >
-            Changer de PDF
+            Accueil
+          </router-link>
+          
+          <!-- Import button with file input -->
+          <label 
+            class="px-3 py-1.5 text-sm rounded transition-colors cursor-pointer bg-blue-600/20 text-blue-400 hover:bg-blue-600 hover:text-white"
+            :class="$route.path === '/extract' ? 'bg-blue-600 text-white' : ''"
+          >
+            Importer un PDF
             <input
+              ref="fileInput"
               type="file"
               accept="application/pdf,.pdf"
               class="hidden"
-              @change="onNewFileSelect"
+              @change="onFileSelect"
             />
           </label>
-          <span v-if="pdfFile" class="text-gray-400 text-sm truncate max-w-[200px]">
-            {{ pdfFile.name }}
-          </span>
-        </div>
+        </nav>
       </div>
     </header>
 
     <!-- Main content -->
     <main class="flex-1 flex overflow-hidden">
-      <!-- Upload zone (when no file) -->
-      <div v-if="!pdfFile" class="flex-1 flex items-center justify-center p-8">
-        <PdfUploader
-          class="max-w-xl w-full"
-          @file-selected="onFileSelected"
-          @extraction-complete="onExtractionComplete"
-          @extraction-error="onExtractionError"
-        />
-      </div>
-
-      <!-- Split view when file is loaded -->
-      <template v-else>
-        <!-- Left panel: PDF Preview -->
-        <div class="w-1/2 flex flex-col border-r border-gray-700">
-          <PdfPreview
-            :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="!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>
-          
-          <JsonViewer 
-            :data="extractedData" 
-            :is-loading="isExtracting"
-            class="flex-1 overflow-hidden"
-          />
-        </div>
-      </template>
+      <router-view />
     </main>
   </div>
 </template>
 
 <script setup>
 import { ref } from 'vue'
-import PdfUploader from './components/PdfUploader.vue'
-import PdfPreview from './components/PdfPreview.vue'
-import JsonViewer from './components/JsonViewer.vue'
+import { useRouter } from 'vue-router'
+import { pendingFile } from './store'
 
-const pdfFile = ref(null)
-const extractedData = ref(null)
-const isExtracting = ref(false)
+const router = useRouter()
+const fileInput = ref(null)
 
-function onFileSelected(file) {
-  pdfFile.value = file
-  extractedData.value = null
-  if (file) {
-    // Auto-extract when file is selected
-    extractCurrentFile()
-  }
-}
-
-function onNewFileSelect(e) {
+function onFileSelect(e) {
   const file = e.target.files[0]
   if (file && file.name.toLowerCase().endsWith('.pdf')) {
-    pdfFile.value = file
-    extractedData.value = null
-    extractCurrentFile()
+    pendingFile.value = file
+    router.push('/extract')
   }
   e.target.value = '' // Reset input
 }
-
-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
-  }
-}
-
-function onExtractionComplete(data) {
-  extractedData.value = data
-  isExtracting.value = false
-}
-
-function onExtractionError(error) {
-  console.error('Extraction error:', error)
-  isExtracting.value = false
-}
 </script>

frontend/src/main.js

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import App from './App.vue'
+import router from './router'
 import './style.css'
 
-createApp(App).mount('#app')
+createApp(App).use(router).mount('#app')

frontend/src/pages/ExtractPage.vue

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

frontend/src/pages/HomePage.vue

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

frontend/src/router.js

@@ -0,0 +1,23 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomePage from './pages/HomePage.vue'
+import ExtractPage from './pages/ExtractPage.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomePage
+  },
+  {
+    path: '/extract',
+    name: 'extract',
+    component: ExtractPage
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes
+})
+
+export default router

frontend/src/store.js

@@ -0,0 +1,4 @@
+import { ref } from 'vue'
+
+// Simple store for sharing state between components
+export const pendingFile = ref(null)