From 424abbaf07098d5b12ebf3c8f47c7028836f6363 Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Sun, 26 Jul 2026 13:51:35 +0200
Subject: [PATCH] feat: mene les actions rapides aux pages recettes et depenses
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Les quatre raccourcis de l'accueil renvoyaient mal. « Importer un PDF »
repetait la zone de depot situee juste au-dessus. « Analyses » et
« Immeubles » ne disaient pas ce qu'on y trouve — des recettes et des
depenses. « Documents » ne menait pas a la page mais faisait defiler la
page d'accueil jusqu'a sa propre section, sans quitter l'ecran.

Trois destinations restent, nommees par ce qu'elles contiennent, et
chacune est un lien vers sa page. Le bleu et l'ambre sont ceux du
graphique mensuel : une couleur garde le meme sens d'un bout a l'autre.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../src/components/dashboard/QuickActions.vue | 161 ++++++------------
 1 file changed, 51 insertions(+), 110 deletions(-)

diff --git a/frontend/src/components/dashboard/QuickActions.vue b/frontend/src/components/dashboard/QuickActions.vue
index 26b3abc..84909eb 100644
--- a/frontend/src/components/dashboard/QuickActions.vue
+++ b/frontend/src/components/dashboard/QuickActions.vue
@@ -1,18 +1,12 @@
 <template>
-  <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
-    <button
+  <div class="grid grid-cols-1 sm:grid-cols-3 gap-3">
+    <RouterLink
       v-for="action in actions"
       :key="action.id"
-      @click="handleAction(action)"
+      :to="action.to"
       class="flex items-center gap-3 p-4 bg-gray-900 hover:bg-gray-800 rounded-lg border border-gray-700 hover:border-blue-500 transition-all group"
     >
-      <div
-        :class="[
-          'p-2 rounded-lg transition-colors',
-          action.bgClass,
-          action.hoverBgClass
-        ]"
-      >
+      <div :class="['p-2 rounded-lg transition-colors', action.bgClass, action.hoverBgClass]">
         <component :is="action.icon" class="w-5 h-5" :class="action.iconClass" />
       </div>
       <div class="text-left">
@@ -21,128 +15,75 @@
         </div>
         <div class="text-xs text-gray-500">{{ action.description }}</div>
       </div>
-    </button>
+    </RouterLink>
   </div>
 </template>
 
 <script setup>
 import { h } from 'vue'
-import { useRouter } from 'vue-router'
-
-const emit = defineEmits(['import-pdf'])
-const router = useRouter()
+import { RouterLink } from 'vue-router'
 
 // Icones en composants inline
-const UploadIcon = {
+const svg = (...paths) => ({
   render() {
-    return h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
-      h('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'
-      })
-    ])
+    return h(
+      'svg',
+      { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' },
+      paths.map((d) =>
+        h('path', {
+          'stroke-linecap': 'round',
+          'stroke-linejoin': 'round',
+          'stroke-width': '2',
+          d
+        })
+      )
+    )
   }
-}
+})
 
-const ChartIcon = {
-  render() {
-    return h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
-      h('path', {
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round',
-        'stroke-width': '2',
-        d: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
-      })
-    ])
-  }
-}
-
-const BuildingIcon = {
-  render() {
-    return h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
-      h('path', {
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round',
-        'stroke-width': '2',
-        d: 'M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4'
-      })
-    ])
-  }
-}
-
-const DocumentIcon = {
-  render() {
-    return h('svg', { fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' }, [
-      h('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'
-      })
-    ])
-  }
-}
+const RecettesIcon = svg('M12 19V5m0 0l-6 6m6-6l6 6')
+const DepensesIcon = svg('M12 5v14m0 0l6-6m-6 6l-6-6')
+const DocumentIcon = svg(
+  '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'
+)
 
+/**
+ * Trois destinations, pas quatre : importer un PDF est deja propose juste
+ * au-dessus par la zone de depot, le repeter ici n'ajoutait rien.
+ *
+ * Le bleu et l'ambre sont ceux du graphique mensuel — encaisse et depenses
+ * gardent la meme couleur d'un bout a l'autre de l'ecran.
+ */
 const actions = [
   {
-    id: 'import',
-    label: 'Importer un PDF',
-    description: 'Nouveau document',
-    icon: UploadIcon,
+    id: 'recettes',
+    label: 'Recettes',
+    description: 'Loyers et impayés',
+    to: '/revenus',
+    icon: RecettesIcon,
     bgClass: 'bg-blue-500/20',
     hoverBgClass: 'group-hover:bg-blue-500/30',
-    iconClass: 'text-blue-400',
-    action: 'import'
+    iconClass: 'text-blue-400'
   },
   {
-    id: 'analytics',
-    label: 'Analyses',
-    description: 'Voir les graphiques',
-    icon: ChartIcon,
-    bgClass: 'bg-purple-500/20',
-    hoverBgClass: 'group-hover:bg-purple-500/30',
-    iconClass: 'text-purple-400',
-    action: 'analytics'
-  },
-  {
-    id: 'immeubles',
-    label: 'Immeubles',
-    description: 'Gerer les biens',
-    icon: BuildingIcon,
-    bgClass: 'bg-emerald-500/20',
-    hoverBgClass: 'group-hover:bg-emerald-500/30',
-    iconClass: 'text-emerald-400',
-    action: 'immeubles'
+    id: 'depenses',
+    label: 'Dépenses',
+    description: 'Charges et travaux',
+    to: '/analytics',
+    icon: DepensesIcon,
+    bgClass: 'bg-amber-500/20',
+    hoverBgClass: 'group-hover:bg-amber-500/30',
+    iconClass: 'text-amber-400'
   },
   {
     id: 'documents',
     label: 'Documents',
-    description: 'Historique',
+    description: 'Tous les comptes rendus',
+    to: '/documents',
     icon: DocumentIcon,
-    bgClass: 'bg-amber-500/20',
-    hoverBgClass: 'group-hover:bg-amber-500/30',
-    iconClass: 'text-amber-400',
-    action: 'documents'
+    bgClass: 'bg-gray-500/20',
+    hoverBgClass: 'group-hover:bg-gray-500/30',
+    iconClass: 'text-gray-400'
   }
 ]
-
-function handleAction(action) {
-  switch (action.action) {
-    case 'import':
-      emit('import-pdf')
-      break
-    case 'analytics':
-      router.push('/analytics')
-      break
-    case 'immeubles':
-      router.push('/analytics?view=immeubles')
-      break
-    case 'documents':
-      // Scroll to documents section on home page
-      document.getElementById('recent-documents')?.scrollIntoView({ behavior: 'smooth' })
-      break
-  }
-}
 </script>