feat: implement event submission flow with image upload and modal interface

admin/src/components/CountryHistogram.tsx

@@ -0,0 +1,97 @@
+"use client";
+
+import React from 'react';
+import {
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+  Cell
+} from 'recharts';
+
+interface CountryHistogramProps {
+  data: { country: string; impressions: number; visitors: number }[];
+  title: string;
+}
+
+export default function CountryHistogram({ data, title }: CountryHistogramProps) {
+  // Take top 10 for readability
+  const chartData = data.slice(0, 10).map(item => ({
+    name: item.country || 'Inconnu',
+    "Impressions": item.impressions,
+    "V. Uniques": item.visitors
+  }));
+
+  return (
+    <div className="card bg-slate-900/50 border border-slate-800 p-6">
+      <h2 className="text-xl font-bold text-white mb-6 flex items-center gap-2">
+        {title}
+      </h2>
+      
+      <div className="h-[400px] w-full">
+        <ResponsiveContainer width="100%" height="100%">
+          <BarChart
+            data={chartData}
+            margin={{
+              top: 5,
+              right: 30,
+              left: 20,
+              bottom: 5,
+            }}
+          >
+            <CartesianGrid strokeDasharray="3 3" stroke="#1e293b" vertical={false} />
+            <XAxis 
+              dataKey="name" 
+              stroke="#64748b" 
+              fontSize={10} 
+              tickLine={false} 
+              axisLine={false}
+              interval={0}
+            />
+            <YAxis 
+              stroke="#64748b" 
+              fontSize={10} 
+              tickLine={false} 
+              axisLine={false}
+              tickFormatter={(value) => value.toLocaleString()}
+            />
+            <Tooltip
+              contentStyle={{
+                backgroundColor: '#0f172a',
+                border: '1px solid #1e293b',
+                borderRadius: '8px',
+                fontSize: '12px'
+              }}
+              itemStyle={{ padding: '2px 0' }}
+              cursor={{ fill: 'rgba(255, 255, 255, 0.05)' }}
+            />
+            <Legend 
+              verticalAlign="top" 
+              align="right" 
+              iconType="circle"
+              wrapperStyle={{ paddingBottom: '20px', fontSize: '10px', textTransform: 'uppercase', fontWeight: 'bold' }}
+            />
+            <Bar 
+              dataKey="Impressions" 
+              fill="#6366f1" 
+              radius={[4, 4, 0, 0]} 
+              barSize={20}
+              animationDuration={1500}
+            />
+            <Bar 
+              dataKey="V. Uniques" 
+              fill="#10b981" 
+              radius={[4, 4, 0, 0]} 
+              barSize={20}
+              animationDuration={1500}
+            />
+          </BarChart>
+        </ResponsiveContainer>
+      </div>
+    </div>
+  );
+}