✨ feat(flow/view): Ajoute et style le formulaire de configuration de facturation et livraison.
This commit is contained in:
Serreau Jovann
@@ -3,81 +3,82 @@
|
||||
{% 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=""/>
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
|
||||
crossorigin=""></script>
|
||||
|
||||
<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>
|
||||
{% set isActionable = session.deliveryPrice is not null and session.typePaiement %}
|
||||
<div class="flex items-center gap-3 justify-end">
|
||||
<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 {{ not isActionable ? 'opacity-50 pointer-events-none cursor-not-allowed' : '' }}">
|
||||
<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 {{ not isActionable ? 'opacity-50 pointer-events-none cursor-not-allowed' : '' }}">
|
||||
<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>
|
||||
|
||||
<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>
|
||||
{# BILLING & DELIVERY CONFIG #}
|
||||
<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>
|
||||
Configuration Facturation & Livraison
|
||||
</h3>
|
||||
<form action="{{ path('app_crm_flow_update', {id: session.id}) }}" method="post" class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button type="submit" class="py-2 px-6 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold uppercase tracking-widest rounded-lg transition-all">
|
||||
Enregistrer les modifications
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
||||
@@ -344,37 +345,6 @@
|
||||
<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="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 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>
|
||||
<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>
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button type="submit" class="py-2 px-6 bg-indigo-600 hover:bg-indigo-500 text-white text-xs font-bold uppercase tracking-widest rounded-lg transition-all">
|
||||
Enregistrer les modifications
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user