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.
```
232 lines
16 KiB
Twig
232 lines
16 KiB
Twig
{% extends 'dashboard/base.twig' %}
|
|
|
|
{% block title %}Création Devis{% endblock %}
|
|
{% block title_header %}Nouveau <span class="text-blue-500">Devis</span>{% endblock %}
|
|
|
|
{% block actions %}
|
|
<a data-turbo="false" href="{{ path('app_crm_devis') }}" class="flex items-center px-4 py-2 text-[10px] font-black text-slate-400 hover:text-white uppercase tracking-widest transition-all group">
|
|
<svg class="w-4 h-4 mr-2 transform group-hover:-translate-x-1 transition-transform" 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>
|
|
Annuler
|
|
</a>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="w-full animate-in fade-in zoom-in-95 duration-500">
|
|
|
|
{{ form_start(form,{attr:{'data-turbo':'false'}}) }}
|
|
|
|
<div class="backdrop-blur-xl bg-[#1e293b]/40 border border-white/5 rounded-[3rem] p-10 shadow-2xl relative overflow-hidden w-full">
|
|
|
|
{# Décoration de fond #}
|
|
<div class="absolute top-0 right-0 -mr-16 -mt-16 w-96 h-96 bg-blue-600/5 rounded-full blur-3xl pointer-events-none"></div>
|
|
|
|
{# Header #}
|
|
<div class="relative mb-12">
|
|
<div class="flex items-center space-x-6">
|
|
<div class="flex items-center justify-center w-12 h-12 rounded-2xl bg-blue-600 shadow-lg shadow-blue-600/30 text-white">
|
|
<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="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-2xl font-black text-white tracking-tight">Création d'un devis</h3>
|
|
<p class="text-[9px] text-slate-300 uppercase tracking-[0.3em] font-bold mt-1">Configuration des informations d'entête</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="relative space-y-10">
|
|
{# SECTION ENTÊTE #}
|
|
{% set input_class = "w-full bg-slate-900/60 border border-white/10 rounded-2xl px-5 py-4 text-sm text-white outline-none focus:border-blue-500/50 focus:bg-slate-900/90 transition-all duration-300" %}
|
|
{% set label_class = "block text-[10px] font-black text-slate-300 uppercase tracking-[0.2em] mb-3 ml-2" %}
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-start">
|
|
<div class="space-y-3">
|
|
{{ form_label(form.num, null, {'label_attr': {'class': label_class}}) }}
|
|
{{ form_widget(form.num, {'attr': {'class': input_class}}) }}
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
{{ form_label(form.createA, null, {'label_attr': {'class': label_class}}) }}
|
|
{{ form_widget(form.createA, {'attr': {'class': input_class}}) }}
|
|
</div>
|
|
|
|
<div class="space-y-3" is="devis-manager">
|
|
{{ form_label(form.customer, null, {'label_attr': {'class': label_class}}) }}
|
|
{{ form_widget(form.customer, {'attr': {'class': input_class}}) }}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{# SECTION ADRESSES #}
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="space-y-3">
|
|
<label for="billAddress" class="{{ label_class }}">Adresse de facturation</label>
|
|
<select id="billAddress" name="devis[bill_address]" class="{{ input_class }}">
|
|
{% if billAddress is defined %}
|
|
{% for key,shipAdd in billAddress %}
|
|
<option {% if key == devis.billAddress.id%}selected{% endif%} value="{{ key }}">{{ shipAdd }}</option>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</select>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<label for="shipAddress" class="{{ label_class }}">Adresse de livraison</label>
|
|
<select id="shipAddress" name="devis[ship_address]" class="{{ input_class }}">
|
|
{% if shipAddress is defined %}
|
|
{% for key,shipAdd in shipAddress %}
|
|
<option {% if key == devis.addressShip.id%}selected{% endif%} value="{{ key }}">{{ shipAdd }}</option>
|
|
{% endfor %}
|
|
{% endif %}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
{# SECTION ADRESSES #}
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
<div class="space-y-3">
|
|
{{ form_label(form.startAt, null, {'label_attr': {'class': label_class}}) }}
|
|
{{ form_widget(form.startAt, {'attr': {'class': input_class}}) }}
|
|
</div>
|
|
<div class="space-y-3">
|
|
{{ form_label(form.endAt, null, {'label_attr': {'class': label_class}}) }}
|
|
{{ form_widget(form.endAt, {'attr': {'class': input_class}}) }}
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="border-white/5">
|
|
|
|
{# SECTION REPEATER #}
|
|
<div class="form-repeater" data-component="repeater" is="repeat-line">
|
|
<div class="flex items-center justify-between mb-6 px-4">
|
|
<h4 class="text-sm font-black text-white uppercase tracking-widest">Détail des prestations</h4>
|
|
</div>
|
|
|
|
<ol class="form-repeater__rows space-y-4" data-ref="rows">
|
|
{% for key,line in lines %}
|
|
<li class="form-repeater__row group animate-in slide-in-from-right-5 duration-300">
|
|
<fieldset class="backdrop-blur-md bg-white/5 border border-white/10 rounded-[2.5rem] p-8 hover:border-blue-500/30 transition-all shadow-xl">
|
|
{% if line.id is defined %}
|
|
<input type="hidden" name="lines[{{ key }}][id]" value="{{ line.id }}">
|
|
{% endif %}
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-5 items-end">
|
|
{# 1. PRODUIT #}
|
|
<div class="lg:col-span-5">
|
|
<label class="text-[9px] font-black text-slate-300 uppercase tracking-widest ml-1 mb-2 block">Produit / Prestation</label>
|
|
<div class="relative flex items-center">
|
|
<input type="text" name="lines[{{ key }}][product]" value="{{ line.product }}" required class="w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-purple-500/20 focus:border-purple-500 transition-all py-3 pl-5 pr-12 text-sm">
|
|
|
|
{# BOUTON RECHERCHER #}
|
|
<button is="search-productdevis" type="button" class="absolute right-2 p-2 bg-purple-500/10 hover:bg-purple-500 text-purple-400 hover:text-white rounded-xl transition-all duration-300 group/search" title="Rechercher un produit">
|
|
Rechercher un produit
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{# 3. PRIX HT J1 #}
|
|
<div class="lg:col-span-3">
|
|
<label class="{{ label_class }}">HT J1 (€)</label>
|
|
<input type="number" step="0.01" name="lines[{{ key }}][price_ht]" placeholder="0.00" class="{{ input_class }} text-right font-mono" required value="{{ line.price_ht }}" />
|
|
</div>
|
|
|
|
{# 4. PRIX HT SUP #}
|
|
<div class="lg:col-span-3">
|
|
<label class="{{ label_class }}">HT Sup</label>
|
|
<input type="number" step="0.01" name="lines[{{ key }}][price_sup_ht]" placeholder="0.00" class="{{ input_class }} text-right font-mono" required value="{{ line.price_sup_ht }}" />
|
|
</div>
|
|
|
|
{# 6. SUPPRIMER #}
|
|
<div class="lg:col-span-1 flex justify-center pb-1">
|
|
<button type="button" data-ref="removeButton" class="p-4 bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white rounded-2xl transition-all duration-300 shadow-lg hover:shadow-red-500/20">
|
|
<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="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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
|
|
<div class="mt-6 px-4">
|
|
<button type="button" data-ref="addButton" class="w-full py-4 border-2 border-dashed border-white/10 hover:border-purple-500/50 bg-white/5 hover:bg-purple-500/10 rounded-3xl text-purple-400 text-[10px] font-black uppercase tracking-[0.4em] transition-all flex items-center justify-center space-x-3 group">
|
|
<span class="text-xl group-hover:rotate-90 transition-transform duration-300">+</span>
|
|
<span>Ajouter une prestation</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-repeater" data-component="repeater2" is="repeat-line">
|
|
<div class="flex items-center justify-between mb-6 px-4">
|
|
<h4 class="text-sm font-black text-white uppercase tracking-widest">Détail des options</h4>
|
|
</div>
|
|
<ol class="form-repeater__rows space-y-4" data-ref="rows">
|
|
{% for key,option in options %}
|
|
<li class="form-repeater__row group animate-in slide-in-from-right-5 duration-300">
|
|
<fieldset class="backdrop-blur-md bg-white/5 border border-white/10 rounded-[2.5rem] p-8 hover:border-blue-500/30 transition-all shadow-xl">
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-12 gap-5 items-end">
|
|
{% if option.id is defined %}
|
|
<input type="hidden" name="options[{{ key }}][id]" value="{{ option.id }}">
|
|
{% endif %}
|
|
{# 1. PRODUIT #}
|
|
<div class="lg:col-span-7">
|
|
<label class="text-[9px] font-black text-slate-300 uppercase tracking-widest ml-1 mb-2 block">Produit / Prestation</label>
|
|
<div class="relative flex items-center">
|
|
<input type="text" name="options[{{ key }}][product]" value="{{ option.product }}" required class="w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-purple-500/20 focus:border-purple-500 transition-all py-3 pl-5 pr-12 text-sm">
|
|
|
|
{# BOUTON RECHERCHER #}
|
|
<button is="search-optionsdevis" type="button" class="absolute right-2 p-2 bg-purple-500/10 hover:bg-purple-500 text-purple-400 hover:text-white rounded-xl transition-all duration-300 group/search" title="Rechercher un produit">
|
|
Rechercher une option
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="lg:col-span-2">
|
|
<label class="text-[9px] font-black text-slate-300 uppercase tracking-widest ml-1 mb-2 block">Détails</label>
|
|
<div class="relative flex items-center">
|
|
<input type="text" name="options[{{ key }}][details]" value="{{ option.details }}" class="w-full bg-slate-950/50 border-white/5 rounded-2xl text-white focus:ring-purple-500/20 focus:border-purple-500 transition-all py-3 pl-5 pr-12 text-sm">
|
|
</div>
|
|
</div>
|
|
{# 3. PRIX HT J1 #}
|
|
<div class="lg:col-span-2">
|
|
<label class="{{ label_class }}">Prix Ht (€)</label>
|
|
<input type="number" step="0.01" value="{{ option.price_ht }}" name="options[{{ key }}][price_ht]" placeholder="0.00" class="{{ input_class }} text-right font-mono" required />
|
|
</div>
|
|
{# 6. SUPPRIMER #}
|
|
<div class="lg:col-span-1 flex justify-center pb-1">
|
|
<button type="button" data-ref="removeButton" class="p-4 bg-red-500/10 hover:bg-red-500 text-red-500 hover:text-white rounded-2xl transition-all duration-300 shadow-lg hover:shadow-red-500/20">
|
|
<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="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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</li>
|
|
{% endfor %}
|
|
</ol>
|
|
<div class="mt-6 px-4">
|
|
<button type="button" data-ref="addButton" class="w-full py-4 border-2 border-dashed border-white/10 hover:border-purple-500/50 bg-white/5 hover:bg-purple-500/10 rounded-3xl text-purple-400 text-[10px] font-black uppercase tracking-[0.4em] transition-all flex items-center justify-center space-x-3 group">
|
|
<span class="text-xl group-hover:rotate-90 transition-transform duration-300">+</span>
|
|
<span>Ajouter une option</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
{# VALIDATION #}
|
|
<div class="pt-8 px-4">
|
|
<button type="submit" class="w-full py-6 bg-blue-600 hover:bg-blue-500 text-white text-[11px] font-black uppercase tracking-[0.5em] rounded-[2rem] shadow-2xl shadow-blue-600/30 transition-all hover:scale-[1.01] active:scale-95 flex items-center justify-center group">
|
|
<span>Valider et enregistrer le devis</span>
|
|
<svg class="w-5 h-5 ml-4 transform group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7m0 0l-7 7m7-7H3"/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{ form_end(form) }}
|
|
</div>
|
|
{% endblock %}
|