From 6dc90f1745084f1ec32b152b4954cb713560d1fa Mon Sep 17 00:00:00 2001
From: Aleksandar <b.aleksandar@outlook.com>
Date: Thu, 11 Dec 2025 13:44:02 +0100
Subject: [PATCH] feat: reorganize dashboard layout with UserManagement
 full-width and horizontal analytics charts

---
 apps/admin/src/app/page.tsx                   | 18 ++++++++---------
 .../analytics/AnalyticsDashboard.tsx          | 20 +++++++++----------
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/apps/admin/src/app/page.tsx b/apps/admin/src/app/page.tsx
index dc8ed12..74ddbab 100644
--- a/apps/admin/src/app/page.tsx
+++ b/apps/admin/src/app/page.tsx
@@ -98,8 +98,9 @@ export default function Home() {
         </div>
 
         {/* Main Content Grid */}
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-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">
+        <div className="space-y-6 pb-12">
+          {/* 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>
                 <h2 className="text-2xl font-bold text-slate-900">Active Athletes</h2>
@@ -109,14 +110,13 @@ export default function Home() {
             </div>
           </div>
 
-          <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>
-                <h2 className="text-2xl font-bold text-slate-900">Performance</h2>
-                <p className="text-sm text-gray-500 mt-1">Quick insights & analytics</p>
-              </div>
-              <AnalyticsDashboard />
+          {/* Analytics - 3 Columns Horizontal Layout */}
+          <div className="space-y-4">
+            <div>
+              <h2 className="text-2xl font-bold text-slate-900">Analytics</h2>
+              <p className="text-sm text-gray-500 mt-1">Performance metrics and insights</p>
             </div>
+            <AnalyticsDashboard />
           </div>
         </div>
       </div>
diff --git a/apps/admin/src/components/analytics/AnalyticsDashboard.tsx b/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
index 2bfeab6..3b3e184 100644
--- a/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
+++ b/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
@@ -77,8 +77,8 @@ export function AnalyticsDashboard() {
 
   return (
     <div className="space-y-4">
-      {/* Key Metrics Cards - Stacked vertically */}
-      <div className="space-y-3">
+      {/* 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-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>
           <div className="flex items-baseline gap-2">
@@ -104,34 +104,34 @@ export function AnalyticsDashboard() {
         </div>
       </div>
 
-      {/* Charts - Single column layout for stability */}
-      <div className="space-y-3">
+      {/* 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">
           <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>
           </div>
-          <div className="overflow-x-auto">
+          <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">
           <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>
           </div>
-          <div className="overflow-x-auto">
+          <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">
           <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>
           </div>
-          <div className="overflow-x-auto">
+          <div className="h-48 overflow-auto">
             <RevenueChart data={revenueData} />
           </div>
         </div>