From 943079d94f00331ef0da22d4d769d23ba90e8e54 Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Thu, 16 Oct 2025 08:41:55 +0200
Subject: [PATCH] beatutify: adjust dashboard

---
 src/app/dashboard/page.tsx | 171 ++++++++++++++++---------------------
 1 file changed, 75 insertions(+), 96 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 654e5d4..2961e6a 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -10,9 +10,8 @@ import {
   UsersIcon, 
   UserCircleIcon,
   StarIcon,
-  ChartBarIcon,
   HeartIcon,
-  BuildingOffice2Icon            // <-- added
+  LinkIcon
 } from '@heroicons/react/24/outline'
 
 export default function DashboardPage() {
@@ -59,11 +58,18 @@ export default function DashboardPage() {
       color: 'bg-blue-500'
     },
     {
-      title: 'Join Community',
-      description: 'Connect with like-minded people',
+      title: 'Browse Affiliate Links',
+      description: 'Discover affiliate offers and links',
+      icon: LinkIcon,
+      href: '/affiliate-links',
+      color: 'bg-teal-500'
+    },
+    {
+      title: 'Referral Management',
+      description: 'Create and manage referral links',
       icon: UsersIcon,
-      href: '/community',
-      color: 'bg-green-500'
+      href: '/referral-management',
+      color: 'bg-amber-600'
     },
     {
       title: 'Edit Profile',
@@ -74,19 +80,35 @@ export default function DashboardPage() {
     }
   ]
 
-  // Stats (mock data for now)
-  const stats = [
-    { label: 'Orders', value: '12', icon: ShoppingBagIcon },
-    { label: 'Favorites', value: '8', icon: HeartIcon },
-    { label: 'Gold Points', value: '250', icon: StarIcon },
-    { label: 'Activity', value: '15', icon: ChartBarIcon }
-  ]
-
-  // Referral statistics (mock values)
-  const referralStats = [
-    { label: 'Registered Users', value: '123', icon: UsersIcon, color: 'bg-indigo-600' },
-    { label: 'Personal Users', value: '85', icon: UserCircleIcon, color: 'bg-teal-600' },
-    { label: 'Company Users', value: '38', icon: BuildingOffice2Icon, color: 'bg-amber-600' },
+  // New: Latest news/articles (replace stats)
+  const news = [
+    {
+      id: 'n1',
+      title: 'Profit Planet launches Referral Management',
+      excerpt: 'Create, track, and manage your referral links with real‑time usage and status.',
+      date: '2025-01-08',
+      category: 'Product Update',
+      href: '/news/referral-management',
+      image: null as string | null,
+    },
+    {
+      id: 'n2',
+      title: 'Tips to maximize referral conversions',
+      excerpt: 'Learn 7 quick optimizations to improve referral performance and user onboarding.',
+      date: '2025-01-05',
+      category: 'Guides',
+      href: '/news/maximize-referrals',
+      image: null,
+    },
+    {
+      id: 'n3',
+      title: 'Community spotlight: January',
+      excerpt: 'A look at the most inspiring community stories and achievements of the month.',
+      date: '2025-01-02',
+      category: 'Community',
+      href: '/news/community-spotlight-jan',
+      image: null,
+    },
   ]
 
   return (
@@ -105,83 +127,40 @@ export default function DashboardPage() {
             </p>
           </div>
 
-          {/* Account setup note */}
-          <div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
-            <div className="flex">
-              <div className="flex-shrink-0">
-                <UserCircleIcon className="h-5 w-5 text-blue-400" aria-hidden="true" />
-              </div>
-              <div className="ml-3">
-                <h3 className="text-sm font-medium text-blue-800">
-                  Complete your account setup
-                </h3>
-                <div className="mt-2 text-sm text-blue-700">
-                  <p>
-                    Complete your verification process to unlock all features.{' '}
-                    <button
-                      onClick={() => router.push('/quickaction-dashboard')}
-                      className="font-medium underline text-blue-800 hover:text-blue-900"
-                    >
-                      Start verification →
-                    </button>
-                  </p>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Stats Grid - Tailwind UI Plus "With brand icon" */}
-          <div className="mb-8">
-            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
-              {stats.map((stat, index) => {
-                // Define icon colors for each stat
-                const iconColors = [
-                  'bg-blue-500', // Orders
-                  'bg-red-500',  // Favorites  
-                  'bg-yellow-500', // Gold Points
-                  'bg-green-500'   // Activity
-                ];
-                
-                return (
-                  <div key={index} className="relative overflow-hidden rounded-lg bg-white px-4 pb-12 pt-5 shadow sm:px-6 sm:pt-6">
-                    <dt>
-                      <div className={`absolute rounded-md ${iconColors[index]} p-3`}>
-                        <stat.icon aria-hidden="true" className="h-6 w-6 text-white" />
-                      </div>
-                      <p className="ml-16 truncate text-sm font-medium text-gray-500">{stat.label}</p>
-                    </dt>
-                    <dd className="ml-16 flex items-baseline pb-6 sm:pb-7">
-                      <p className="text-2xl font-semibold text-gray-900">{stat.value}</p>
-                      <div className="absolute inset-x-0 bottom-0 bg-gray-50 px-4 py-4 sm:px-6">
-                        <div className="text-sm">
-                          <a href="#" className="font-medium text-[#8D6B1D] hover:text-[#7A5E1A]">
-                            View details
-                          </a>
-                        </div>
-                      </div>
-                    </dd>
-                  </div>
-                );
-              })}
-            </div>
-          </div>
-
-          {/* Referral Statistics */}
-          <div className="mb-8">
-            <h2 className="text-xl font-semibold text-gray-900 mb-4">Referral Statistics</h2>
-            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3">
-              {referralStats.map((stat, i) => (
-                <div key={i} className="relative overflow-hidden rounded-lg bg-white px-4 pb-10 pt-5 shadow sm:px-6 sm:pt-6">
-                  <dt>
-                    <div className={`absolute rounded-md ${stat.color} p-3`}>
-                      <stat.icon aria-hidden="true" className="h-6 w-6 text-white" />
+          {/* News Section (replaces Account setup + Stats Grid) */}
+          <div className="mb-10">
+            <h2 className="text-xl font-semibold text-gray-900 mb-4">Latest News & Articles</h2>
+            <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+              {news.map(item => (
+                <article key={item.id} className="group relative overflow-hidden rounded-xl bg-white border border-gray-200 shadow-sm hover:shadow-md transition-shadow">
+                  {/* Image/placeholder */}
+                  <div className="aspect-[16/9] w-full bg-gradient-to-br from-gray-100 to-gray-200" />
+                  <div className="p-5">
+                    <div className="mb-2 flex items-center gap-2">
+                      <span className="inline-flex items-center rounded-full bg-amber-50 px-2 py-0.5 text-xs font-medium text-amber-700 ring-1 ring-amber-200">
+                        {item.category}
+                      </span>
+                      <span className="text-xs text-gray-500">{new Date(item.date).toLocaleDateString()}</span>
                     </div>
-                    <p className="ml-16 truncate text-sm font-medium text-gray-500">{stat.label}</p>
-                  </dt>
-                  <dd className="ml-16 flex items-baseline pb-2">
-                    <p className="text-2xl font-semibold text-gray-900">{stat.value}</p>
-                  </dd>
-                </div>
+                    <h3 className="text-base font-semibold text-gray-900 group-hover:text-[#8D6B1D] transition-colors">
+                      <button
+                        onClick={() => (window.location.href = item.href)}
+                        className="text-left w-full"
+                      >
+                        {item.title}
+                      </button>
+                    </h3>
+                    <p className="mt-2 text-sm text-gray-600 line-clamp-3">{item.excerpt}</p>
+                    <div className="mt-4">
+                      <button
+                        onClick={() => (window.location.href = item.href)}
+                        className="text-sm font-medium text-[#8D6B1D] hover:text-[#7A5E1A]"
+                      >
+                        Read more →
+                      </button>
+                    </div>
+                  </div>
+                </article>
               ))}
             </div>
           </div>
@@ -189,7 +168,7 @@ export default function DashboardPage() {
           {/* Quick Actions */}
           <div className="mb-8">
             <h2 className="text-xl font-semibold text-gray-900 mb-4">Quick Actions</h2>
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
               {quickActions.map((action, index) => (
                 <button
                   key={index}