From 02452c11e6333666f68e9af36cd47bebc57602d7 Mon Sep 17 00:00:00 2001
From: Aleksandar <b.aleksandar@outlook.com>
Date: Thu, 11 Dec 2025 13:41:57 +0100
Subject: [PATCH] fix: simplify AnalyticsDashboard layout to prevent text
 overflow and improve stability

---
 .../analytics/AnalyticsDashboard.tsx          | 76 ++++++++++---------
 1 file changed, 40 insertions(+), 36 deletions(-)

diff --git a/apps/admin/src/components/analytics/AnalyticsDashboard.tsx b/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
index f76b01d..2bfeab6 100644
--- a/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
+++ b/apps/admin/src/components/analytics/AnalyticsDashboard.tsx
@@ -76,58 +76,62 @@ export function AnalyticsDashboard() {
   }
 
   return (
-    <div className="space-y-6">
-      {/* Key Metrics Cards */}
-      <div className="grid grid-cols-1 gap-4">
-        <div className="bg-gradient-to-br from-blue-100 to-blue-150 rounded-2xl p-6 border border-blue-300/30 hover:border-blue-400/50 hover:shadow-xl transition-all min-h-[120px] flex flex-col justify-between">
-          <p className="text-xs uppercase tracking-widest font-bold text-blue-800 mb-3">Total Athletes</p>
-          <div className="flex items-baseline gap-3">
-            <div className="text-5xl font-black text-blue-900">{totalUsers}</div>
-            <span className="text-sm text-blue-700 font-semibold">active</span>
+    <div className="space-y-4">
+      {/* Key Metrics Cards - Stacked vertically */}
+      <div className="space-y-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">
+            <div className="text-3xl font-black text-blue-900">{totalUsers}</div>
+            <span className="text-xs text-blue-700 font-semibold">active</span>
           </div>
         </div>
 
-        <div className="bg-gradient-to-br from-emerald-100 to-emerald-150 rounded-2xl p-6 border border-emerald-300/30 hover:border-emerald-400/50 hover:shadow-xl transition-all min-h-[120px] flex flex-col justify-between">
-          <p className="text-xs uppercase tracking-widest font-bold text-emerald-800 mb-3">Total Revenue</p>
-          <div className="flex items-baseline gap-3">
-            <div className="text-5xl font-black text-emerald-900">${totalRevenue.toLocaleString()}</div>
-            <span className="text-sm text-emerald-700 font-semibold">ytd</span>
+        <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">
+          <p className="text-xs uppercase tracking-wide font-bold text-emerald-800 mb-2">Total Revenue</p>
+          <div className="flex items-baseline gap-2">
+            <div className="text-3xl font-black text-emerald-900">${totalRevenue.toLocaleString()}</div>
+            <span className="text-xs text-emerald-700 font-semibold">ytd</span>
           </div>
         </div>
 
-        <div className="bg-gradient-to-br from-purple-100 to-purple-150 rounded-2xl p-6 border border-purple-300/30 hover:border-purple-400/50 hover:shadow-xl transition-all min-h-[120px] flex flex-col justify-between">
-          <p className="text-xs uppercase tracking-widest font-bold text-purple-800 mb-3">Active Members</p>
-          <div className="flex items-baseline gap-3">
-            <div className="text-5xl font-black text-purple-900">{activeMembers}</div>
-            <span className="text-sm text-purple-700 font-semibold">members</span>
+        <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">
+          <p className="text-xs uppercase tracking-wide font-bold text-purple-800 mb-2">Active Members</p>
+          <div className="flex items-baseline gap-2">
+            <div className="text-3xl font-black text-purple-900">{activeMembers}</div>
+            <span className="text-xs text-purple-700 font-semibold">members</span>
           </div>
         </div>
       </div>
 
-      {/* Charts Grid */}
-      <div className="grid grid-cols-1 gap-5">
-        <div className="bg-white rounded-2xl shadow-lg border border-slate-200 p-5 hover:shadow-xl transition-shadow">
-          <div className="mb-4">
-            <h3 className="text-lg font-bold text-gray-900">User Growth Trend</h3>
-            <p className="text-sm text-gray-500">Last 6 months performance</p>
+      {/* Charts - Single column layout for stability */}
+      <div className="space-y-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>
+            <p className="text-xs text-gray-500">Last 6 months performance</p>
+          </div>
+          <div className="overflow-x-auto">
+            <UserGrowthChart data={userGrowthData} />
           </div>
-          <UserGrowthChart data={userGrowthData} />
         </div>
 
-        <div className="grid grid-cols-2 gap-5">
-          <div className="bg-white rounded-2xl shadow-lg border border-slate-200 p-5 hover:shadow-xl transition-shadow">
-            <div className="mb-4">
-              <h3 className="text-lg font-bold text-gray-900">Membership Mix</h3>
-              <p className="text-sm text-gray-500">Distribution breakdown</p>
-            </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>
+            <p className="text-xs text-gray-500">Distribution breakdown</p>
+          </div>
+          <div className="overflow-x-auto">
             <MembershipDistributionChart data={membershipData} />
           </div>
+        </div>
 
-          <div className="bg-white rounded-2xl shadow-lg border border-slate-200 p-5 hover:shadow-xl transition-shadow">
-            <div className="mb-4">
-              <h3 className="text-lg font-bold text-gray-900">Revenue Stream</h3>
-              <p className="text-sm text-gray-500">Monthly earnings</p>
-            </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>
+            <p className="text-xs text-gray-500">Monthly earnings</p>
+          </div>
+          <div className="overflow-x-auto">
             <RevenueChart data={revenueData} />
           </div>
         </div>