```
✨ feat(reservation/flow): Améliore le flux de réservation et ajoute des options.
Cette commit améliore le flux de réservation, ajoute une estimation des
frais de livraison et gère les options de produit et les paiements.
```
This commit is contained in:
Serreau Jovann
122
templates/dashboard/flow/index.twig
Normal file
122
templates/dashboard/flow/index.twig
Normal file
@@ -0,0 +1,122 @@
|
||||
{% extends 'dashboard/base.twig' %}
|
||||
|
||||
{% block title %}Réservations en ligne{% endblock %}
|
||||
{% block title_header %}Réservations en ligne{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="space-y-8 pb-20">
|
||||
|
||||
{# --- FILTRES (Optionnel) --- #}
|
||||
{# Pour l'instant simple liste #}
|
||||
|
||||
<div id="flowList" class="grid gap-6">
|
||||
{% for session in sessions %}
|
||||
<div class="contrat-card relative overflow-hidden group">
|
||||
{# Background Hover Effect #}
|
||||
<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. DATE & 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">Créé le</span>
|
||||
<h3 class="text-white font-bold text-sm tracking-tight mb-3">
|
||||
{{ session.createdAt|date('d/m/Y H:i') }}
|
||||
</h3>
|
||||
|
||||
{% if session.state == 'send' %}
|
||||
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-[9px] font-bold uppercase tracking-wider">
|
||||
<span class="w-1.5 h-1.5 rounded-full bg-blue-500 animate-pulse"></span> Envoyée
|
||||
</div>
|
||||
{% elseif session.state == 'created' %}
|
||||
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-slate-500/10 border border-slate-500/20 text-slate-400 text-[9px] font-bold uppercase tracking-wider">
|
||||
Brouillon
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-white/10 border border-white/20 text-slate-300 text-[9px] font-bold uppercase tracking-wider">
|
||||
{{ session.state|capitalize }}
|
||||
</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">
|
||||
{% if session.customer %}
|
||||
<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">{{ session.customer.surname }} {{ session.customer.name }}</p>
|
||||
<p class="text-slate-500 text-xs font-medium line-clamp-1">{{ session.customer.email }}</p>
|
||||
<p class="text-slate-500 text-xs font-medium">{{ session.customer.phone }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="flex items-center gap-4 opacity-50">
|
||||
<div class="w-12 h-12 bg-slate-800 rounded-2xl flex items-center justify-center border border-white/5">
|
||||
<svg class="w-6 h-6 text-slate-500" 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-slate-400 font-bold text-sm tracking-tight italic">Client non identifié</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# 3. LIEU & TYPE #}
|
||||
<div class="lg:col-span-3 p-8 border-b lg:border-b-0 lg:border-r border-white/5">
|
||||
<div class="flex flex-col gap-2">
|
||||
<div>
|
||||
<span class="text-[10px] font-bold text-slate-300 uppercase tracking-widest mb-1 block">Événement</span>
|
||||
<p class="text-slate-200 font-bold text-sm">{{ session.type|default('Non spécifié') }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-slate-400 text-xs flex items-center gap-1">
|
||||
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" /></svg>
|
||||
{{ session.townEvent|default('Ville inconnue') }} <span class="text-slate-600">({{ session.zipCodeEvent }})</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# 4. DETAILS (Nb produits) #}
|
||||
<div class="lg:col-span-2 p-8 border-b lg:border-b-0 border-white/5">
|
||||
<span class="text-[10px] font-bold text-slate-300 uppercase tracking-widest mb-1 block">Contenu</span>
|
||||
<p class="text-white font-bold text-sm">
|
||||
{{ session.products['ids']|default([])|length }} produits
|
||||
</p>
|
||||
{% if session.products['start'] is defined %}
|
||||
<p class="text-xs text-slate-500 mt-1">
|
||||
Du {{ session.products['start']|date('d/m') }} au {{ session.products['end']|date('d/m/Y') }}
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{# 5. ACTIONS #}
|
||||
<div class="lg:col-span-2 p-6 flex items-center justify-end pr-8">
|
||||
<a data-turbo="false" href="{{ path('app_crm_flow_view', {id: session.id}) }}"
|
||||
class="group/btn relative px-4 py-2 bg-blue-600/10 hover:bg-blue-600 text-blue-400 hover:text-white border border-blue-500/20 rounded-xl transition-all flex items-center gap-2 text-xs font-bold uppercase tracking-wider">
|
||||
Voir
|
||||
<svg class="w-4 h-4 transition-transform group-hover/btn:translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-20">
|
||||
<div class="w-16 h-16 bg-slate-800 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<svg class="w-8 h-8 text-slate-600" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path></svg>
|
||||
</div>
|
||||
<p class="text-slate-500 font-medium">Aucune demande de réservation trouvée.</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div class="mt-12 glass-pagination">
|
||||
{{ knp_pagination_render(sessions) }}
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user