lafrite/pdf_oralia_vibe
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(ui): aligne les composants de donnees sur le design system

Browse Source 
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>
This commit is contained in:
Bertrand Benjamin
2026-07-25 19:50:26 +02:00
parent 02a3459291
commit 14b39efe3b
16 changed files with 135 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/analytics/CategoryChart.vue
View File

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

67
frontend/src/components/analytics/DepensesTable.vue
View File

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

40
frontend/src/components/analytics/FilterPanel.vue
View File

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

2
frontend/src/components/analytics/KpiCards.vue
View File

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

4
frontend/src/components/analytics/MonthlyChart.vue
View File

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

4
frontend/src/components/analytics/TopFournisseursChart.vue
View File

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

8
frontend/src/components/dashboard/FinancialSummary.vue
View File

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

8
frontend/src/components/dashboard/ImmeubleShortcuts.vue
View File

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

8
frontend/src/components/dashboard/MiniTrendChart.vue
View File

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

8
frontend/src/components/dashboard/RecentRevenus.vue
View File

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

12
frontend/src/components/revenus/RevenusFilterPanel.vue
View File

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

2
frontend/src/components/revenus/RevenusImmeubleChart.vue
View File

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

12
frontend/src/components/revenus/RevenusKpiCards.vue
View File

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

2
frontend/src/components/revenus/RevenusMonthlyChart.vue
View File

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

89
frontend/src/components/revenus/RevenusTable.vue
View File

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

2
frontend/src/components/revenus/TopImpayesList.vue
View File

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