ludikevent_crm/templates/dashboard/home.twig

{% extends 'dashboard/base.twig' %}

{% block title %}Tableau de bord{% endblock %}

{% block body %}
    <div class="min-h-screen p-4 md:p-8 space-y-10">

        {# --- HEADER STATS (GLASS PILLS) --- #}
        <div class="flex flex-wrap gap-4 items-center mb-8">
            <div class="flex flex-col md:flex-row md:items-center gap-4 w-full md:w-auto">
                <div class="flex items-center gap-2 px-2">
                    <h1 class="text-xl font-black italic text-slate-900 dark:text-white uppercase tracking-tighter">
                        Analytics
                    </h1>
                    <a href="{{ statview }}" target="_blank" class="group flex items-center gap-2 bg-slate-900/5 dark:bg-white/5 px-4 py-2 rounded-xl border border-slate-200/50 dark:border-white/10 hover:bg-blue-600 transition-all duration-300">
                        <span class="text-[10px] font-bold text-slate-500 group-hover:text-white transition-colors uppercase tracking-widest">
                            reservation.ludikevent.fr
                        </span>
                        <svg class="w-3 h-3 text-slate-400 group-hover:text-white transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
                        </svg>
                    </a>
                </div>

                <div class="flex gap-3">
                    <div class="backdrop-blur-md bg-white/40 dark:bg-slate-900/20 border border-white/40 dark:border-white/10 px-6 py-2.5 rounded-full shadow-lg flex items-center gap-3">
                        <div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
                        <span class="text-[11px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-300">
                            <span class="text-slate-900 dark:text-white text-sm">{{ nbVisitor }}</span> Visiteurs <span class="hidden md:inline text-slate-400">(-24h)</span>
                        </span>
                    </div>

                    <div class="backdrop-blur-md bg-white/40 dark:bg-slate-900/20 border border-white/40 dark:border-white/10 px-6 py-2.5 rounded-full shadow-lg flex items-center gap-3">
                        <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                        </svg>
                        <span class="text-[11px] font-black uppercase tracking-widest text-slate-600 dark:text-slate-300">
                            <span class="text-slate-900 dark:text-white text-sm">{{ nbView }}</span> Vues <span class="hidden md:inline text-slate-400">(-24h)</span>
                        </span>
                    </div>
                </div>
            </div>
        </div>

        {# --- GRILLE PRINCIPALE --- #}
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">

            {# Carte Inventaire #}
            <div class="group relative">
                <div class="absolute inset-0 bg-gradient-to-br from-blue-600/20 to-transparent blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                <div class="relative overflow-hidden backdrop-blur-2xl bg-white/30 dark:bg-slate-800/40 border border-white/20 dark:border-white/5 rounded-[3rem] p-8 shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-500 hover:-translate-y-2">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-[10px] font-black text-blue-600 dark:text-blue-400 uppercase tracking-[0.4em] mb-4 italic">Inventaire</p>
                            <h2 class="text-7xl font-black text-slate-900 dark:text-white tracking-tighter italic leading-none">{{ product }}</h2>
                            <p class="text-[11px] font-bold text-slate-500 dark:text-slate-400 mt-4 uppercase tracking-wider">Produits actifs en ligne</p>
                        </div>
                        <div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-blue-700 rounded-2xl flex items-center justify-center text-white shadow-[0_10px_20px_rgba(59,130,246,0.3)]">
                            <svg class="w-7 h-7" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" /></svg>
                        </div>
                    </div>
                </div>
            </div>

            {# Carte Devis #}
            <div class="group relative">
                <div class="absolute inset-0 bg-gradient-to-br from-amber-600/20 to-transparent blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                <div class="relative overflow-hidden backdrop-blur-2xl bg-white/30 dark:bg-slate-800/40 border border-white/20 dark:border-white/5 rounded-[3rem] p-8 shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-500 hover:-translate-y-2">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-[10px] font-black text-amber-600 dark:text-amber-400 uppercase tracking-[0.4em] mb-4 italic">En attente</p>
                            <h2 class="text-7xl font-black text-slate-900 dark:text-white tracking-tighter italic leading-none">{{ devis_wait_sign }}</h2>
                            <p class="text-[11px] font-bold text-slate-500 dark:text-slate-400 mt-4 uppercase tracking-wider">Devis à faire signer</p>
                        </div>
                        <div class="w-14 h-14 bg-gradient-to-br from-amber-500 to-orange-600 rounded-2xl flex items-center justify-center text-white shadow-[0_10px_20px_rgba(245,158,11,0.3)]">
                            <svg class="w-7 h-7" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>
                        </div>
                    </div>
                </div>
            </div>

            {# Carte Journal de Maintenance #}
            <div class="group relative md:row-span-1">
                <div class="absolute inset-0 bg-gradient-to-br from-purple-600/20 to-transparent blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                <div class="relative h-full overflow-hidden backdrop-blur-2xl bg-white/30 dark:bg-slate-800/40 border border-white/20 dark:border-white/5 rounded-[3rem] p-8 shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-500 hover:-translate-y-2">
                    <p class="text-[10px] font-black text-purple-600 dark:text-purple-400 uppercase tracking-[0.4em] mb-6 italic">Maintenance</p>

                    <div class="space-y-6">
                        {% for update in updates %}
                            <div class="relative pl-6 border-l-2 border-slate-200 dark:border-slate-700 pb-1">
                                {# Point sur la timeline #}
                                <div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full border-4 border-white dark:border-slate-800 {{ update.tag_color|replace({'text-': 'bg-'})|split(' ')[0] }}"></div>

                                <div class="flex items-center gap-2 mb-1">
                                    <span class="px-2 py-0.5 rounded-md border text-[8px] font-black uppercase tracking-tighter {{ update.tag_color }}">
                                        {{ update.type }}
                                    </span>
                                    <span class="text-[9px] font-bold text-slate-400 uppercase">{{ update.date|date('d/m/y') }}</span>
                                </div>
                                <p class="text-[11px] font-semibold text-slate-700 dark:text-slate-200 leading-tight">
                                    {{ update.message }}
                                </p>
                            </div>
                        {% else %}
                            <p class="text-xs text-slate-400 italic">Aucune mise à jour disponible.</p>
                        {% endfor %}
                    </div>
                </div>
            </div>

            {# Carte Clients (Déplacée en bas ou sur le côté selon ton envie de grille) #}
            <div class="group relative md:col-span-2">
                <div class="absolute inset-0 bg-gradient-to-br from-emerald-600/20 to-transparent blur-3xl opacity-0 group-hover:opacity-100 transition-opacity duration-500"></div>
                <div class="relative overflow-hidden backdrop-blur-2xl bg-white/30 dark:bg-slate-800/40 border border-white/20 dark:border-white/5 rounded-[3rem] p-8 shadow-[0_20px_50px_rgba(0,0,0,0.1)] transition-all duration-500 hover:-translate-y-2">
                    <div class="flex items-center justify-between">
                        <div>
                            <p class="text-[10px] font-black text-emerald-600 dark:text-emerald-400 uppercase tracking-[0.4em] mb-4 italic">Client(s)</p>
                            <h2 class="text-7xl font-black text-slate-900 dark:text-white tracking-tighter italic leading-none">{{ customers }}</h2>
                            <p class="text-[11px] font-bold text-slate-500 dark:text-slate-400 mt-4 uppercase tracking-wider">Fiches clients uniques dans la base</p>
                        </div>
                        <div class="w-14 h-14 bg-gradient-to-br from-emerald-500 to-teal-600 rounded-2xl flex items-center justify-center text-white shadow-[0_10px_20px_rgba(16,185,129,0.3)]">
                            <svg class="w-7 h-7" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" /></svg>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
{% endblock %}