admin/ludikevent_crm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

```

Browse Source 
✨ feat(dashboard/home): Ajoute des cartes business et améliore l'affichage des données.
```
This commit is contained in:
Serreau Jovann
2026-01-30 12:05:34 +01:00
parent a407aed342
commit dfcac42e6e
2 changed files with 42 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
templates/dashboard/base.twig
View File

@@ -70,9 +70,8 @@
{# MAIN CONTENT #}
<main class="flex-1 flex flex-col min-w-0 lg:ml-72 bg-[#0f172a] h-screen overflow-y-auto custom-scrollbar relative">
{# HEADER #}
<header class="h-20 flex items-center justify-between px-8 bg-[#1e293b] border-b border-slate-800 sticky top-0 z-30 gap-6">
<header class="h-20 flex-none flex items-center justify-between px-8 bg-[#1e293b] border-b border-slate-800 z-30 gap-6">
<div class="flex-1 max-w-2xl relative">
<form action="{{ path('app_crm_search') }}" method="GET" class="flex items-center">

111
templates/dashboard/home.twig
View File

@@ -2,16 +2,41 @@
{% block title %}Tableau de bord{% endblock %}
{% macro business_card(title, value, subtitle, color) %}
<div class="group relative">
<div class="absolute inset-0 bg-{{ color }}-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-{{ color }}-400 uppercase tracking-[0.4em] mb-4 italic">{{ title }}</p>
<h2 class="text-7xl font-black text-white tracking-tighter italic leading-none">{{ value }}</h2>
<p class="text-[11px] font-bold text-slate-400 mt-4 uppercase">{{ subtitle }}</p>
</div>
</div>
{% endmacro %}
{% macro web_vital(label, value, unit, is_good, good_text, bad_text) %}
<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-300 uppercase tracking-widest mb-3">{{ label }}</p>
<div class="flex items-end gap-3">
<span class="text-3xl font-black text-white italic leading-none">{{ value }}{{ unit }}</span>
<span class="text-[10px] px-2 py-0.5 rounded {{ is_good ? 'bg-emerald-500/10 text-emerald-400' : 'bg-rose-500/10 text-rose-400' }} font-bold uppercase italic">
{{ is_good ? good_text : bad_text }}
</span>
</div>
</div>
{% endmacro %}
{% import _self as macros %}
{% 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">
<section class="flex flex-wrap gap-4 items-center mb-8" aria-label="Statistiques rapides">
<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-boldtext-slate-300 group-hover:text-white transition-colors uppercase tracking-widest">reservation.ludikevent.fr</span>
<span class="text-[10px] font-bold text-slate-300 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>
@@ -27,84 +52,29 @@
</div>
</div>
</div>
</div>
</section>
<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>
{{ macros.business_card('Inventaire', product, 'Produits actifs', 'blue') }}
{{ macros.business_card('Devis', devis_wait_sign, 'À faire signer', 'amber') }}
{{ macros.business_card('Clients', customers, 'Fiches uniques', 'emerald') }}
{# --- 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">
<section 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" aria-label="Performance Web Vitals">
<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-300 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-300 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-300 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-300 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>
{{ macros.web_vital('Moyenne LCP', avg_lcp|number_format(2), 's', avg_lcp < 2.5, 'Bon', 'Lent') }}
{{ macros.web_vital('Moyenne CLS', avg_cls|number_format(3), '', avg_cls < 0.1, 'Stable', 'Instable') }}
{{ macros.web_vital('Moyenne INP', avg_inp|number_format(0), 'ms', avg_inp < 200, 'Fluide', 'Lent') }}
</section>
{# --- JOURNAL DE MAINTENANCE --- #}
<div class="group relative md:col-span-3">
<section class="group relative md:col-span-3" aria-label="Journal de maintenance">
<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">
@@ -116,8 +86,9 @@
</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 %}
{% set tag_bg_class = update.tag_color|replace({'text-': 'bg-'})|split(' ')[0] %}
<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="absolute -left-[9px] top-0 w-4 h-4 rounded-full border-4 border-slate-900 {{ tag_bg_class }}"></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>
@@ -127,7 +98,7 @@
{% endfor %}
</div>
</div>
</div>
</section>
</div>
</div>
{% endblock %}
{% endblock %}