All files / app/statistics page.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
 
 
1x
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
'use client';
 
import PageTemplate from '@/components/layout/PageTemplate';
 
/**
 * Page Statistiques - Route: /statistics
 * 
 * Interface dédiée aux statistiques des Jeux Olympiques
 */
export default function StatisticsPage() {
    return (
        <PageTemplate
            title="📊 Statistiques des JO"
            breadcrumbs={[
                { label: 'Dashboard', href: '/dashboard' },
                { label: 'Statistiques' }
            ]}
            intro={{
                title: "Analyse et Statistiques",
                description: "Consultez les données et métriques des Jeux Olympiques"
            }}
        >
            {/* Grille des statistiques principales */}
            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
                <div className="bg-white rounded-lg shadow-md p-6 text-center">
                    <div className="text-4xl font-bold text-blue-600 mb-2">42</div>
                    <div className="text-sm text-gray-600">Événements totaux</div>
                </div>
                <div className="bg-white rounded-lg shadow-md p-6 text-center">
                    <div className="text-4xl font-bold text-green-600 mb-2">1,234</div>
                    <div className="text-sm text-gray-600">Participants</div>
                </div>
                <div className="bg-white rounded-lg shadow-md p-6 text-center">
                    <div className="text-4xl font-bold text-purple-600 mb-2">25</div>
                    <div className="text-sm text-gray-600">Lieux actifs</div>
                </div>
                <div className="bg-white rounded-lg shadow-md p-6 text-center">
                    <div className="text-4xl font-bold text-orange-600 mb-2">87%</div>
                    <div className="text-sm text-gray-600">Taux d&apos;occupation</div>
                </div>
            </div>
 
            {/* Placeholder pour les graphiques */}
            <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
                <div className="bg-white rounded-lg shadow-md p-8">
                    <h3 className="text-xl font-bold text-gray-900 mb-6">
                        Évolution des inscriptions
                    </h3>
                    <div className="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
                        <div className="text-center text-gray-500">
                            <div className="text-4xl mb-2">📈</div>
                            <p>Graphique en développement</p>
                        </div>
                    </div>
                </div>
 
                <div className="bg-white rounded-lg shadow-md p-8">
                    <h3 className="text-xl font-bold text-gray-900 mb-6">
                        Répartition par discipline
                    </h3>
                    <div className="h-64 bg-gray-100 rounded-lg flex items-center justify-center">
                        <div className="text-center text-gray-500">
                            <div className="text-4xl mb-2">🥧</div>
                            <p>Graphique en développement</p>
                        </div>
                    </div>
                </div>
            </div>
        </PageTemplate>
    );
}