From 696174bbc4d5ea111de675d53c20e88a5f2c58fa Mon Sep 17 00:00:00 2001
From: DeathKaioken <alex.ibrahim@eitk.com>
Date: Sat, 4 Oct 2025 00:08:09 +0200
Subject: [PATCH] feature: add referral statistic to dashboard

---
 src/app/dashboard/page.tsx | 30 +++++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index 8cce8dc..757b894 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -11,7 +11,8 @@ import {
   UserCircleIcon,
   StarIcon,
   ChartBarIcon,
-  HeartIcon 
+  HeartIcon,
+  BuildingOffice2Icon            // <-- added
 } from '@heroicons/react/24/outline'
 
 export default function DashboardPage() {
@@ -80,6 +81,13 @@ export default function DashboardPage() {
     { 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' },
+  ]
+
   return (
     <div className="min-h-screen flex flex-col bg-gray-50">
       <Header />
@@ -132,6 +140,26 @@ export default function DashboardPage() {
             </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" />
+                    </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>
+              ))}
+            </div>
+          </div>
+
           {/* Quick Actions */}
           <div className="mb-8">
             <h2 className="text-xl font-semibold text-gray-900 mb-4">Quick Actions</h2>