beatutify: adjust dashboard
This commit is contained in:
DeathKaioken
parent
bc8df1938b
commit
943079d94f
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user