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

feat: reorganize dashboard layout with UserManagement full-width and horizontal analytics charts

Browse Source
This commit is contained in:
Aleksandar 2025-12-11 13:44:02 +01:00
parent 02452c11e6
commit 6dc90f1745
2 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -98,8 +98,9 @@ export default function Home() {
</div> </div>
{/* Main Content Grid */} {/* Main Content Grid */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6 pb-12"> <div className="space-y-6 pb-12">
<div className="lg:col-span-2 bg-white rounded-2xl shadow-lg border border-slate-200/80 p-7 hover:shadow-xl transition-shadow"> {/* 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="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-slate-900">Active Athletes</h2>
@ -109,14 +110,13 @@ export default function Home() {
</div> </div>
</div> </div>
<div className="bg-white rounded-2xl shadow-lg border border-slate-200/80 p-7 hover:shadow-xl transition-shadow"> {/* Analytics - 3 Columns Horizontal Layout */}
<div className="space-y-6"> <div className="space-y-4">
<div> <div>
<h2 className="text-2xl font-bold text-slate-900">Performance</h2> <h2 className="text-2xl font-bold text-slate-900">Analytics</h2>
<p className="text-sm text-gray-500 mt-1">Quick insights & analytics</p> <p className="text-sm text-gray-500 mt-1">Performance metrics and insights</p>
</div>
<AnalyticsDashboard />
</div> </div>
<AnalyticsDashboard />
</div> </div>
</div> </div>
</div> </div>

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

@ -77,8 +77,8 @@ export function AnalyticsDashboard() {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{/* Key Metrics Cards - Stacked vertically */} {/* Key Metrics Cards - 3 columns */}
<div className="space-y-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-50 to-blue-100 rounded-xl p-4 border border-blue-200/50 hover:border-blue-300 hover:shadow-md transition-all">
<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-800 mb-2">Total Athletes</p>
<div className="flex items-baseline gap-2"> <div className="flex items-baseline gap-2">
@ -104,34 +104,34 @@ export function AnalyticsDashboard() {
</div> </div>
</div> </div>
{/* Charts - Single column layout for stability */} {/* Charts - 3 Columns Horizontal */}
<div className="space-y-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-white rounded-xl shadow-md border border-slate-200 p-4">
<div className="mb-3"> <div className="mb-3">
<h3 className="text-base font-bold text-gray-900">User Growth Trend</h3> <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> <p className="text-xs text-gray-500">Last 6 months performance</p>
</div> </div>
<div className="overflow-x-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-white rounded-xl shadow-md border border-slate-200 p-4">
<div className="mb-3"> <div className="mb-3">
<h3 className="text-base font-bold text-gray-900">Membership Mix</h3> <h3 className="text-sm font-bold text-gray-900">Membership Mix</h3>
<p className="text-xs text-gray-500">Distribution breakdown</p> <p className="text-xs text-gray-500">Distribution breakdown</p>
</div> </div>
<div className="overflow-x-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-white rounded-xl shadow-md border border-slate-200 p-4">
<div className="mb-3"> <div className="mb-3">
<h3 className="text-base font-bold text-gray-900">Revenue Stream</h3> <h3 className="text-sm font-bold text-gray-900">Revenue Stream</h3>
<p className="text-xs text-gray-500">Monthly earnings</p> <p className="text-xs text-gray-500">Monthly earnings</p>
</div> </div>
<div className="overflow-x-auto"> <div className="h-48 overflow-auto">
<RevenueChart data={revenueData} /> <RevenueChart data={revenueData} />
</div> </div>
</div> </div>