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

style: apply bold modern colors throughout dashboard - dark backgrounds, vibrant gradients, white text

Browse Source
This commit is contained in:
Aleksandar 2025-12-11 13:48:30 +01:00
parent 6dc90f1745
commit 35d64ef3c0
3 changed files with 46 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/admin/src/app/page.tsx
View File

@ -46,18 +46,18 @@ export default function Home() {
}; };
return ( return (
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-slate-100"> <div className="min-h-screen bg-gradient-to-br from-blue-900 via-blue-800 to-blue-950">
<div className="space-y-8 max-w-7xl"> <div className="space-y-8 max-w-7xl">
{/* Hero Section */} {/* Hero Section */}
<div className="pt-8 pb-4"> <div className="pt-8 pb-4">
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<div className="h-12 w-1 bg-gradient-to-b from-blue-600 to-cyan-600 rounded-full"></div> <div className="h-12 w-1 bg-gradient-to-b from-blue-600 to-cyan-600 rounded-full"></div>
<h1 className="text-5xl font-black bg-gradient-to-r from-blue-600 via-blue-700 to-cyan-600 bg-clip-text text-transparent"> <h1 className="text-5xl font-black bg-gradient-to-r from-cyan-400 via-blue-300 to-blue-400 bg-clip-text text-transparent">
FitAI Dashboard FitAI Dashboard
</h1> </h1>
</div> </div>
<p className="text-lg text-gray-600 ml-4">Performance metrics & athlete insights</p> <p className="text-lg text-blue-200 ml-4">Performance metrics & athlete insights</p>
</div> </div>
</div> </div>
@ -100,11 +100,11 @@ export default function Home() {
{/* Main Content Grid */} {/* Main Content Grid */}
<div className="space-y-6 pb-12"> <div className="space-y-6 pb-12">
{/* User Management - Full Width */} {/* User Management - Full Width */}
<div className="bg-white rounded-2xl shadow-lg border border-slate-200/80 p-7 hover:shadow-xl transition-shadow"> <div className="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl shadow-2xl border border-blue-500/30 p-7 hover:shadow-blue-500/20 hover:shadow-2xl transition-shadow">
<div className="space-y-6"> <div className="space-y-6">
<div> <div>
<h2 className="text-2xl font-bold text-slate-900">Active Athletes</h2> <h2 className="text-2xl font-bold text-white">Active Athletes</h2>
<p className="text-sm text-gray-500 mt-1">Manage and monitor your fitness clients</p> <p className="text-sm text-blue-300 mt-1">Manage and monitor your fitness clients</p>
</div> </div>
<UserManagement /> <UserManagement />
</div> </div>
@ -113,8 +113,8 @@ export default function Home() {
{/* Analytics - 3 Columns Horizontal Layout */} {/* Analytics - 3 Columns Horizontal Layout */}
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<h2 className="text-2xl font-bold text-slate-900">Analytics</h2> <h2 className="text-2xl font-bold text-white">Analytics</h2>
<p className="text-sm text-gray-500 mt-1">Performance metrics and insights</p> <p className="text-sm text-blue-300 mt-1">Performance metrics and insights</p>
</div> </div>
<AnalyticsDashboard /> <AnalyticsDashboard />
</div> </div>

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

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

34
apps/admin/src/components/ui/StatsCard.tsx
View File

@ -14,38 +14,38 @@ export function StatsCard({ title, value, change, trend, icon: Icon, color = "bl
const colorStyles = { const colorStyles = {
blue: { blue: {
bg: "from-blue-600 to-blue-700", bg: "from-blue-600 to-blue-700",
text: "text-blue-900", text: "text-white",
light: "from-blue-50 to-blue-100", light: "from-blue-600 to-blue-700",
badge: "bg-blue-100 text-blue-700", badge: "bg-blue-400 text-white",
icon: "bg-blue-200/70 text-blue-700", icon: "bg-white/20 text-white",
}, },
green: { green: {
bg: "from-emerald-600 to-emerald-700", bg: "from-emerald-600 to-emerald-700",
text: "text-emerald-900", text: "text-white",
light: "from-emerald-50 to-emerald-100", light: "from-emerald-600 to-emerald-700",
badge: "bg-emerald-100 text-emerald-700", badge: "bg-emerald-400 text-white",
icon: "bg-emerald-200/70 text-emerald-700", icon: "bg-white/20 text-white",
}, },
purple: { purple: {
bg: "from-purple-600 to-purple-700", bg: "from-purple-600 to-purple-700",
text: "text-purple-900", text: "text-white",
light: "from-purple-50 to-purple-100", light: "from-purple-600 to-purple-700",
badge: "bg-purple-100 text-purple-700", badge: "bg-purple-400 text-white",
icon: "bg-purple-200/70 text-purple-700", icon: "bg-white/20 text-white",
}, },
orange: { orange: {
bg: "from-orange-600 to-orange-700", bg: "from-orange-600 to-orange-700",
text: "text-orange-900", text: "text-white",
light: "from-orange-50 to-orange-100", light: "from-orange-600 to-orange-700",
badge: "bg-orange-100 text-orange-700", badge: "bg-orange-400 text-white",
icon: "bg-orange-200/70 text-orange-700", icon: "bg-white/20 text-white",
}, },
}; };
const styles = colorStyles[color]; const styles = colorStyles[color];
return ( return (
<Card className={`bg-gradient-to-br ${styles.light} border-0 shadow-md hover:shadow-lg transition-all duration-300 overflow-hidden group h-full`}> <Card className={`bg-gradient-to-br ${styles.light} border-0 shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group h-full`}>
<CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3 pt-5 px-5"> <CardHeader className="flex flex-row items-start justify-between space-y-0 pb-3 pt-5 px-5">
<CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}> <CardTitle className={`text-xs font-bold uppercase tracking-wider ${styles.text} leading-tight max-w-[70%]`}>
{title} {title}