wkadmin/the-tip-top-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: redesign admin dashboard with modern UI

Browse Source 
- Add gradient header with dark blue theme
- Improve stat cards with gradient backgrounds and decorative circles
- Update period filter with modern button styling
- Improve city cards with gradient rank badges
- Better hover effects and transitions

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
soufiane 2025-12-03 16:57:10 +01:00
parent ea67bf4137
commit 04119b69cc
2 changed files with 113 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

166
app/admin/dashboard/page.tsx
View File

@ -198,51 +198,53 @@ export default function AdminDashboardAdvanced() {
<div className="min-h-full bg-gradient-to-br from-gray-50 via-white to-gray-50 p-8">
{/* Header avec contrôles */}
<div className="mb-8">
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
<div>
<h1 className="text-4xl font-bold text-[#1e3a5f] mb-2">
Dashboard Administrateur
</h1>
<p className="text-gray-600 text-lg">
Statistiques complètes et analyses en temps réel
</p>
</div>
<div className="bg-gradient-to-r from-[#1e3a5f] to-[#2d5a8f] rounded-2xl p-6 mb-6">
<div className="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4">
<div>
<h1 className="text-3xl font-bold text-white mb-1">
Dashboard Administrateur
</h1>
<p className="text-blue-200">
Statistiques complètes et analyses en temps réel
</p>
</div>
<div className="flex flex-wrap items-center gap-3">
{/* Auto-refresh toggle */}
<label className="flex items-center gap-2 bg-white px-4 py-2.5 rounded-xl border border-gray-200 shadow-sm cursor-pointer hover:shadow-md transition-all">
<input
type="checkbox"
checked={autoRefresh}
onChange={(e) => setAutoRefresh(e.target.checked)}
className="rounded accent-blue-600"
/>
<span className="text-sm font-medium text-gray-700">Auto-refresh ({refreshInterval}s)</span>
</label>
<div className="flex flex-wrap items-center gap-3">
{/* Auto-refresh toggle */}
<label className="flex items-center gap-2 bg-white/10 backdrop-blur-sm px-4 py-2.5 rounded-xl border border-white/20 cursor-pointer hover:bg-white/20 transition-all">
<input
type="checkbox"
checked={autoRefresh}
onChange={(e) => setAutoRefresh(e.target.checked)}
className="rounded accent-white"
/>
<span className="text-sm font-medium text-white">Auto-refresh ({refreshInterval}s)</span>
</label>
{/* Export button */}
<button
onClick={exportToCSV}
className="flex items-center gap-2 bg-gradient-to-r from-green-600 to-green-700 text-white px-5 py-2.5 rounded-xl hover:from-green-700 hover:to-green-800 transition-all shadow-md hover:shadow-lg font-medium"
>
<Download className="w-4 h-4" />
Export CSV
</button>
{/* Export button */}
<button
onClick={exportToCSV}
className="flex items-center gap-2 bg-emerald-500 text-white px-5 py-2.5 rounded-xl hover:bg-emerald-600 transition-all shadow-lg font-medium"
>
<Download className="w-4 h-4" />
Export CSV
</button>
{/* Refresh button */}
<button
onClick={loadStatistics}
className="flex items-center gap-2 bg-gradient-to-r from-blue-600 to-blue-700 text-white px-5 py-2.5 rounded-xl hover:from-blue-700 hover:to-blue-800 transition-all shadow-md hover:shadow-lg font-medium"
>
<RefreshCw className="w-4 h-4" />
Rafraîchir
</button>
{/* Refresh button */}
<button
onClick={loadStatistics}
className="flex items-center gap-2 bg-white text-[#1e3a5f] px-5 py-2.5 rounded-xl hover:bg-gray-100 transition-all shadow-lg font-semibold"
>
<RefreshCw className="w-4 h-4" />
Rafraîchir
</button>
</div>
</div>
</div>
{/* Filter period */}
<div className="mt-6 flex items-center gap-3">
<div className="flex items-center gap-2 text-gray-600">
<div className="flex items-center gap-3 bg-white rounded-xl p-3 shadow-sm border border-gray-100">
<div className="flex items-center gap-2 text-gray-600 px-2">
<Filter className="w-4 h-4" />
<span className="text-sm font-medium">Période:</span>
</div>
@ -251,10 +253,10 @@ export default function AdminDashboardAdvanced() {
<button
key={period}
onClick={() => setSelectedPeriod(period)}
className={`px-4 py-2 rounded-xl text-sm font-semibold transition-all ${
className={`px-5 py-2 rounded-lg text-sm font-semibold transition-all ${
selectedPeriod === period
? "bg-gradient-to-r from-blue-600 to-blue-700 text-white shadow-md"
: "bg-white text-gray-600 border border-gray-200 hover:bg-gray-50 hover:shadow-sm"
? "bg-gradient-to-r from-[#1e3a5f] to-[#2d5a8f] text-white shadow-md"
: "text-gray-600 hover:bg-gray-100"
}`}
>
{period === "all" && "Tout"}
@ -564,39 +566,46 @@ interface StatCardProps {
}
function StatCard({ title, value, subtitle, icon, color, link, trend }: StatCardProps) {
const iconColors = {
blue: "bg-blue-100 text-blue-600",
green: "bg-green-100 text-green-600",
yellow: "bg-yellow-100 text-yellow-600",
purple: "bg-purple-100 text-purple-600",
red: "bg-red-100 text-red-600",
const gradients = {
blue: "from-blue-500 to-blue-600",
green: "from-emerald-500 to-emerald-600",
yellow: "from-amber-500 to-orange-500",
purple: "from-purple-500 to-purple-600",
red: "from-red-500 to-red-600",
};
const valueColors = {
blue: "text-blue-600",
green: "text-green-600",
yellow: "text-yellow-500",
purple: "text-purple-600",
red: "text-red-600",
const bgColors = {
blue: "from-blue-50 to-blue-100 border-blue-200",
green: "from-emerald-50 to-emerald-100 border-emerald-200",
yellow: "from-amber-50 to-orange-100 border-amber-200",
purple: "from-purple-50 to-purple-100 border-purple-200",
red: "from-red-50 to-red-100 border-red-200",
};
return (
<Link
href={link}
className="bg-white rounded-2xl shadow-md border border-gray-100 p-6 hover:shadow-xl transition-all hover:scale-[1.02] group"
className={`bg-gradient-to-br ${bgColors[color]} rounded-2xl border p-6 hover:shadow-xl transition-all hover:scale-[1.02] group relative overflow-hidden`}
>
<div className="flex items-center justify-between mb-4">
<div className={`p-3 rounded-xl ${iconColors[color]} group-hover:scale-110 transition-transform`}>{icon}</div>
{trend && (
<div className="flex items-center gap-1 text-green-600 text-sm font-semibold bg-green-50 px-2 py-1 rounded-lg">
<TrendingUp className="w-3 h-3" />
{trend}
</div>
)}
<div className="absolute top-0 right-0 w-32 h-32 transform translate-x-8 -translate-y-8">
<div className={`w-full h-full bg-gradient-to-br ${gradients[color]} rounded-full opacity-10`}></div>
</div>
<div className="relative">
<div className="flex items-center justify-between mb-4">
<div className={`p-3 rounded-xl bg-gradient-to-br ${gradients[color]} text-white shadow-lg group-hover:scale-110 transition-transform`}>
{icon}
</div>
{trend && (
<div className="flex items-center gap-1 text-emerald-700 text-sm font-semibold bg-emerald-100 px-2.5 py-1 rounded-full">
<TrendingUp className="w-3 h-3" />
{trend}
</div>
)}
</div>
<h3 className="text-sm font-semibold text-gray-600 mb-1">{title}</h3>
<p className="text-4xl font-bold text-gray-900">{(value || 0).toLocaleString("fr-FR")}</p>
{subtitle && <p className="text-xs text-gray-500 mt-2">{subtitle}</p>}
</div>
<h3 className="text-sm font-medium text-gray-500 mb-2">{title}</h3>
<p className={`text-4xl font-bold ${valueColors[color]}`}>{(value || 0).toLocaleString("fr-FR")}</p>
{subtitle && <p className="text-xs text-gray-500 mt-2">{subtitle}</p>}
</Link>
);
}
@ -638,27 +647,28 @@ interface CityCardProps {
}
function CityCard({ rank, city, count, percentage }: CityCardProps) {
const rankColors = {
1: "bg-yellow-100 text-yellow-800 border-yellow-300",
2: "bg-gray-100 text-gray-800 border-gray-300",
3: "bg-orange-100 text-orange-800 border-orange-300",
const rankStyles = {
1: { bg: "from-amber-400 to-yellow-500", badge: "bg-amber-500" },
2: { bg: "from-gray-300 to-gray-400", badge: "bg-gray-400" },
3: { bg: "from-orange-400 to-amber-500", badge: "bg-orange-500" },
};
const rankColor =
rankColors[rank as keyof typeof rankColors] || "bg-blue-50 text-blue-800 border-blue-200";
const style = rankStyles[rank as keyof typeof rankStyles] || { bg: "from-blue-400 to-blue-500", badge: "bg-blue-500" };
return (
<div className={`rounded-lg border-2 p-4 ${rankColor} hover:shadow-md transition`}>
<div className="flex items-center justify-between mb-2">
<span className="text-lg font-bold">#{rank}</span>
<MapPin className="w-4 h-4" />
<div className="bg-white rounded-xl border border-gray-100 p-4 hover:shadow-lg transition-all group">
<div className="flex items-center justify-between mb-3">
<span className={`w-8 h-8 rounded-lg bg-gradient-to-br ${style.bg} flex items-center justify-center text-white font-bold text-sm shadow-md`}>
{rank}
</span>
<MapPin className="w-4 h-4 text-gray-400 group-hover:text-orange-500 transition-colors" />
</div>
<h4 className="font-semibold text-sm mb-1 truncate" title={city}>
<h4 className="font-bold text-gray-900 mb-1 truncate" title={city}>
{city}
</h4>
<div className="flex items-baseline gap-2">
<span className="text-xl font-bold">{count}</span>
<span className="text-xs">({percentage.toFixed(1)}%)</span>
<span className="text-2xl font-bold text-gray-900">{count.toLocaleString('fr-FR')}</span>
<span className="text-xs text-gray-500 bg-gray-100 px-2 py-0.5 rounded-full">{percentage.toFixed(1)}%</span>
</div>
</div>
);

44
app/admin/tirages/page.tsx
View File

@ -477,7 +477,7 @@ ${report.draw.notifiedAt ? `📧 Gagnant notifié le: ${new Date(report.draw.not
isLoading={loading}
disabled={loading}
size="sm"
className="bg-white text-blue-600 hover:bg-blue-50 rounded-xl"
className="bg-blue-600 text-white hover:bg-blue-700 rounded-xl"
>
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
Actualiser
@ -563,25 +563,31 @@ ${report.draw.notifiedAt ? `📧 Gagnant notifié le: ${new Date(report.draw.not
</div>
{/* Bouton de tirage au sort */}
<div className="mt-6 p-6 bg-gradient-to-r from-amber-50 to-orange-50 rounded-xl border-2 border-amber-200">
<div className="flex items-center justify-between">
<div>
<h3 className="text-lg font-bold text-gray-900 mb-1">
Prêt à lancer le tirage au sort ?
</h3>
<p className="text-sm text-gray-600">
{participants.length} participant{participants.length > 1 ? 's ont' : ' a'} une chance égale de gagner {prizeName} ({prizeValue}€)
</p>
<div className="mt-6 bg-gradient-to-r from-amber-500 via-orange-500 to-red-500 rounded-2xl p-1">
<div className="bg-white rounded-xl p-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-4">
<div className="w-14 h-14 bg-gradient-to-br from-amber-400 to-orange-500 rounded-xl flex items-center justify-center shadow-lg">
<Trophy className="w-7 h-7 text-white" />
</div>
<div>
<h3 className="text-xl font-bold text-gray-900">
Prêt à lancer le tirage au sort ?
</h3>
<p className="text-sm text-gray-500 mt-1">
<span className="font-semibold text-orange-600">{participants.length}</span> participant{participants.length > 1 ? 's ont' : ' a'} une chance égale de gagner <span className="font-semibold text-purple-600">{prizeName}</span> ({prizeValue}€)
</p>
</div>
</div>
<button
onClick={conductDraw}
disabled={loading}
className="flex items-center gap-2 px-8 py-4 bg-gradient-to-r from-amber-500 via-orange-500 to-red-500 text-white font-bold text-lg rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
>
<Trophy className="w-6 h-6" />
Lancer le Tirage
</button>
</div>
<Button
onClick={conductDraw}
disabled={loading}
size="lg"
className="bg-gradient-to-r from-amber-500 to-orange-500 hover:from-amber-600 hover:to-orange-600 rounded-xl shadow-lg"
>
<Trophy className="w-5 h-5 mr-2" />
Lancer le Tirage
</Button>
</div>
</div>
</>