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.
```
156 lines
10 KiB
Twig
156 lines
10 KiB
Twig
{% extends 'dashboard/base.twig' %}
|
|
|
|
{% block title %}Catalogue Formules{% endblock %}
|
|
{% block title_header %}Gestion des <span class="text-blue-500 italic">Formules</span>{% endblock %}
|
|
|
|
{% block actions %}
|
|
<div class="flex items-center space-x-3">
|
|
{# Bouton Nouvelle Formule avec animation au survol #}
|
|
<a data-turbo="false" href="{{ path('app_crm_formules_add', {type: 'pack'}) }}"
|
|
class="flex items-center space-x-2 px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white text-[10px] font-black uppercase tracking-[0.2em] rounded-xl transition-all shadow-lg shadow-blue-600/20 group hover:-translate-y-0.5 active:translate-y-0">
|
|
<svg class="w-4 h-4 transform group-hover:rotate-90 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
<span>Nouvelle Formule</span>
|
|
</a>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="backdrop-blur-xl bg-[#1e293b]/40 border border-white/5 rounded-[2.5rem] overflow-hidden shadow-2xl animate-in fade-in duration-700">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="border-b border-white/5 bg-black/20">
|
|
<th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em]">Visuel</th>
|
|
<th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em]">Désignation</th>
|
|
<th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em]">Type</th>
|
|
<th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em]">Statut</th>
|
|
<th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em] text-center">Tarif</th>
|
|
<th class="px-6 py-5 text-[10px] font-black text-slate-300 uppercase tracking-[0.2em] text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-white/5">
|
|
{% for formule in formules %}
|
|
<tr class="group hover:bg-white/[0.02] transition-colors">
|
|
{# VISUEL #}
|
|
<td class="px-6 py-4">
|
|
<div class="h-14 w-14 rounded-2xl overflow-hidden border border-white/10 bg-slate-900 flex-shrink-0 shadow-inner group-hover:border-blue-500/30 transition-all">
|
|
{% if formule.imageName %}
|
|
<img src="{{ vich_uploader_asset(formule, 'imageFile') }}" class="h-full w-full object-cover">
|
|
{% else %}
|
|
<div class="h-full w-full flex items-center justify-center bg-slate-800 text-slate-600">
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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" /></svg>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
|
|
{# NOM & REF #}
|
|
<td class="px-6 py-4">
|
|
<div class="flex flex-col">
|
|
<span class="text-sm font-bold text-white group-hover:text-blue-400 transition-colors capitalize tracking-tight">
|
|
{{ formule.name }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
|
|
{# TYPE #}
|
|
<td class="px-6 py-4">
|
|
<span class="text-[10px] font-black uppercase tracking-tighter {{ formule.type == 'pack' ? 'text-blue-400' : 'text-purple-400' }}">
|
|
{{ formule.type }}
|
|
</span>
|
|
</td>
|
|
|
|
{# STATUT #}
|
|
<td class="px-6 py-4">
|
|
{% if formule.isPublish %}
|
|
<span 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-black uppercase tracking-widest italic">
|
|
<span class="w-1.5 h-1.5 bg-emerald-400 rounded-full animate-pulse"></span>
|
|
En ligne
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-slate-500/10 border border-white/5text-slate-300 text-[9px] font-black uppercase tracking-widest italic">
|
|
Brouillon
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
{# TARIF #}
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center justify-center space-x-2">
|
|
{# 1 JOUR #}
|
|
<div class="flex flex-col items-center px-3 py-1.5 rounded-xl bg-white/5 border border-white/5 group-hover:border-blue-500/20 transition-all">
|
|
<span class="text-[8px] font-black text-slate-300 uppercase tracking-tighter">1J</span>
|
|
<span class="text-xs font-black text-white italic">{{ formule.price1j|default('0') }}€</span>
|
|
</div>
|
|
|
|
{# 2 JOURS #}
|
|
<div class="flex flex-col items-center px-3 py-1.5 rounded-xl bg-white/5 border border-white/5 group-hover:border-blue-500/20 transition-all">
|
|
<span class="text-[8px] font-black text-slate-300 uppercase tracking-tighter">2J</span>
|
|
<span class="text-xs font-black text-blue-400 italic">{{ formule.price2j|default('0') }}€</span>
|
|
</div>
|
|
|
|
{# 5 JOURS #}
|
|
<div class="flex flex-col items-center px-3 py-1.5 rounded-xl bg-emerald-500/5 border border-emerald-500/10 group-hover:border-emerald-500/30 transition-all">
|
|
<span class="text-[8px] font-black text-emerald-500/50 uppercase tracking-tighter">5J</span>
|
|
<span class="text-xs font-black text-emerald-400 italic">{{ formule.price5j|default('0') }}€</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
{# ACTIONS #}
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end space-x-2">
|
|
<a data-turbo="false" href="{{ path('app_crm_formules_view', {id: formule.id}) }}" class="p-2.5 bg-blue-600/10 hover:bg-blue-600 text-blue-500 hover:text-white rounded-xl transition-all border border-blue-500/20 shadow-lg shadow-blue-600/5">
|
|
<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="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
|
|
</a>
|
|
|
|
<a data-turbo="false" href="{{ path('app_crm_formules_delete', {id: formule.id}) }}?_token={{ csrf_token('delete' ~ formule.id) }}"
|
|
data-turbo-method="post"
|
|
data-turbo-confirm="Supprimer la formule '{{ formule.name }}' ?"
|
|
class="p-2.5 bg-rose-500/10 hover:bg-rose-500 text-rose-500 hover:text-white rounded-xl transition-all border border-rose-500/20 shadow-lg shadow-rose-500/5">
|
|
<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>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="6" class="py-32 text-center">
|
|
<div class="flex flex-col items-center justify-center space-y-4">
|
|
<div class="w-16 h-16 bg-white/5 rounded-full flex items-center justify-center border border-white/10">
|
|
<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="1" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
|
|
</div>
|
|
<p class="text-slate-500 italic uppercase tracking-[0.3em] text-[10px] font-black">Aucune formule dans le catalogue</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{# PAGINATION #}
|
|
{% if formules.getTotalItemCount is defined and formules.getTotalItemCount > formules.getItemNumberPerPage %}
|
|
<div class="mt-8 flex justify-center custom-pagination">
|
|
{{ knp_pagination_render(formules) }}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<style>
|
|
.custom-pagination nav ul { @apply flex space-x-2; }
|
|
.custom-pagination nav ul li span,
|
|
.custom-pagination nav ul li a {
|
|
@apply px-4 py-2 rounded-xl bg-[#1e293b]/40 backdrop-blur-md border border-white/5 text-slate-400 text-xs font-bold transition-all;
|
|
}
|
|
.custom-pagination nav ul li.active span {
|
|
@apply bg-blue-600 border-blue-500 text-white shadow-lg shadow-blue-600/20;
|
|
}
|
|
.custom-pagination nav ul li a:hover {
|
|
@apply bg-white/10 text-white border-white/20;
|
|
}
|
|
</style>
|
|
{% endblock %}
|