beatutify: adjust dashboard
This commit is contained in:
DeathKaioken
parent
bc8df1938b
commit
943079d94f
@ -10,9 +10,8 @@ import {
|
|||||||
UsersIcon,
|
UsersIcon,
|
||||||
UserCircleIcon,
|
UserCircleIcon,
|
||||||
StarIcon,
|
StarIcon,
|
||||||
ChartBarIcon,
|
|
||||||
HeartIcon,
|
HeartIcon,
|
||||||
BuildingOffice2Icon // <-- added
|
LinkIcon
|
||||||
} from '@heroicons/react/24/outline'
|
} from '@heroicons/react/24/outline'
|
||||||
|
|
||||||
export default function DashboardPage() {
|
export default function DashboardPage() {
|
||||||
@ -59,11 +58,18 @@ export default function DashboardPage() {
|
|||||||
color: 'bg-blue-500'
|
color: 'bg-blue-500'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Join Community',
|
title: 'Browse Affiliate Links',
|
||||||
description: 'Connect with like-minded people',
|
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,
|
icon: UsersIcon,
|
||||||
href: '/community',
|
href: '/referral-management',
|
||||||
color: 'bg-green-500'
|
color: 'bg-amber-600'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: 'Edit Profile',
|
title: 'Edit Profile',
|
||||||
@ -74,19 +80,35 @@ export default function DashboardPage() {
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
// Stats (mock data for now)
|
// New: Latest news/articles (replace stats)
|
||||||
const stats = [
|
const news = [
|
||||||
{ label: 'Orders', value: '12', icon: ShoppingBagIcon },
|
{
|
||||||
{ label: 'Favorites', value: '8', icon: HeartIcon },
|
id: 'n1',
|
||||||
{ label: 'Gold Points', value: '250', icon: StarIcon },
|
title: 'Profit Planet launches Referral Management',
|
||||||
{ label: 'Activity', value: '15', icon: ChartBarIcon }
|
excerpt: 'Create, track, and manage your referral links with real‑time usage and status.',
|
||||||
]
|
date: '2025-01-08',
|
||||||
|
category: 'Product Update',
|
||||||
// Referral statistics (mock values)
|
href: '/news/referral-management',
|
||||||
const referralStats = [
|
image: null as string | null,
|
||||||
{ 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' },
|
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 (
|
return (
|
||||||
@ -105,83 +127,40 @@ export default function DashboardPage() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Account setup note */}
|
{/* News Section (replaces Account setup + Stats Grid) */}
|
||||||
<div className="mb-8 bg-blue-50 border border-blue-200 rounded-lg p-4">
|
<div className="mb-10">
|
||||||
<div className="flex">
|
<h2 className="text-xl font-semibold text-gray-900 mb-4">Latest News & Articles</h2>
|
||||||
<div className="flex-shrink-0">
|
<div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
||||||
<UserCircleIcon className="h-5 w-5 text-blue-400" aria-hidden="true" />
|
{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>
|
</div>
|
||||||
<div className="ml-3">
|
<h3 className="text-base font-semibold text-gray-900 group-hover:text-[#8D6B1D] transition-colors">
|
||||||
<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
|
<button
|
||||||
onClick={() => router.push('/quickaction-dashboard')}
|
onClick={() => (window.location.href = item.href)}
|
||||||
className="font-medium underline text-blue-800 hover:text-blue-900"
|
className="text-left w-full"
|
||||||
>
|
>
|
||||||
Start verification →
|
{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>
|
</button>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</article>
|
||||||
</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" />
|
|
||||||
</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>
|
||||||
</div>
|
</div>
|
||||||
@ -189,7 +168,7 @@ export default function DashboardPage() {
|
|||||||
{/* Quick Actions */}
|
{/* Quick Actions */}
|
||||||
<div className="mb-8">
|
<div className="mb-8">
|
||||||
<h2 className="text-xl font-semibold text-gray-900 mb-4">Quick Actions</h2>
|
<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) => (
|
{quickActions.map((action, index) => (
|
||||||
<button
|
<button
|
||||||
key={index}
|
key={index}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user