admin/ludikevent_crm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1896f83107aec19513500e7e934632d0ddddc7fc
ludikevent_crm/templates/dashboard/flow/view.twig
Serreau Jovann 1896f83107 ``` 
✨ 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.
```
2026-02-05 08:18:29 +01:00

387 lines
27 KiB
Twig
Raw Blame History

{% extends 'dashboard/base.twig' %}
{% block title %}Détail de la réservation #{{ session.id }}{% endblock %}
{% block title_header %}Réservation #{{ session.id }}{% endblock %}
{% block actions %}
<div class="flex items-center gap-3">
<a href="{{ path('app_crm_flow') }}"
class="group relative flex items-center gap-2 px-6 py-3 bg-slate-700 hover:bg-slate-600 rounded-2xl text-white text-xs font-bold uppercase tracking-wider transition-all shadow-lg">
<svg class="w-4 h-4 transition-transform group-hover:-translate-x-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
</svg>
Retour
</a>
<a href="{{ path('app_crm_flow_delete', {id: session.id}) }}"
onclick="return confirm('Voulez-vous vraiment supprimer cette demande ? Cette action est irréversible.')"
data-turbo="false"
class="group relative flex items-center gap-2 px-6 py-3 bg-red-600 hover:bg-red-500 rounded-2xl text-white text-xs font-bold uppercase tracking-wider transition-all shadow-lg shadow-red-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" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
Refuser
</a>
<a href="{{ path('app_crm_flow_allow', {id: session.id}) }}"
data-turbo="false"
class="group relative flex items-center gap-2 px-6 py-3 bg-emerald-600 hover:bg-emerald-500 rounded-2xl text-white text-xs font-bold uppercase tracking-wider transition-all shadow-lg shadow-emerald-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" d="M5 13l4 4L19 7" />
</svg>
Valider la demande
</a>
</div>
{% endblock %}
{% block body %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<div class="space-y-8 pb-20">
{# STATUS CARD #}
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
<div class="p-6 bg-slate-800/50 backdrop-blur-md border border-slate-700/50 rounded-[2rem] flex flex-col items-center justify-center text-center">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-2">Statut</span>
{% if session.state == 'send' %}
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-blue-500/10 border border-blue-500/20 text-blue-400 text-xs font-bold uppercase tracking-wider">
<span class="w-2 h-2 rounded-full bg-blue-500 animate-pulse"></span> Envoyée
</div>
{% elseif session.state == 'created' %}
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-slate-500/10 border border-slate-500/20 text-slate-400 text-xs font-bold uppercase tracking-wider">
Brouillon
</div>
{% else %}
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 border border-white/20 text-slate-300 text-xs font-bold uppercase tracking-wider">
{{ session.state|capitalize }}
</div>
{% endif %}
</div>
<div class="p-6 bg-slate-800/50 backdrop-blur-md border border-slate-700/50 rounded-[2rem] flex flex-col items-center justify-center text-center">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-2">Création</span>
<p class="text-white font-bold text-lg">{{ session.createdAt|date('d/m/Y') }}</p>
<p class="text-slate-500 text-xs">{{ session.createdAt|date('H:i') }}</p>
</div>
<div class="p-6 bg-slate-800/50 backdrop-blur-md border border-slate-700/50 rounded-[2rem] flex flex-col items-center justify-center text-center">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-2">Dernière mise à jour</span>
{% if session.updatedAt %}
<p class="text-white font-bold text-lg">{{ session.updatedAt|date('d/m/Y') }}</p>
<p class="text-slate-500 text-xs">{{ session.updatedAt|date('H:i') }}</p>
{% else %}
<p class="text-slate-500 text-sm italic">Aucune modification</p>
{% endif %}
</div>
<div class="p-6 bg-slate-800/50 backdrop-blur-md border border-slate-700/50 rounded-[2rem] flex flex-col items-center justify-center text-center">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-2">Type d'événement</span>
<p class="text-white font-bold text-lg">{{ session.type|default('Non défini') }}</p>
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
{# CLIENT INFO #}
<div class="bg-slate-800/40 backdrop-blur-xl border border-slate-700/50 rounded-[2rem] p-8">
<h3 class="text-lg font-bold text-white mb-6 flex items-center gap-3">
<div class="p-2 bg-blue-500/10 rounded-lg text-blue-500">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
</div>
Informations Client
</h3>
{% if session.customer %}
<div class="space-y-4">
<div class="flex items-center justify-between p-4 bg-slate-900/50 rounded-xl border border-slate-700/50">
<span class="text-slate-400 text-xs uppercase tracking-wider font-bold">Nom complet</span>
<span class="text-white font-bold">{{ session.customer.surname }} {{ session.customer.name }}</span>
</div>
<div class="flex items-center justify-between p-4 bg-slate-900/50 rounded-xl border border-slate-700/50">
<span class="text-slate-400 text-xs uppercase tracking-wider font-bold">Email</span>
<a href="mailto:{{ session.customer.email }}" class="text-blue-400 hover:text-blue-300 transition-colors font-medium">{{ session.customer.email }}</a>
</div>
<div class="flex items-center justify-between p-4 bg-slate-900/50 rounded-xl border border-slate-700/50">
<span class="text-slate-400 text-xs uppercase tracking-wider font-bold">Téléphone</span>
<a href="tel:{{ session.customer.phone }}" class="text-white font-medium hover:text-blue-400 transition-colors">{{ session.customer.phone }}</a>
</div>
</div>
{% else %}
<div class="p-8 text-center border-2 border-dashed border-slate-700 rounded-2xl">
<p class="text-slate-500 font-medium">Aucun client associé pour le moment.</p>
</div>
{% endif %}
</div>
{# LOCATION & TECHNICAL INFO #}
<div class="bg-slate-800/40 backdrop-blur-xl border border-slate-700/50 rounded-[2rem] p-8">
<h3 class="text-lg font-bold text-white mb-6 flex items-center gap-3">
<div class="p-2 bg-purple-500/10 rounded-lg text-purple-500">
<svg class="w-5 h-5" 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"></path></svg>
</div>
Lieu & Technique
</h3>
<div class="space-y-4">
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700/50">
<span class="block text-slate-400 text-[10px] uppercase tracking-wider font-bold mb-1">Adresse de l'événement</span>
<p class="text-white font-medium">{{ session.adressEvent|default('Non renseignée') }}</p>
{% if session.adress2Event %}<p class="text-slate-400 text-sm mt-1">{{ session.adress2Event }}</p>{% endif %}
<p class="text-blue-400 font-bold mt-1">{{ session.zipCodeEvent }} {{ session.townEvent }}</p>
</div>
<div class="grid grid-cols-2 gap-4">
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700/50">
<span class="block text-slate-400 text-[10px] uppercase tracking-wider font-bold mb-1">Type de sol</span>
<p class="text-white font-medium">{{ session.typeSol|default('-') }}</p>
</div>
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700/50">
<span class="block text-slate-400 text-[10px] uppercase tracking-wider font-bold mb-1">Pente</span>
<p class="text-white font-medium">{{ session.pente|default('-') }}</p>
</div>
</div>
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700/50">
<span class="block text-slate-400 text-[10px] uppercase tracking-wider font-bold mb-1">Accès</span>
<p class="text-slate-300 text-sm leading-relaxed">{{ session.access|default('Aucune information') }}</p>
</div>
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700/50 flex justify-between items-center">
<span class="text-slate-400 text-xs uppercase tracking-wider font-bold">Distance Prise élec.</span>
<span class="text-white font-bold">{{ session.distancePower|default(0) }} m</span>
</div>
</div>
{% if session.deliveryDistance is not null %}
<div class="mt-6 border-t border-slate-700/50 pt-6">
<h4 class="text-white font-bold text-sm mb-4">Détails Livraison</h4>
<div class="bg-slate-900/50 rounded-xl border border-slate-700/50 overflow-hidden mb-4">
{# Map #}
{% if session.deliveryGeometry %}
<div class="h-48 w-full relative z-0">
<leaflet-map class="absolute inset-0 w-full h-full"
data-geometry="{{ session.deliveryGeometry|json_encode|e('html_attr') }}">
</leaflet-map>
</div>
{% endif %}
{# Details #}
<div class="p-4 space-y-2 text-xs">
<div class="flex justify-between">
<span class="text-slate-400">Distance réelle (Aller)</span>
<span class="text-white font-bold">{{ session.deliveryDistance|number_format(1, ',', ' ') }} km</span>
</div>
<div class="flex justify-between">
<span class="text-slate-400">Franchise</span>
<span class="text-emerald-400 font-bold">- 10.0 km</span>
</div>
<div class="flex justify-between border-t border-slate-700 pt-2">
<span class="text-slate-400">Distance facturée</span>
<span class="text-white font-bold">{{ max(0, session.deliveryDistance - 10)|number_format(1, ',', ' ') }} km</span>
</div>
<div class="flex justify-between">
<span class="text-slate-400">Trajets</span>
<span class="text-white font-bold">4 (2 A/R)</span>
</div>
<div class="mt-2 p-2 bg-indigo-500/10 border border-indigo-500/20 rounded-lg text-center">
<code class="text-[10px] text-indigo-300 font-mono">
({{ session.deliveryDistance|number_format(1) }} - 10) x 4 x 0.50€ = {{ session.deliveryPrice|number_format(2) }}€
</code>
</div>
</div>
</div>
</div>
{% endif %}
<div class="mt-6 pt-6 border-t border-slate-700/50">
<h4 class="text-white font-bold text-sm mb-4">Gestion Livraison</h4>
<form action="{{ path('app_crm_flow_update', {id: session.id}) }}" method="post" class="space-y-4">
<div class="grid grid-cols-2 gap-4">
<div>
<label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Distance (km)</label>
<input type="number" step="0.1" name="deliveryDistance" value="{{ session.deliveryDistance }}"
class="w-full bg-slate-900/50 border border-slate-700 rounded-lg px-3 py-2 text-white text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-all">
</div>
<div>
<label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Prix Livraison (€)</label>
<input type="number" step="0.01" name="deliveryPrice" value="{{ session.deliveryPrice }}"
class="w-full bg-slate-900/50 border border-slate-700 rounded-lg px-3 py-2 text-white text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-all">
</div>
</div>
<button type="submit" class="w-full py-2 bg-blue-600 hover:bg-blue-500 text-white text-xs font-bold uppercase tracking-widest rounded-lg transition-all">
Mettre à jour
</button>
</form>
</div>
</div>
</div>
{# CART CONTENT #}
<div class="bg-slate-800/40 backdrop-blur-xl border border-slate-700/50 rounded-[2rem] p-8">
<h3 class="text-lg font-bold text-white mb-6 flex items-center gap-3">
<div class="p-2 bg-emerald-500/10 rounded-lg text-emerald-500">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path></svg>
</div>
Contenu de la demande
</h3>
{% if session.products['start'] is defined and session.products['end'] is defined %}
<div class="flex items-center gap-4 mb-8 p-4 bg-slate-900/50 rounded-xl border border-slate-700/50 w-fit">
<div class="flex items-center gap-2">
<span class="text-slate-400 text-xs font-bold uppercase">Du</span>
<span class="text-white font-bold">{{ session.products['start']|date('d/m/Y') }}</span>
</div>
<span class="text-slate-600">➔</span>
<div class="flex items-center gap-2">
<span class="text-slate-400 text-xs font-bold uppercase">Au</span>
<span class="text-white font-bold">{{ session.products['end']|date('d/m/Y') }}</span>
</div>
</div>
{% endif %}
<div class="space-y-4">
{% if session.products['ids'] is defined %}
{% for productId in session.products['ids'] %}
{% set product = loadProductById(productId) %}
{% if product %}
<div class="flex items-center gap-4 p-4 bg-slate-900/50 rounded-xl border border-slate-700/50">
{% if product.image %}
<img src="{{ product.image }}" alt="{{ product.name }}" class="w-12 h-12 rounded-lg object-cover bg-slate-800">
{% else %}
<div class="w-12 h-12 rounded-lg bg-slate-800 flex items-center justify-center text-slate-500">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
</div>
{% endif %}
<div>
<p class="text-white font-bold">{{ product.name }}</p>
<span class="text-xs text-slate-500">Réf: #{{ productId }}</span>
<div class="mt-1 text-xs text-slate-400">
<span class="block">1er jour : {{ product.price1day|number_format(2, ',', ' ') }} €</span>
{% if product.priceSup > 0 %}
<span class="block">Jours supp : {{ product.priceSup|number_format(2, ',', ' ') }} €</span>
{% endif %}
</div>
</div>
</div>
{# LINKED OPTIONS #}
{% if session.products.options[productId] is defined and session.products.options[productId]|length > 0 %}
<div class="mt-2 ml-16 space-y-1">
{% for optionId in session.products.options[productId] %}
{% set option = loadOptionById(optionId) %}
{% if option %}
<div class="flex items-center gap-2 text-xs text-slate-400">
<span class="bg-indigo-500/10 text-indigo-400 px-1.5 py-0.5 rounded text-[10px] font-bold uppercase border border-indigo-500/20">Option</span>
<span>{{ option.name }}</span>
<span class="font-bold text-slate-300">+ {{ option.price|number_format(2, ',', ' ') }} €</span>
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% else %}
<div class="flex items-center justify-between p-4 bg-slate-900/50 rounded-xl border border-slate-700/50">
<span class="text-slate-400 italic">Produit introuvable (ID #{{ productId }})</span>
</div>
{% endif %}
{% endfor %}
{% else %}
<p class="text-slate-500 italic">Aucun produit.</p>
{% endif %}
{# ORPHAN OPTIONS #}
{% if session.options is defined %}
{% set hasOrphans = false %}
{% for prodId, opts in session.options %}
{% if prodId not in session.products['ids']|default([]) %}
{% set hasOrphans = true %}
{% endif %}
{% endfor %}
{% if hasOrphans %}
<div class="mt-6 pt-6 border-t border-slate-700/50">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-3 block">Options supplémentaires</span>
{% for prodId, opts in session.options %}
{% if prodId not in session.products['ids']|default([]) %}
{% for optionId in opts %}
{% set option = loadOptionById(optionId) %}
{% if option %}
<div class="flex items-center gap-3 p-3 bg-slate-900/30 rounded-xl border border-slate-700/30 mb-2">
<div class="h-8 w-8 bg-indigo-500/10 rounded-lg flex items-center justify-center text-indigo-500 border border-indigo-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" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
</div>
<span class="text-sm font-medium text-slate-300">{{ option.name }}</span>
<span class="ml-auto text-sm font-bold text-white">{{ option.price|number_format(2, ',', ' ') }} € HT</span>
</div>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endif %}
</div>
{% if session.details %}
<div class="mt-8">
<span class="text-[10px] font-bold text-slate-400 uppercase tracking-[0.2em] mb-2 block">Notes client</span>
<div class="p-4 bg-amber-500/10 border border-amber-500/20 rounded-xl text-amber-200 text-sm leading-relaxed">
{{ session.details }}
</div>
</div>
{% endif %}
{# TOTAL #}
{% set totalData = totalSession(session) %}
<div class="mt-8 pt-6 border-t border-slate-700">
<div class="flex flex-col gap-2 items-end">
<div class="text-sm text-slate-400">
Durée : <span class="text-white font-bold">{{ totalData.duration }} jour{{ totalData.duration > 1 ? 's' : '' }}</span>
</div>
<div class="text-xl text-white">
Total HT : <span class="font-black">{{ totalData.ht|number_format(2, ',', ' ') }} €</span>
</div>
{% if totalData.tvaEnabled %}
<div class="text-sm text-slate-500">
Soit <span class="font-bold text-slate-300">{{ (totalData.ht * 1.20)|number_format(2, ',', ' ') }} € TTC</span> (TVA 20%)
</div>
{% endif %}
</div>
</div> </div>
{# BILLING INFO #}
<div class="bg-slate-800/40 backdrop-blur-xl border border-slate-700/50 rounded-[2rem] p-8">
<h3 class="text-lg font-bold text-white mb-6 flex items-center gap-3">
<div class="p-2 bg-indigo-500/10 rounded-lg text-indigo-500">
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
</div>
Facturation
</h3>
<div class="p-4 bg-slate-900/50 rounded-xl border border-slate-700/50">
<p class="text-white font-medium">{{ session.billingAddress|default('Même que livraison') }}</p>
<p class="text-blue-400 font-bold mt-1">{{ session.billingZipCode }} {{ session.billingTown }}</p>
</div>
<div class="mt-6 pt-6 border-t border-slate-700/50">
<form action="{{ path('app_crm_flow_update', {id: session.id}) }}" method="post" class="flex items-end gap-4">
<div class="flex-1">
<label class="block text-[10px] font-bold text-slate-400 uppercase tracking-widest mb-1">Mode de paiement</label>
<select name="typePaiement" class="w-full bg-slate-900/50 border border-slate-700 rounded-lg px-3 py-2 text-white text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-all">
<option value="">Sélectionner...</option>
{% for type in ['Paiement Via Chorus', 'Paiement En ligne', 'Paiement Après événement', 'Autre mode de paiement'] %}
<option value="{{ type }}" {% if session.typePaiement == type %}selected{% endif %}>{{ type }}</option>
{% endfor %}
</select>
</div>
<button type="submit" class="py-2 px-4 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold uppercase tracking-widest rounded-lg transition-all h-[38px]">
Enregistrer
</button>
</form>
</div>
</div>
</div>
{% endblock %}
Reference in New Issue View Git Blame Copy Permalink