feat: tab Methodes de paiement dans fiche client

Tableau avec : type (SEPA/CB), details (last4, brand), pays,
par defaut, date ajout, Stripe ID.
Info : le moyen par defaut est utilise pour les prelevements auto.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
2026-04-09 16:12:02 +02:00
parent 6e5e389b7d
commit 053da2ba8f

View File

@@ -50,6 +50,7 @@
'impayes': 'Impayes',
'echeancier': 'Echeancier',
'contrats': 'Contrats',
'paiement': 'Methodes de paiement',
'ndd': 'Noms de domaine',
'esyflex': 'E-Flex',
'sites': 'Sites Internet',
@@ -1281,6 +1282,64 @@
<div class="glass p-8 text-center text-gray-400 font-bold">Aucun contrat pour ce client.</div>
{% endif %}
{# Tab: Methodes de paiement #}
{% elseif tab == 'paiement' %}
<div class="flex items-center justify-between mb-4">
<h2 class="text-lg font-bold uppercase">Methodes de paiement</h2>
</div>
{% if paymentMethods|length > 0 %}
<div class="glass overflow-x-auto overflow-hidden mb-6">
<table class="w-full text-sm">
<thead>
<tr class="glass-dark text-white">
<th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Type</th>
<th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Details</th>
<th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Pays</th>
<th class="px-4 py-3 text-center font-bold uppercase text-xs tracking-widest">Par defaut</th>
<th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Ajoute le</th>
<th class="px-4 py-3 text-left font-bold uppercase text-xs tracking-widest">Stripe ID</th>
</tr>
</thead>
<tbody>
{% for pm in paymentMethods %}
<tr class="border-b border-white/20 hover:bg-white/50">
<td class="px-4 py-3">
{% if pm.type == 'sepa_debit' %}
<span class="px-2 py-0.5 bg-blue-500/20 text-blue-700 font-bold uppercase text-[10px]">SEPA</span>
{% else %}
<span class="px-2 py-0.5 bg-purple-500/20 text-purple-700 font-bold uppercase text-[10px]">CB</span>
{% endif %}
</td>
<td class="px-4 py-3 font-bold text-xs">
**** {{ pm.last4 ?: '****' }}
{% if pm.brand %}<span class="text-gray-400 ml-1">({{ pm.brand }})</span>{% endif %}
</td>
<td class="px-4 py-3 text-center text-xs">{{ pm.country ?: '—' }}</td>
<td class="px-4 py-3 text-center">
{% if pm.isDefault %}
<span class="px-2 py-0.5 bg-green-500/20 text-green-700 font-bold uppercase text-[10px]">Oui</span>
{% else %}
<span class="text-gray-400 text-xs">Non</span>
{% endif %}
</td>
<td class="px-4 py-3 text-xs text-gray-500">{{ pm.createdAt|date('d/m/Y H:i') }}</td>
<td class="px-4 py-3 font-mono text-[10px] text-gray-400">{{ pm.stripePaymentMethodId }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="glass p-4">
<p class="text-xs text-gray-500">
Le moyen de paiement par defaut sera utilise pour les prelevements automatiques des avis de paiement le dernier jour de chaque mois.
</p>
</div>
{% else %}
<div class="glass p-8 text-center text-gray-400 font-bold">Aucun moyen de paiement enregistre pour ce client.</div>
{% endif %}
{# Tab: E-Flex #}
{% elseif tab == 'esyflex' %}
{% set hasActiveEflex = false %}