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-white/5 px-4 py-2 rounded-xl border 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" 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/10 border 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-300"><span class="text-white text-sm">{{ nbVisitor }}</span> Visiteurs</span>
                    </div>
                    <div class="backdrop-blur-md bg-white/10 border 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 d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/><path 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-300"><span class="text-white text-sm">{{ nbView }}</span> Vues</span>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            {# --- CARTES BUSINESS --- #}
            {# Inventaire #}
            <div class="group relative">
                <div class="absolute inset-0 bg-blue-600/20 blur-3xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
                <div class="relative overflow-hidden backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[3rem] p-8 transition-all hover:-translate-y-2">
                    <p class="text-[10px] font-black text-blue-400 uppercase tracking-[0.4em] mb-4 italic">Inventaire</p>
                    <h2 class="text-7xl font-black text-white tracking-tighter italic leading-none">{{ product }}</h2>
                    <p class="text-[11px] font-bold text-slate-400 mt-4 uppercase">Produits actifs</p>
                </div>
            </div>

            {# Devis #}
            <div class="group relative">
                <div class="absolute inset-0 bg-amber-600/20 blur-3xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
                <div class="relative overflow-hidden backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[3rem] p-8 transition-all hover:-translate-y-2">
                    <p class="text-[10px] font-black text-amber-400 uppercase tracking-[0.4em] mb-4 italic">Devis</p>
                    <h2 class="text-7xl font-black text-white tracking-tighter italic leading-none">{{ devis_wait_sign }}</h2>
                    <p class="text-[11px] font-bold text-slate-400 mt-4 uppercase">À faire signer</p>
                </div>
            </div>

            {# Clients #}
            <div class="group relative">
                <div class="absolute inset-0 bg-emerald-600/20 blur-3xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
                <div class="relative overflow-hidden backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[3rem] p-8 transition-all hover:-translate-y-2">
                    <p class="text-[10px] font-black text-emerald-400 uppercase tracking-[0.4em] mb-4 italic">Clients</p>
                    <h2 class="text-7xl font-black text-white tracking-tighter italic leading-none">{{ customers }}</h2>
                    <p class="text-[11px] font-bold text-slate-400 mt-4 uppercase">Fiches uniques</p>
                </div>
            </div>

            {# --- SECTION PERFORMANCE (Core Web Vitals) --- #}
            <div class="md:col-span-3 grid grid-cols-1 md:grid-cols-3 gap-6 bg-white/5 p-6 rounded-[2.5rem] border border-white/10 shadow-inner">
                <div class="md:col-span-3 flex items-center gap-4 mb-2 px-4">
                    <span class="h-[1px] flex-1 bg-white/10"></span>
                    <h4 class="text-[10px] font-black text-slate-500 uppercase tracking-[0.3em]">Core Web Vitals (24h)</h4>
                    <span class="h-[1px] flex-1 bg-white/10"></span>
                </div>

                {# LCP #}
                <div class="backdrop-blur-xl bg-slate-900/40 border border-white/5 p-6 rounded-3xl">
                    <p class="text-[9px] font-black text-slate-500 uppercase tracking-widest mb-3">Moyenne LCP</p>
                    <div class="flex items-end gap-3">
                        <span class="text-3xl font-black text-white italic leading-none">{{ avg_lcp|number_format(2) }}s</span>
                        <span class="text-[10px] px-2 py-0.5 rounded {{ avg_lcp < 2.5 ? 'bg-emerald-500/10 text-emerald-400' : 'bg-rose-500/10 text-rose-400' }} font-bold uppercase italic">
                            {{ avg_lcp < 2.5 ? 'Bon' : 'Lent' }}
                        </span>
                    </div>
                </div>

                {# CLS #}
                <div class="backdrop-blur-xl bg-slate-900/40 border border-white/5 p-6 rounded-3xl">
                    <p class="text-[9px] font-black text-slate-500 uppercase tracking-widest mb-3">Moyenne CLS</p>
                    <div class="flex items-end gap-3">
                        <span class="text-3xl font-black text-white italic leading-none">{{ avg_cls|number_format(3) }}</span>
                        <span class="text-[10px] px-2 py-0.5 rounded {{ avg_cls < 0.1 ? 'bg-emerald-500/10 text-emerald-400' : 'bg-rose-500/10 text-rose-400' }} font-bold uppercase italic">
                            {{ avg_cls < 0.1 ? 'Stable' : 'Instable' }}
                        </span>
                    </div>
                </div>

                {# INP #}
                <div class="backdrop-blur-xl bg-slate-900/40 border border-white/5 p-6 rounded-3xl">
                    <p class="text-[9px] font-black text-slate-500 uppercase tracking-widest mb-3">Moyenne INP</p>
                    <div class="flex items-end gap-3">
                        <span class="text-3xl font-black text-white italic leading-none">{{ avg_inp|number_format(0) }}ms</span>
                        <span class="text-[10px] px-2 py-0.5 rounded {{ avg_inp < 200 ? 'bg-emerald-500/10 text-emerald-400' : 'bg-rose-500/10 text-rose-400' }} font-bold uppercase italic">
                            {{ avg_inp < 200 ? 'Fluide' : 'Lent' }}
                        </span>
                    </div>
                </div>
            </div>

            {# --- JOURNAL DE MAINTENANCE --- #}
            <div class="group relative md:col-span-3">
                <div class="absolute inset-0 bg-gradient-to-r from-purple-600/10 via-transparent to-blue-600/10 blur-3xl opacity-0 group-hover:opacity-100 transition-opacity"></div>
                <div class="relative overflow-hidden backdrop-blur-2xl bg-white/5 border border-white/10 rounded-[3rem] p-10">
                    <div class="flex items-center justify-between mb-8">
                        <div>
                            <p class="text-[10px] font-black text-purple-400 uppercase tracking-[0.4em] mb-2 italic">Journal système</p>
                            <h3 class="text-2xl font-black text-white uppercase tracking-tighter">Mises à jour & Maintenance</h3>
                        </div>
                        <div class="hidden md:block px-4 py-2 bg-purple-500/10 border border-purple-500/20 rounded-xl text-purple-500 text-[10px] font-black uppercase italic">{{ updates|length }} logs</div>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-12 gap-y-8">
                        {% for update in updates %}
                            <div class="relative pl-8 border-l-2 border-slate-700/50 hover:border-purple-500 transition-colors">
                                <div class="absolute -left-[9px] top-0 w-4 h-4 rounded-full border-4 border-slate-900 {{ update.tag_color|replace({'text-': 'bg-'})|split(' ')[0] }}"></div>
                                <div class="flex items-center gap-3 mb-2">
                                    <span class="px-2 py-0.5 rounded-md border text-[8px] font-black uppercase {{ update.tag_color }}">{{ update.type }}</span>
                                    <span class="text-[10px] font-bold text-slate-400 uppercase">{{ update.date|date('d/m/Y') }}</span>
                                </div>
                                <p class="text-xs font-bold text-slate-200 leading-relaxed">{{ update.message }}</p>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}