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.
```
146 lines
12 KiB
Twig
146 lines
12 KiB
Twig
{% extends 'dashboard/base.twig' %}
|
|
|
|
{% block title %}Administrateurs{% endblock %}
|
|
|
|
{% block actions %}
|
|
<a data-turbo="false" href="{{ path('app_crm_administrateur_add') }}"
|
|
class="inline-flex items-center px-4 py-2 text-sm font-black uppercase tracking-widest text-white bg-indigo-600 rounded-xl hover:bg-indigo-700 shadow-lg shadow-indigo-500/20 transition-all active:scale-95">
|
|
<svg class="w-5 h-5 mr-2" 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"></path>
|
|
</svg>
|
|
Ajouter un Administrateur
|
|
</a>
|
|
{% endblock %}
|
|
|
|
{% block body %}
|
|
<div class="p-4 md:p-6 bg-gray-50 dark:bg-gray-900 min-h-screen w-full">
|
|
{# Container élargi à 100% pour une visibilité totale #}
|
|
<div class="w-full">
|
|
|
|
{# HEADER #}
|
|
<div class="flex justify-between items-center mb-8">
|
|
<div>
|
|
<h1 class="text-3xl font-black text-gray-800 dark:text-white tracking-tight">Liste des Administrateurs</h1>
|
|
<p class="text-sm text-gray-500 dark:text-gray-200 font-medium mt-1">Gestion des accès et des niveaux d'accréditation système.</p>
|
|
</div>
|
|
<div class="flex items-center space-x-3">
|
|
<span class="px-4 py-2 text-xs font-black text-indigo-600 bg-indigo-100 rounded-full dark:bg-indigo-900/40 dark:text-indigo-300 uppercase tracking-widest shadow-sm border border-indigo-200 dark:border-indigo-800">
|
|
{{ admins|length }} Administrateurs
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{# TABLE CARD #}
|
|
<div class="bg-white dark:bg-[#1e293b] shadow-sm rounded-3xl border border-gray-200 dark:border-gray-800 overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-200">
|
|
<thead class="text-[10px] text-gray-200 uppercase bg-gray-50/50 dark:bg-gray-900/50 dark:text-gray-500 border-b border-gray-100 dark:border-gray-800">
|
|
<tr>
|
|
<th scope="col" class="px-8 py-5 font-black tracking-widest">Identité de l'Administrateur</th>
|
|
<th scope="col" class="px-8 py-5 font-black tracking-widest">Rôles & Habilitations</th>
|
|
<th scope="col" class="px-8 py-5 font-black tracking-widest">Statut du compte</th>
|
|
<th scope="col" class="px-8 py-5 font-black tracking-widest text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100 dark:divide-gray-800">
|
|
{% for admin in admins %}
|
|
<tr class="bg-white dark:bg-[#1e293b] hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors group">
|
|
{# COLONNE 1 : IDENTITÉ #}
|
|
<td class="px-8 py-5">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="h-11 w-11 rounded-2xl bg-slate-100 dark:bg-slate-800 flex items-center justify-center text-slate-300 dark:text-slate-400 font-black text-xs border border-slate-200 dark:border-slate-700 shadow-sm transition-transform group-hover:scale-110">
|
|
{{ admin.firstName|first|upper }}{{ admin.name|first|upper }}
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<span class="font-bold text-slate-900 dark:text-white text-base">{{ admin.firstName }} {{ admin.name }}</span>
|
|
<span class="text-xs text-slate-400 font-medium tracking-tight font-mono">{{ admin.email }}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
{# COLONNE 2 : RÔLES #}
|
|
<td class="px-8 py-5">
|
|
<div class="flex flex-wrap gap-1.5">
|
|
{% for role in admin.roles %}
|
|
{% if role != 'ROLE_USER' %}
|
|
{% if role == 'ROLE_ROOT' %}
|
|
<span class="px-2 py-0.5 bg-red-500 text-white text-[9px] font-black uppercase rounded shadow-sm">ROOT</span>
|
|
{% elseif role == 'ROLE_CLIENT_MAIN' %}
|
|
<span class="px-2 py-0.5 bg-indigo-600 text-white text-[9px] font-black uppercase rounded shadow-sm">CLIENT PRINCIPAL</span>
|
|
{% elseif role == 'ROLE_ADMIN' %}
|
|
<span class="px-2 py-0.5 bg-slate-100 dark:bg-slate-800 text-slate-300 dark:text-slate-400 text-[9px] font-black uppercase rounded border border-slate-200 dark:border-slate-700">ADMIN</span>
|
|
{% else %}
|
|
<span class="px-2 py-0.5 bg-emerald-100 dark:bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 text-[9px] font-bold uppercase rounded border border-emerald-200 dark:border-emerald-500/20">
|
|
{{ role|replace({'ROLE_ADMIN_': ''}) }}
|
|
</span>
|
|
{% endif %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
</div>
|
|
</td>
|
|
|
|
{# COLONNE 3 : STATUT COULEUR (Vert/Ambre) #}
|
|
<td class="px-8 py-5 whitespace-nowrap">
|
|
{% if admin.actif %}
|
|
<span class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20 shadow-sm">
|
|
<span class="w-2 h-2 mr-2 bg-emerald-500 rounded-full animate-pulse"></span>
|
|
Accès Actif
|
|
</span>
|
|
{% else %}
|
|
<span class="inline-flex items-center px-3 py-1.5 rounded-xl text-[10px] font-black uppercase tracking-widest bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20 shadow-sm">
|
|
<span class="w-2 h-2 mr-2 bg-amber-500 rounded-full"></span>
|
|
Accès Suspendu
|
|
</span>
|
|
{% endif %}
|
|
</td>
|
|
|
|
{# COLONNE 4 : ACTIONS #}
|
|
<td class="px-8 py-5 text-right whitespace-nowrap">
|
|
<div class="flex items-center justify-end space-x-3">
|
|
{# Bouton Gérer #}
|
|
<a data-turbo="false" href="{{ path('app_crm_administrateur_view', {id: admin.id}) }}"
|
|
class="flex items-center space-x-2 px-3 py-2 bg-slate-50 dark:bg-slate-800 text-slate-600 dark:text-slate-300 hover:bg-indigo-600 hover:text-white dark:hover:bg-indigo-600 dark:hover:text-white rounded-xl transition-all border border-slate-200 dark:border-slate-700 font-bold text-xs shadow-sm"
|
|
title="Paramètres de l'Administrateur">
|
|
<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"></path></svg>
|
|
<span>Gérer</span>
|
|
</a>
|
|
|
|
{# Bouton Supprimer avec protection ROOT/CLIENT_MAIN #}
|
|
{% if 'ROLE_ROOT' not in admin.roles %}
|
|
<a data-turbo="false" href="{{ path('app_crm_administrateur_delete', {id: admin.id}) }}?_token={{ csrf_token('delete' ~ admin.id) }}"
|
|
data-turbo-method="post"
|
|
data-turbo-confirm="Confirmer la suppression définitive de l'Administrateur {{ admin.firstName }} {{ admin.name }} ?"
|
|
class="p-2.5 text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 rounded-xl transition-all border border-transparent hover:border-red-100 dark:hover:border-red-500/20"
|
|
title="Supprimer l'accès">
|
|
<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"></path></svg>
|
|
</a>
|
|
{% else %}
|
|
<div class="p-2.5 text-slate-200 dark:text-slate-700 bg-slate-50/50 dark:bg-slate-900/50 rounded-xl border border-slate-100 dark:border-slate-800 cursor-help"
|
|
title="Protection Système : Suppression impossible pour ce rang Administrateur">
|
|
<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="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% else %}
|
|
<tr>
|
|
<td colspan="4" class="px-8 py-24 text-center">
|
|
<div class="flex flex-col items-center">
|
|
<div class="w-20 h-20 bg-slate-50 dark:bg-slate-900/50 rounded-3xl flex items-center justify-center text-slate-200 dark:text-slate-800 mb-6">
|
|
<svg class="w-10 h-10" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path></svg>
|
|
</div>
|
|
<p class="text-slate-400 font-bold text-lg">Aucun Administrateur enregistré</p>
|
|
<p class="text-slate-400/60 text-sm mt-1">Commencez par en ajouter un via le bouton en haut à droite.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|