admin/ludikevent_crm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
e644dc4b85928a60c92656cc83d9bb7870606455
ludikevent_crm/templates/dashboard/contrats/list.twig
Serreau Jovann e644dc4b85 ``` 
✨ feat(templates): Améliore la lisibilité et l'esthétique de l'interface

Ce commit met à jour les couleurs et les styles de texte dans plusieurs
templates pour améliorer la lisibilité et l'esthétique globale de
l'interface utilisateur.  Les couleurs de texte secondaires sont
ajustées pour un meilleur contraste.
```
2026-01-29 18:20:22 +01:00

170 lines
14 KiB
Twig
Raw Blame History

{% extends 'dashboard/base.twig' %}
{% block title %}Contrats de locations{% endblock %}
{% block title_header %}Contrats de locations{% endblock %}
{% block actions %}
<div class="flex items-center gap-3">
<a href="{{ path('app_crm_contrats_create') }}"
class="group relative flex items-center gap-2 px-6 py-3 bg-gradient-to-br from-blue-600 to-indigo-700 hover:from-blue-500 hover:to-indigo-600 rounded-2xl text-white text-xs font-bold uppercase tracking-wider transition-all shadow-[0_8px_20px_-6px_rgba(37,99,235,0.5)]">
<svg class="w-4 h-4 transition-transform group-hover:rotate-12" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
Créer un contrat
</a>
</div>
{% endblock %}
{% block body %}
<div class="space-y-8 pb-20">
{# --- RECHERCHE --- #}
<div class="relative group max-w-2xl mx-auto">
<div class="absolute -inset-1 bg-gradient-to-r from-blue-500 to-indigo-500 rounded-[2rem] blur opacity-20 group-focus-within:opacity-40 transition duration-1000"></div>
<div class="relative flex items-center">
<div class="absolute inset-y-0 left-0 pl-6 flex items-center pointer-events-none">
<svg class="w-5 h-5 text-slate-400 group-focus-within:text-blue-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
</svg>
</div>
<input type="text" id="searchContrat"
placeholder="Rechercher un contrat, un client ou une ville..."
class="w-full bg-slate-900/40 border border-white/10 backdrop-blur-2xl text-white text-sm rounded-[1.8rem] pl-14 pr-6 py-5 focus:outline-none focus:ring-2 focus:ring-blue-500/50 transition-all placeholder:text-slate-500">
</div>
</div>
<div id="contratsList" class="grid gap-6">
{% for contrat in contrats %}
{% set acompteOk = contratPaymentPay(contrat, 'accompte') %}
{% set cautionOk = contratPaymentPay(contrat, 'caution') %}
{% set soldeOk = contratPaymentPay(contrat, 'solde') %}
{% set cautionRelase = contratPaymentPay(contrat, 'caution_free') %}
{% set cautionEncaisser = contratPaymentPay(contrat, 'caution_recup') %}
<div class="contrat-card relative overflow-hidden group">
<div class="absolute -inset-px bg-gradient-to-r from-transparent via-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 rounded-[2rem]"></div>
<div class="relative bg-white/[0.03] border border-white/10 backdrop-blur-md rounded-[2rem] transition-all duration-300 group-hover:bg-white/[0.06] group-hover:translate-y-[-2px] group-hover:shadow-2xl group-hover:shadow-blue-500/10">
<div class="grid grid-cols-1 lg:grid-cols-12 items-center">
{# 1. REF & STATUS #}
<div class="lg:col-span-2 p-8 border-b lg:border-b-0 lg:border-r border-white/5 text-center lg:text-left">
<span class="text-[10px] font-bold text-blue-400 uppercase tracking-[0.2em] mb-1 block">Contrat</span>
<h3 class="text-white font-black text-xl tracking-tighter mb-3">{{ contrat.numReservation }}</h3>
{% if contrat.isSigned %}
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 text-[9px] font-bold uppercase tracking-wider">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span> Signé
</div>
{% else %}
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-amber-500/10 border border-amber-500/20 text-amber-400 text-[9px] font-bold uppercase tracking-wider">
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span> Attente
</div>
{% endif %}
</div>
{# 2. CLIENT #}
<div class="lg:col-span-3 p-8 border-b lg:border-b-0 lg:border-r border-white/5">
<div class="flex items-center gap-4">
<div class="w-12 h-12 bg-gradient-to-tr from-blue-600/20 to-indigo-600/20 rounded-2xl flex items-center justify-center border border-white/10 group-hover:scale-110 transition-transform">
<svg class="w-6 h-6 text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" stroke-width="1.5"></path></svg>
</div>
<div>
<p class="text-white font-bold text-base tracking-tight uppercase">{{ contrat.customer.surname }} {{ contrat.customer.name }}</p>
<p class="text-slate-500 text-xs font-medium line-clamp-1">{{ contrat.customer.email }}</p>
</div>
</div>
</div>
{# 3. LIEU #}
<div class="lg:col-span-2 p-8 border-b lg:border-b-0 lg:border-r border-white/5">
<div class="flex flex-col">
<span class="text-[10px] font-bold text-slate-300 uppercase tracking-widest mb-1">Destination</span>
<p class="text-slate-200 font-bold text-sm">{{ contrat.townEvent }}</p>
<p class="text-blue-500 font-black text-[11px]">{{ contrat.zipCodeEvent }}</p>
</div>
</div>
{# 4. PAIEMENTS #}
<div class="lg:col-span-3 p-8 bg-black/10 lg:bg-transparent">
<div class="grid grid-cols-3 gap-2">
{# ACOMPTE #}
<div class="flex flex-col items-center gap-2">
<div class="w-8 h-8 rounded-xl flex items-center justify-center transition-all duration-300
{{ acompteOk ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-rose-500/10 text-rose-500 border border-rose-500/20' }}">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="{{ acompteOk ? 'M5 13l4 4L19 7' : 'M6 18L18 6M6 6l12 12' }}"></path></svg>
</div>
<span class="text-[8px] font-black uppercase tracking-tighter {{ acompteOk ? 'text-emerald-500' : 'text-rose-500' }}">Acompte</span>
</div>
{# CAUTION (MULTI-ETATS) #}
<div class="flex flex-col items-center gap-2">
{% if cautionEncaisser %}
{# ÉTAT : RÉCUPÉRÉE / ENCAISSÉE (Litige) #}
<div class="w-8 h-8 rounded-xl flex items-center justify-center bg-rose-600/30 text-rose-400 border border-rose-500/50 shadow-[0_0_15px_rgba(225,29,72,0.3)]" title="Caution encaissée">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path></svg>
</div>
<span class="text-[8px] font-black uppercase tracking-tighter text-rose-400">Encaissée</span>
{% elseif cautionRelase %}
{# ÉTAT : LIBÉRÉE / RENDUE #}
<div class="w-8 h-8 rounded-xl flex items-center justify-center bg-blue-500/20 text-blue-400 border border-blue-500/30" title="Caution libérée">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z"></path></svg>
</div>
<span class="text-[8px] font-black uppercase tracking-tighter text-blue-400">Libérée</span>
{% elseif cautionOk %}
{# ÉTAT : DÉTENUE (Payée mais pas encore libérée) #}
<div class="w-8 h-8 rounded-xl flex items-center justify-center bg-emerald-500/20 text-emerald-400 border border-emerald-500/30" title="Caution détenue">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
</div>
<span class="text-[8px] font-black uppercase tracking-tighter text-emerald-500">Détenue</span>
{% else %}
{# ÉTAT : MANQUANTE #}
<div class="w-8 h-8 rounded-xl flex items-center justify-center bg-rose-500/10 text-rose-500 border border-rose-500/20 animate-pulse" title="Caution manquante">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
</div>
<span class="text-[8px] font-black uppercase tracking-tighter text-rose-500">Requise</span>
{% endif %}
</div>
{# SOLDE #}
<div class="flex flex-col items-center gap-2">
<div class="w-8 h-8 rounded-xl flex items-center justify-center transition-all duration-300
{{ soldeOk ? 'bg-emerald-500/20 text-emerald-400 border border-emerald-500/30' : 'bg-rose-500/10 text-rose-500 border border-rose-500/20' }}">
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="{{ soldeOk ? 'M5 13l4 4L19 7' : 'M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z' }}"></path></svg>
</div>
<span class="text-[8px] font-black uppercase tracking-tighter {{ soldeOk ? 'text-emerald-500' : 'text-rose-500' }}">Solde</span>
</div>
</div>
</div>
{# 5. ACTIONS #}
<div class="lg:col-span-2 p-6 flex lg:flex-col items-center justify-center gap-3">
<a data-turbo="false" href="{{ path('app_crm_contrats_view', {id: contrat.id}) }}"
class="w-full lg:w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-blue-600 hover:border-blue-400 transition-all group/btn" title="Voir">
<svg class="w-5 h-5 group-hover/btn:scale-110 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
</a>
<a data-turbo="false" href="{{ path('app_crm_contrats', {idSend: contrat.id}) }}"
onclick="return confirm('Envoyer à {{ contrat.customer.email }} ?')"
class="w-full lg:w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center text-white hover:bg-indigo-600 hover:border-indigo-400 transition-all group/btn" title="Envoyer">
<svg class="w-5 h-5 group-hover/btn:translate-x-1 group-hover/btn:-translate-y-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path></svg>
</a>
</div>
</div>
</div>
</div>
{% endfor %}
</div>
<div class="mt-12 glass-pagination">
{{ knp_pagination_render(contrats) }}
</div>
</div>
{% endblock %}
Reference in New Issue View Git Blame Copy Permalink