From 14b39efe3b2b0ac5d755f63be84ea102b6e0fec3 Mon Sep 17 00:00:00 2001
From: Bertrand Benjamin <benjamin.bertrand@opytex.org>
Date: Sat, 25 Jul 2026 19:50:26 +0200
Subject: [PATCH] refactor(ui): aligne les composants de donnees sur le design
 system

Cartes, en-tetes, champs de filtre, tableaux, badges, paginations et
indicateurs de chargement des tableaux de bord etaient proches mais
jamais identiques (bordure presente ou absente, paddings et arrondis
variables). Ils utilisent maintenant les classes communes.

Les colonnes tronquees des tableaux sont elargies et les sept filtres
des depenses tiennent sur une ligne, la largeur retrouvee le permettant.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 .../components/analytics/CategoryChart.vue    |  4 +-
 .../components/analytics/DepensesTable.vue    | 69 +++++++-------
 .../src/components/analytics/FilterPanel.vue  | 40 ++++-----
 .../src/components/analytics/KpiCards.vue     |  2 +-
 .../src/components/analytics/MonthlyChart.vue |  4 +-
 .../analytics/TopFournisseursChart.vue        |  4 +-
 .../components/dashboard/FinancialSummary.vue |  8 +-
 .../dashboard/ImmeubleShortcuts.vue           |  8 +-
 .../components/dashboard/MiniTrendChart.vue   |  8 +-
 .../components/dashboard/RecentRevenus.vue    |  8 +-
 .../components/revenus/RevenusFilterPanel.vue | 12 +--
 .../revenus/RevenusImmeubleChart.vue          |  2 +-
 .../components/revenus/RevenusKpiCards.vue    | 12 +--
 .../revenus/RevenusMonthlyChart.vue           |  2 +-
 .../src/components/revenus/RevenusTable.vue   | 89 +++++++++----------
 .../src/components/revenus/TopImpayesList.vue |  2 +-
 16 files changed, 135 insertions(+), 139 deletions(-)

diff --git a/frontend/src/components/analytics/CategoryChart.vue b/frontend/src/components/analytics/CategoryChart.vue
index 1b911b6..0a4ebd2 100644
--- a/frontend/src/components/analytics/CategoryChart.vue
+++ b/frontend/src/components/analytics/CategoryChart.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-gray-900 rounded-lg p-4">
-    <h3 class="text-sm font-medium text-gray-300 mb-4">Repartition par categorie</h3>
+  <div class="card card-body">
+    <h3 class="card-title block mb-4">Repartition par categorie</h3>
     <div class="h-64">
       <Doughnut 
         v-if="chartData.labels.length > 0"
diff --git a/frontend/src/components/analytics/DepensesTable.vue b/frontend/src/components/analytics/DepensesTable.vue
index 30c01af..729f769 100644
--- a/frontend/src/components/analytics/DepensesTable.vue
+++ b/frontend/src/components/analytics/DepensesTable.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-gray-900 rounded-lg overflow-hidden">
-    <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
-      <h3 class="text-sm font-medium text-gray-300">
+  <div class="card">
+    <div class="card-header">
+      <h3 class="card-title">
         Detail des depenses
         <span class="text-gray-500 font-normal ml-2">({{ depenses.length }} resultats)</span>
       </h3>
@@ -25,65 +25,64 @@
       Aucune depense trouvee avec les filtres actuels.
     </div>
 
-    <div v-else class="overflow-x-auto">
-      <table class="w-full text-sm">
-        <thead class="bg-gray-800/50">
+    <div v-else class="table-wrap">
+      <table class="table">
+        <thead>
           <tr>
-            <th class="px-3 py-2 text-left text-xs font-medium text-gray-400 uppercase">Date</th>
-            <th class="px-3 py-2 text-left text-xs font-medium text-gray-400 uppercase">Immeuble</th>
-            <th class="px-3 py-2 text-left text-xs font-medium text-gray-400 uppercase">Lot</th>
-            <th class="px-3 py-2 text-left text-xs font-medium text-gray-400 uppercase">Categorie</th>
-            <th class="px-3 py-2 text-left text-xs font-medium text-gray-400 uppercase">Fournisseur</th>
-            <th class="px-3 py-2 text-left text-xs font-medium text-gray-400 uppercase">Description</th>
-            <th class="px-3 py-2 text-left text-xs font-medium text-gray-400 uppercase">Tag</th>
-            <th class="px-3 py-2 text-right text-xs font-medium text-gray-400 uppercase">Debit</th>
-            <th class="px-3 py-2 text-right text-xs font-medium text-gray-400 uppercase">Credit</th>
-            <th class="px-3 py-2 w-10"></th>
+            <th>Date</th>
+            <th>Immeuble</th>
+            <th>Lot</th>
+            <th>Categorie</th>
+            <th>Fournisseur</th>
+            <th>Description</th>
+            <th>Tag</th>
+            <th class="text-right">Debit</th>
+            <th class="text-right">Credit</th>
+            <th class="w-10"></th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-gray-800">
+        <tbody>
           <tr 
             v-for="dep in paginatedDepenses" 
-            :key="dep.id" 
-            class="hover:bg-gray-800/50"
+            :key="dep.id"
           >
-            <td class="px-3 py-2 text-gray-300 whitespace-nowrap">
+            <td class="text-gray-300 whitespace-nowrap">
               {{ formatDate(dep.document_date) }}
             </td>
-            <td class="px-3 py-2 text-gray-400 whitespace-nowrap">
+            <td class="text-gray-400 whitespace-nowrap">
               {{ dep.immeuble_code }}
             </td>
-            <td class="px-3 py-2 text-gray-400">
+            <td class="text-gray-400">
               {{ dep.lot_numero || '-' }}
             </td>
-            <td class="px-3 py-2 text-gray-300">
+            <td class="text-gray-300">
               <div class="text-xs text-gray-500">{{ formatCategorie(dep.categorie) }}</div>
-              <div v-if="dep.sous_categorie" class="text-xs text-gray-400 truncate max-w-[150px]">
+              <div v-if="dep.sous_categorie" class="text-xs text-gray-400 truncate max-w-[220px]">
                 {{ dep.sous_categorie }}
               </div>
             </td>
-            <td class="px-3 py-2 text-white truncate max-w-[150px]">
+            <td class="text-white truncate max-w-[240px]">
               {{ dep.fournisseur || '-' }}
             </td>
-            <td class="px-3 py-2 text-gray-400 truncate max-w-[200px]">
+            <td class="text-gray-400 truncate max-w-[360px]">
               {{ dep.description || '-' }}
             </td>
-            <td class="px-3 py-2">
+            <td>
               <span 
                 v-if="dep.tag_nom"
-                class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-500/20 text-blue-400"
+                class="badge badge-info"
               >
                 {{ dep.tag_nom }}
               </span>
               <span v-else class="text-gray-600">-</span>
             </td>
-            <td class="px-3 py-2 text-right text-red-400 font-mono whitespace-nowrap">
+            <td class="text-right text-red-400 font-mono whitespace-nowrap">
               {{ dep.debit > 0 ? formatCurrency(dep.debit) : '-' }}
             </td>
-            <td class="px-3 py-2 text-right text-green-400 font-mono whitespace-nowrap">
+            <td class="text-right text-green-400 font-mono whitespace-nowrap">
               {{ dep.credit > 0 ? formatCurrency(dep.credit) : '-' }}
             </td>
-            <td class="px-3 py-2 text-center">
+            <td class="text-center">
               <router-link
                 :to="{ path: '/documents/' + dep.document_id + '/edit', query: { highlight: 'operation', fournisseur: dep.fournisseur, description: dep.description } }"
                 class="text-gray-500 hover:text-blue-400 transition-colors"
@@ -108,14 +107,14 @@
         <button
           @click="currentPage = 1"
           :disabled="currentPage === 1"
-          class="px-2 py-1 text-xs rounded bg-gray-800 text-gray-400 hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="btn btn-sm btn-secondary"
         >
           &lt;&lt;
         </button>
         <button
           @click="currentPage--"
           :disabled="currentPage === 1"
-          class="px-2 py-1 text-xs rounded bg-gray-800 text-gray-400 hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="btn btn-sm btn-secondary"
         >
           &lt;
         </button>
@@ -125,14 +124,14 @@
         <button
           @click="currentPage++"
           :disabled="currentPage === totalPages"
-          class="px-2 py-1 text-xs rounded bg-gray-800 text-gray-400 hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="btn btn-sm btn-secondary"
         >
           &gt;
         </button>
         <button
           @click="currentPage = totalPages"
           :disabled="currentPage === totalPages"
-          class="px-2 py-1 text-xs rounded bg-gray-800 text-gray-400 hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="btn btn-sm btn-secondary"
         >
           &gt;&gt;
         </button>
diff --git a/frontend/src/components/analytics/FilterPanel.vue b/frontend/src/components/analytics/FilterPanel.vue
index fc9b03e..bde62a7 100644
--- a/frontend/src/components/analytics/FilterPanel.vue
+++ b/frontend/src/components/analytics/FilterPanel.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-gray-900 rounded-lg p-4 space-y-4">
+  <div class="card card-body space-y-4">
     <div class="flex items-center justify-between">
-      <h3 class="text-sm font-medium text-gray-300">Filtres</h3>
+      <h3 class="card-title">Filtres</h3>
       <button 
         v-if="hasActiveFilters"
         @click="resetFilters"
@@ -11,14 +11,14 @@
       </button>
     </div>
 
-    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-3">
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-7 gap-3">
       <!-- Immeuble -->
       <div>
         <label class="block text-xs text-gray-400 mb-1">Immeuble</label>
         <select 
           v-model="filters.immeuble_id"
           @change="onImmeubleChange"
-          class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
+          class="input"
         >
           <option :value="null">Tous</option>
           <option v-for="imm in immeubles" :key="imm.id" :value="imm.id">
@@ -33,7 +33,7 @@
         <select 
           v-model="filters.lot_id"
           @change="emitFilters"
-          class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
+          class="input"
           :disabled="!filters.immeuble_id"
         >
           <option :value="null">Tous</option>
@@ -49,7 +49,7 @@
         <select 
           v-model="filters.categorie"
           @change="emitFilters"
-          class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
+          class="input"
         >
           <option :value="null">Toutes</option>
           <option v-for="cat in categories" :key="cat" :value="cat">
@@ -64,7 +64,7 @@
         <select 
           v-model="filters.tag_id"
           @change="emitFilters"
-          class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
+          class="input"
         >
           <option :value="null">Tous</option>
           <option v-for="tag in tags" :key="tag.id" :value="tag.id">
@@ -80,7 +80,7 @@
           type="date"
           v-model="filters.date_debut"
           @change="emitFilters"
-          class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
+          class="input"
         />
       </div>
 
@@ -91,21 +91,21 @@
           type="date"
           v-model="filters.date_fin"
           @change="emitFilters"
-          class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
+          class="input"
         />
       </div>
-    </div>
 
-    <!-- Fournisseur (recherche) -->
-    <div class="max-w-xs">
-      <label class="block text-xs text-gray-400 mb-1">Fournisseur</label>
-      <input 
-        type="text"
-        v-model="filters.fournisseur"
-        @input="emitFilters"
-        placeholder="Rechercher..."
-        class="w-full bg-gray-800 border border-gray-700 rounded px-2 py-1.5 text-sm text-white focus:outline-none focus:border-blue-500"
-      />
+      <!-- Fournisseur (recherche) -->
+      <div>
+        <label class="block text-xs text-gray-400 mb-1">Fournisseur</label>
+        <input
+          type="text"
+          v-model="filters.fournisseur"
+          @input="emitFilters"
+          placeholder="Rechercher..."
+          class="input"
+        />
+      </div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/analytics/KpiCards.vue b/frontend/src/components/analytics/KpiCards.vue
index 419fbfe..95e0dff 100644
--- a/frontend/src/components/analytics/KpiCards.vue
+++ b/frontend/src/components/analytics/KpiCards.vue
@@ -3,7 +3,7 @@
     <div 
       v-for="kpi in kpis" 
       :key="kpi.key"
-      class="bg-gray-900 rounded-lg p-4"
+      class="card card-body"
     >
       <div class="text-xs text-gray-400 mb-1">{{ kpi.label }}</div>
       <div class="text-xl font-bold" :class="kpi.colorClass || 'text-white'">
diff --git a/frontend/src/components/analytics/MonthlyChart.vue b/frontend/src/components/analytics/MonthlyChart.vue
index 47833b6..0580a5f 100644
--- a/frontend/src/components/analytics/MonthlyChart.vue
+++ b/frontend/src/components/analytics/MonthlyChart.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-gray-900 rounded-lg p-4">
-    <h3 class="text-sm font-medium text-gray-300 mb-4">Evolution mensuelle</h3>
+  <div class="card card-body">
+    <h3 class="card-title block mb-4">Evolution mensuelle</h3>
     <div class="h-64">
       <Bar 
         v-if="chartData.labels.length > 0"
diff --git a/frontend/src/components/analytics/TopFournisseursChart.vue b/frontend/src/components/analytics/TopFournisseursChart.vue
index 18dbbd9..5cba3a4 100644
--- a/frontend/src/components/analytics/TopFournisseursChart.vue
+++ b/frontend/src/components/analytics/TopFournisseursChart.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="bg-gray-900 rounded-lg p-4">
-    <h3 class="text-sm font-medium text-gray-300 mb-4">Top fournisseurs</h3>
+  <div class="card card-body">
+    <h3 class="card-title block mb-4">Top fournisseurs</h3>
     <div class="h-64">
       <Bar 
         v-if="chartData.labels.length > 0"
diff --git a/frontend/src/components/dashboard/FinancialSummary.vue b/frontend/src/components/dashboard/FinancialSummary.vue
index 38be870..631c77a 100644
--- a/frontend/src/components/dashboard/FinancialSummary.vue
+++ b/frontend/src/components/dashboard/FinancialSummary.vue
@@ -8,7 +8,7 @@
 
     <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
       <!-- Revenus -->
-      <div class="relative bg-gray-900 rounded-lg p-4 border border-gray-700 overflow-hidden">
+      <div class="card card-body relative">
         <!-- Sparkline background -->
         <svg 
           v-if="data.revenus_history?.length"
@@ -35,7 +35,7 @@
       </div>
 
       <!-- Depenses -->
-      <div class="relative bg-gray-900 rounded-lg p-4 border border-gray-700 overflow-hidden">
+      <div class="card card-body relative">
         <!-- Sparkline background -->
         <svg 
           v-if="data.depenses_history?.length"
@@ -62,7 +62,7 @@
       </div>
 
       <!-- Impayes -->
-      <div class="relative bg-gray-900 rounded-lg p-4 border border-gray-700 overflow-hidden">
+      <div class="card card-body relative">
         <!-- Sparkline background -->
         <svg 
           v-if="data.impayes_history?.length"
@@ -98,7 +98,7 @@
       </div>
 
       <!-- Solde -->
-      <div class="relative bg-gray-900 rounded-lg p-4 border border-gray-700 overflow-hidden">
+      <div class="card card-body relative">
         <!-- Sparkline background -->
         <svg 
           v-if="data.solde_history?.length"
diff --git a/frontend/src/components/dashboard/ImmeubleShortcuts.vue b/frontend/src/components/dashboard/ImmeubleShortcuts.vue
index 17aac00..2fefc90 100644
--- a/frontend/src/components/dashboard/ImmeubleShortcuts.vue
+++ b/frontend/src/components/dashboard/ImmeubleShortcuts.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700">
-    <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
-      <h2 class="text-sm font-medium text-gray-300">Vos immeubles</h2>
+  <div class="card">
+    <div class="card-header">
+      <h2 class="card-title">Vos immeubles</h2>
       <button 
         @click="$emit('view-all')"
         class="text-xs text-blue-400 hover:text-blue-300 transition-colors"
@@ -11,7 +11,7 @@
     </div>
 
     <div v-if="loading" class="p-8 text-center text-gray-500">
-      <div class="inline-block animate-spin rounded-full h-6 w-6 border-2 border-gray-600 border-t-blue-400"></div>
+      <div class="spinner h-6 w-6"></div>
     </div>
 
     <div v-else-if="immeubles.length === 0" class="p-8 text-center text-gray-500">
diff --git a/frontend/src/components/dashboard/MiniTrendChart.vue b/frontend/src/components/dashboard/MiniTrendChart.vue
index 3bcfae6..e2bf6ce 100644
--- a/frontend/src/components/dashboard/MiniTrendChart.vue
+++ b/frontend/src/components/dashboard/MiniTrendChart.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700">
-    <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
-      <h2 class="text-sm font-medium text-gray-300">Evolution mensuelle</h2>
+  <div class="card">
+    <div class="card-header">
+      <h2 class="card-title">Evolution mensuelle</h2>
       <div class="flex items-center gap-3 text-xs">
         <span class="flex items-center gap-1">
           <span class="w-2 h-2 rounded-full bg-green-400"></span>
@@ -15,7 +15,7 @@
     </div>
 
     <div v-if="loading" class="p-8 text-center text-gray-500">
-      <div class="inline-block animate-spin rounded-full h-6 w-6 border-2 border-gray-600 border-t-blue-400"></div>
+      <div class="spinner h-6 w-6"></div>
     </div>
 
     <div v-else-if="trends.length === 0" class="p-8 text-center text-gray-500">
diff --git a/frontend/src/components/dashboard/RecentRevenus.vue b/frontend/src/components/dashboard/RecentRevenus.vue
index 21f7d96..f91b25c 100644
--- a/frontend/src/components/dashboard/RecentRevenus.vue
+++ b/frontend/src/components/dashboard/RecentRevenus.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700">
-    <div class="px-4 py-3 border-b border-gray-700 flex items-center justify-between">
-      <h2 class="text-sm font-medium text-gray-300">Derniers loyers</h2>
+  <div class="card">
+    <div class="card-header">
+      <h2 class="card-title">Derniers loyers</h2>
       <span class="text-xs text-gray-500">{{ revenus.length }} entrees</span>
     </div>
 
     <div v-if="loading" class="p-8 text-center text-gray-500">
-      <div class="inline-block animate-spin rounded-full h-6 w-6 border-2 border-gray-600 border-t-blue-400"></div>
+      <div class="spinner h-6 w-6"></div>
     </div>
 
     <div v-else-if="revenus.length === 0" class="p-8 text-center text-gray-500">
diff --git a/frontend/src/components/revenus/RevenusFilterPanel.vue b/frontend/src/components/revenus/RevenusFilterPanel.vue
index 1def6e1..67887b8 100644
--- a/frontend/src/components/revenus/RevenusFilterPanel.vue
+++ b/frontend/src/components/revenus/RevenusFilterPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
+  <div class="card card-body">
     <div class="flex items-center justify-between mb-4">
       <h3 class="text-sm font-medium text-white">Filtres</h3>
       <button 
@@ -17,7 +17,7 @@
         <select 
           v-model="filters.immeuble_id"
           @change="emitFilters"
-          class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-white focus:outline-none focus:border-blue-500"
+          class="input"
         >
           <option :value="null">Tous</option>
           <option 
@@ -36,7 +36,7 @@
         <select 
           v-model="filters.type_ligne"
           @change="emitFilters"
-          class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-white focus:outline-none focus:border-blue-500"
+          class="input"
         >
           <option :value="null">Tous</option>
           <option value="loyer">Loyer</option>
@@ -53,7 +53,7 @@
           type="date"
           v-model="filters.date_debut"
           @change="emitFilters"
-          class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-white focus:outline-none focus:border-blue-500"
+          class="input"
         />
       </div>
 
@@ -64,7 +64,7 @@
           type="date"
           v-model="filters.date_fin"
           @change="emitFilters"
-          class="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-white focus:outline-none focus:border-blue-500"
+          class="input"
         />
       </div>
 
@@ -75,7 +75,7 @@
             type="checkbox"
             v-model="filters.impayes_only"
             @change="emitFilters"
-            class="w-4 h-4 rounded bg-gray-800 border-gray-700 text-amber-500 focus:ring-amber-500 focus:ring-offset-gray-900"
+            class="w-4 h-4 rounded border-gray-700 accent-blue-500 [color-scheme:dark]"
           />
           <span class="text-sm text-gray-300">Impayes uniquement</span>
         </label>
diff --git a/frontend/src/components/revenus/RevenusImmeubleChart.vue b/frontend/src/components/revenus/RevenusImmeubleChart.vue
index 711cca0..813f653 100644
--- a/frontend/src/components/revenus/RevenusImmeubleChart.vue
+++ b/frontend/src/components/revenus/RevenusImmeubleChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
+  <div class="card card-body">
     <div class="flex items-center justify-between mb-4">
       <h3 class="text-sm font-medium text-white">Revenus par immeuble</h3>
       <span class="text-xs text-gray-500">{{ data.length }} immeubles</span>
diff --git a/frontend/src/components/revenus/RevenusKpiCards.vue b/frontend/src/components/revenus/RevenusKpiCards.vue
index 299f68a..d2dae5f 100644
--- a/frontend/src/components/revenus/RevenusKpiCards.vue
+++ b/frontend/src/components/revenus/RevenusKpiCards.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
     <!-- Total Revenus -->
-    <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
+    <div class="card card-body">
       <div class="flex items-center justify-between mb-2">
         <span class="text-xs text-gray-400 uppercase tracking-wide">Total Revenus</span>
         <svg class="w-4 h-4 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -17,7 +17,7 @@
     </div>
 
     <!-- Regles -->
-    <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
+    <div class="card card-body">
       <div class="flex items-center justify-between mb-2">
         <span class="text-xs text-gray-400 uppercase tracking-wide">Regles</span>
         <svg class="w-4 h-4 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -33,7 +33,7 @@
     </div>
 
     <!-- Impayes -->
-    <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
+    <div class="card card-body">
       <div class="flex items-center justify-between mb-2">
         <span class="text-xs text-gray-400 uppercase tracking-wide">Impayes</span>
         <div 
@@ -55,7 +55,7 @@
     </div>
 
     <!-- Taux Recouvrement -->
-    <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
+    <div class="card card-body">
       <div class="flex items-center justify-between mb-2">
         <span class="text-xs text-gray-400 uppercase tracking-wide">Recouvrement</span>
         <svg class="w-4 h-4 text-purple-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -74,7 +74,7 @@
     </div>
 
     <!-- Locataires Actifs -->
-    <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
+    <div class="card card-body">
       <div class="flex items-center justify-between mb-2">
         <span class="text-xs text-gray-400 uppercase tracking-wide">Locataires</span>
         <svg class="w-4 h-4 text-cyan-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
@@ -90,7 +90,7 @@
     </div>
 
     <!-- Lots Occupes -->
-    <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
+    <div class="card card-body">
       <div class="flex items-center justify-between mb-2">
         <span class="text-xs text-gray-400 uppercase tracking-wide">Lots</span>
         <svg class="w-4 h-4 text-pink-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
diff --git a/frontend/src/components/revenus/RevenusMonthlyChart.vue b/frontend/src/components/revenus/RevenusMonthlyChart.vue
index f9f74ea..404d892 100644
--- a/frontend/src/components/revenus/RevenusMonthlyChart.vue
+++ b/frontend/src/components/revenus/RevenusMonthlyChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
+  <div class="card card-body">
     <div class="flex items-center justify-between mb-4">
       <h3 class="text-sm font-medium text-white">Evolution mensuelle des revenus</h3>
       <div class="flex items-center gap-4 text-xs">
diff --git a/frontend/src/components/revenus/RevenusTable.vue b/frontend/src/components/revenus/RevenusTable.vue
index 25411f7..9534da9 100644
--- a/frontend/src/components/revenus/RevenusTable.vue
+++ b/frontend/src/components/revenus/RevenusTable.vue
@@ -1,23 +1,21 @@
 <template>
-  <div class="bg-gray-900 rounded-lg border border-gray-700 overflow-hidden">
-    <div class="p-4 border-b border-gray-700">
-      <div class="flex items-center justify-between">
-        <div class="flex items-center gap-2">
-          <h3 class="text-sm font-medium text-white">Detail des revenus</h3>
-          <span class="text-xs text-gray-500">({{ revenus.length }} lignes)</span>
-        </div>
-        <button 
-          @click="exportCsv"
-          class="text-xs text-blue-400 hover:text-blue-300 transition-colors"
-        >
-          Exporter CSV
-        </button>
+  <div class="card">
+    <div class="card-header">
+      <div class="flex items-center gap-2">
+        <h3 class="card-title">Detail des revenus</h3>
+        <span class="text-xs text-gray-500">({{ revenus.length }} lignes)</span>
       </div>
+      <button
+        @click="exportCsv"
+        class="text-xs text-blue-400 hover:text-blue-300 transition-colors"
+      >
+        Exporter CSV
+      </button>
     </div>
 
     <!-- Loading -->
-    <div v-if="isLoading" class="p-8 text-center text-gray-500">
-      <svg class="animate-spin h-6 w-6 mx-auto mb-2" fill="none" viewBox="0 0 24 24">
+    <div v-if="isLoading" class="empty-state">
+      <svg class="animate-spin h-6 w-6 mx-auto mb-2 text-blue-400" fill="none" viewBox="0 0 24 24">
         <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
         <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
       </svg>
@@ -25,60 +23,59 @@
     </div>
 
     <!-- Table -->
-    <div v-else-if="revenus.length > 0" class="overflow-x-auto">
-      <table class="w-full text-sm">
-        <thead class="bg-gray-800/50 text-gray-400 text-xs uppercase">
+    <div v-else-if="revenus.length > 0" class="table-wrap">
+      <table class="table">
+        <thead>
           <tr>
-            <th class="px-4 py-3 text-left">Date</th>
-            <th class="px-4 py-3 text-left">Locataire</th>
-            <th class="px-4 py-3 text-left">Lot</th>
-            <th class="px-4 py-3 text-left">Type</th>
-            <th class="px-4 py-3 text-right">Loyers</th>
-            <th class="px-4 py-3 text-right">Taxes</th>
-            <th class="px-4 py-3 text-right">Total</th>
-            <th class="px-4 py-3 text-right">Regle</th>
-            <th class="px-4 py-3 text-right">Impaye</th>
-            <th class="px-4 py-3 w-10"></th>
+            <th>Date</th>
+            <th>Locataire</th>
+            <th>Lot</th>
+            <th>Type</th>
+            <th class="text-right">Loyers</th>
+            <th class="text-right">Taxes</th>
+            <th class="text-right">Total</th>
+            <th class="text-right">Regle</th>
+            <th class="text-right">Impaye</th>
+            <th class="w-10"></th>
           </tr>
         </thead>
-        <tbody class="divide-y divide-gray-800">
+        <tbody>
           <tr 
             v-for="revenu in paginatedRevenus" 
             :key="revenu.id"
-            class="hover:bg-gray-800/30 transition-colors"
           >
-            <td class="px-4 py-3 text-gray-300 whitespace-nowrap">
+            <td class="text-gray-300 whitespace-nowrap">
               {{ formatDate(revenu.document_date) }}
             </td>
-            <td class="px-4 py-3 text-white font-medium max-w-[200px] truncate" :title="revenu.locataire_nom">
+            <td class="text-white font-medium max-w-[280px] truncate" :title="revenu.locataire_nom">
               {{ revenu.locataire_nom }}
             </td>
-            <td class="px-4 py-3 text-gray-400 whitespace-nowrap" :title="getImmeubleName(revenu)">
+            <td class="text-gray-400 whitespace-nowrap" :title="getImmeubleName(revenu)">
               {{ getImmeubleName(revenu) }} / {{ revenu.lot_numero }}
             </td>
-            <td class="px-4 py-3">
+            <td>
               <span :class="getTypeBadgeClass(revenu.type_ligne)">
                 {{ revenu.type_ligne }}
               </span>
             </td>
-            <td class="px-4 py-3 text-right text-gray-300 whitespace-nowrap">
+            <td class="text-right text-gray-300 whitespace-nowrap">
               {{ formatAmount(revenu.loyers) }}
             </td>
-            <td class="px-4 py-3 text-right text-gray-400 whitespace-nowrap">
+            <td class="text-right text-gray-400 whitespace-nowrap">
               {{ formatAmount(revenu.taxes) }}
             </td>
-            <td class="px-4 py-3 text-right text-green-400 font-medium whitespace-nowrap">
+            <td class="text-right text-green-400 font-medium whitespace-nowrap">
               {{ formatAmount(revenu.total) }}
             </td>
-            <td class="px-4 py-3 text-right text-blue-400 whitespace-nowrap">
+            <td class="text-right text-blue-400 whitespace-nowrap">
               {{ formatAmount(revenu.regles) }}
             </td>
-            <td class="px-4 py-3 text-right whitespace-nowrap">
+            <td class="text-right whitespace-nowrap">
               <span :class="revenu.impayes > 0 ? 'text-amber-400 font-medium' : 'text-gray-500'">
                 {{ formatAmount(revenu.impayes) }}
               </span>
             </td>
-            <td class="px-4 py-3 text-center">
+            <td class="text-center">
               <router-link
                 :to="{ path: '/documents/' + revenu.document_id + '/edit', query: { highlight: 'locataire', lot_numero: revenu.lot_numero, locataire_nom: revenu.locataire_nom } }"
                 class="text-gray-500 hover:text-blue-400 transition-colors"
@@ -95,12 +92,12 @@
     </div>
 
     <!-- Empty state -->
-    <div v-else class="p-8 text-center text-gray-500">
+    <div v-else class="empty-state">
       Aucun revenu trouve
     </div>
 
     <!-- Pagination -->
-    <div v-if="revenus.length > pageSize" class="p-4 border-t border-gray-700 flex items-center justify-between">
+    <div v-if="revenus.length > pageSize" class="card-header border-b-0 border-t border-gray-700">
       <div class="text-xs text-gray-500">
         Affichage {{ startIndex + 1 }} - {{ endIndex }} sur {{ revenus.length }}
       </div>
@@ -108,14 +105,14 @@
         <button 
           @click="currentPage = 1" 
           :disabled="currentPage === 1"
-          class="px-2 py-1 text-xs rounded bg-gray-800 text-gray-400 hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="btn btn-sm btn-secondary"
         >
           &laquo;
         </button>
         <button 
           @click="currentPage--" 
           :disabled="currentPage === 1"
-          class="px-2 py-1 text-xs rounded bg-gray-800 text-gray-400 hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="btn btn-sm btn-secondary"
         >
           &lsaquo;
         </button>
@@ -125,14 +122,14 @@
         <button 
           @click="currentPage++" 
           :disabled="currentPage === totalPages"
-          class="px-2 py-1 text-xs rounded bg-gray-800 text-gray-400 hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="btn btn-sm btn-secondary"
         >
           &rsaquo;
         </button>
         <button 
           @click="currentPage = totalPages" 
           :disabled="currentPage === totalPages"
-          class="px-2 py-1 text-xs rounded bg-gray-800 text-gray-400 hover:bg-gray-700 disabled:opacity-50 disabled:cursor-not-allowed"
+          class="btn btn-sm btn-secondary"
         >
           &raquo;
         </button>
diff --git a/frontend/src/components/revenus/TopImpayesList.vue b/frontend/src/components/revenus/TopImpayesList.vue
index 095e9cf..663fd6a 100644
--- a/frontend/src/components/revenus/TopImpayesList.vue
+++ b/frontend/src/components/revenus/TopImpayesList.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
+  <div class="card card-body">
     <div class="flex items-center justify-between mb-4">
       <div class="flex items-center gap-2">
         <h3 class="text-sm font-medium text-white">Locataires avec impayes</h3>