dimitar/fitaiProto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: apply kameleon gradient transitions to analytics cards - all metrics and charts with via-colors

Browse Source
This commit is contained in:
Aleksandar 2025-12-11 14:16:41 +01:00
parent 19ece90c6f
commit 8c2a3daee0
1 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
apps/admin/src/components/analytics/AnalyticsDashboard.tsx
View File

@ -79,57 +79,57 @@ export function AnalyticsDashboard() {
<div className="space-y-4">
{/* Key Metrics Cards - 3 columns */}
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div className="bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl p-4 border border-blue-300/50 hover:border-blue-400 hover:shadow-xl transition-all shadow-md text-white">
<p className="text-xs uppercase tracking-wide font-bold text-blue-100 mb-2">Total Athletes</p>
<div className="bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Athletes</p>
<div className="flex items-baseline gap-2">
<div className="text-3xl font-black text-white">{totalUsers}</div>
<span className="text-xs text-blue-100 font-semibold">active</span>
<div className="text-2xl font-black text-white">{totalUsers}</div>
<span className="text-xs text-white font-semibold">active</span>
</div>
</div>
<div className="bg-gradient-to-br from-emerald-500 to-teal-500 rounded-xl p-4 border border-emerald-300/50 hover:border-emerald-400 hover:shadow-xl transition-all shadow-md text-white">
<p className="text-xs uppercase tracking-wide font-bold text-emerald-100 mb-2">Total Revenue</p>
<div className="bg-gradient-to-br from-emerald-600 via-teal-500 to-cyan-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Total Revenue</p>
<div className="flex items-baseline gap-2">
<div className="text-3xl font-black text-white">${totalRevenue.toLocaleString()}</div>
<span className="text-xs text-emerald-100 font-semibold">ytd</span>
<div className="text-2xl font-black text-white">${totalRevenue.toLocaleString()}</div>
<span className="text-xs text-white font-semibold">ytd</span>
</div>
</div>
<div className="bg-gradient-to-br from-purple-500 to-blue-500 rounded-xl p-4 border border-purple-300/50 hover:border-purple-400 hover:shadow-xl transition-all shadow-md text-white">
<p className="text-xs uppercase tracking-wide font-bold text-purple-100 mb-2">Active Members</p>
<div className="bg-gradient-to-br from-purple-600 via-pink-500 to-blue-500 rounded-xl p-5 border-0 shadow-lg hover:shadow-2xl transition-all text-white">
<p className="text-xs uppercase tracking-wide font-bold text-white mb-2">Active Members</p>
<div className="flex items-baseline gap-2">
<div className="text-3xl font-black text-white">{activeMembers}</div>
<span className="text-xs text-purple-100 font-semibold">members</span>
<div className="text-2xl font-black text-white">{activeMembers}</div>
<span className="text-xs text-white font-semibold">members</span>
</div>
</div>
</div>
{/* Charts - 3 Columns Horizontal */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-3">
<div className="bg-white rounded-xl shadow-md border border-slate-200 p-4 hover:shadow-lg transition-all">
<div className="bg-gradient-to-br from-blue-600 via-cyan-500 to-teal-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
<div className="mb-3">
<h3 className="text-sm font-bold text-gray-900">User Growth Trend</h3>
<p className="text-xs text-gray-500">Last 6 months performance</p>
<h3 className="text-sm font-bold text-white">User Growth Trend</h3>
<p className="text-xs text-blue-100">Last 6 months performance</p>
</div>
<div className="h-48 overflow-auto">
<UserGrowthChart data={userGrowthData} />
</div>
</div>
<div className="bg-white rounded-xl shadow-md border border-slate-200 p-4 hover:shadow-lg transition-all">
<div className="bg-gradient-to-br from-emerald-600 via-teal-500 to-cyan-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
<div className="mb-3">
<h3 className="text-sm font-bold text-gray-900">Membership Mix</h3>
<p className="text-xs text-gray-500">Distribution breakdown</p>
<h3 className="text-sm font-bold text-white">Membership Mix</h3>
<p className="text-xs text-emerald-100">Distribution breakdown</p>
</div>
<div className="h-48 overflow-auto">
<MembershipDistributionChart data={membershipData} />
</div>
</div>
<div className="bg-white rounded-xl shadow-md border border-slate-200 p-4 hover:shadow-lg transition-all">
<div className="bg-gradient-to-br from-purple-600 via-pink-500 to-blue-500 rounded-xl shadow-lg border-0 p-5 hover:shadow-2xl transition-all">
<div className="mb-3">
<h3 className="text-sm font-bold text-gray-900">Revenue Stream</h3>
<p className="text-xs text-gray-500">Monthly earnings</p>
<h3 className="text-sm font-bold text-white">Revenue Stream</h3>
<p className="text-xs text-purple-100">Monthly earnings</p>
</div>
<div className="h-48 overflow-auto">
<RevenueChart data={revenueData} />