fix: redesign
This commit is contained in:
@@ -2,13 +2,11 @@
|
||||
|
||||
import { useAuth } from '@/contexts/AuthContext';
|
||||
import Link from 'next/link';
|
||||
import { UsersIcon, CubeIcon, TagIcon , BellIcon, GiftIcon, PowerIcon, ShoppingBagIcon } from '@heroicons/react/24/outline';
|
||||
import { UsersIcon, CubeIcon, TagIcon, BellIcon, GiftIcon, ShoppingBagIcon } from '@heroicons/react/24/outline';
|
||||
import { MegaphoneIcon } from 'lucide-react';
|
||||
import ThemeToggle from '@/components/ThemeToggle';
|
||||
// import { BellIcon } from 'lucide-react';
|
||||
|
||||
export default function Dashboard() {
|
||||
const { user, logout } = useAuth();
|
||||
const { user } = useAuth();
|
||||
|
||||
const cards = [
|
||||
{
|
||||
@@ -16,93 +14,105 @@ export default function Dashboard() {
|
||||
title: 'مدیریت کاربران',
|
||||
desc: 'مشاهده و مدیریت کاربران، اشتراکها و تراکنشها',
|
||||
Icon: UsersIcon,
|
||||
iconWrap: 'bg-indigo-100 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-400',
|
||||
iconBg: 'bg-indigo-100 dark:bg-indigo-500/15',
|
||||
iconColor: 'text-indigo-600 dark:text-indigo-400',
|
||||
hoverBorder: 'hover:border-indigo-300 dark:hover:border-indigo-700',
|
||||
},
|
||||
{
|
||||
href: '/admin/purchases',
|
||||
title: 'خریدهای اشتراک',
|
||||
desc: 'مشاهده و فیلتر خریدها بر اساس ایمیل، موبایل، پکیج و منبع پرداخت',
|
||||
Icon: ShoppingBagIcon,
|
||||
iconWrap: 'bg-orange-100 text-orange-600 dark:bg-orange-500/15 dark:text-orange-400',
|
||||
iconBg: 'bg-orange-100 dark:bg-orange-500/15',
|
||||
iconColor: 'text-orange-600 dark:text-orange-400',
|
||||
hoverBorder: 'hover:border-orange-300 dark:hover:border-orange-700',
|
||||
},
|
||||
{
|
||||
href: '/admin/packages',
|
||||
title: 'مدیریت پکیجها',
|
||||
desc: 'ایجاد و مدیریت پکیجهای نرمافزار',
|
||||
Icon: CubeIcon,
|
||||
iconWrap: 'bg-green-100 text-green-600 dark:bg-green-500/15 dark:text-green-400',
|
||||
iconBg: 'bg-green-100 dark:bg-green-500/15',
|
||||
iconColor: 'text-green-600 dark:text-green-400',
|
||||
hoverBorder: 'hover:border-green-300 dark:hover:border-green-700',
|
||||
},
|
||||
{
|
||||
href: '/admin/products',
|
||||
title: 'مدیریت محصولات',
|
||||
desc: 'ایجاد و مدیریت محصولات و اشتراکها',
|
||||
Icon: TagIcon,
|
||||
iconWrap: 'bg-purple-100 text-purple-600 dark:bg-purple-500/15 dark:text-purple-400',
|
||||
iconBg: 'bg-purple-100 dark:bg-purple-500/15',
|
||||
iconColor: 'text-purple-600 dark:text-purple-400',
|
||||
hoverBorder: 'hover:border-purple-300 dark:hover:border-purple-700',
|
||||
},
|
||||
{
|
||||
href: '/admin/reminders',
|
||||
title: 'مدیریت یادآوریها',
|
||||
desc: 'ایجاد و مدیریت یادآوریها و پیامهای انگیزشی',
|
||||
Icon: BellIcon,
|
||||
iconWrap: 'bg-yellow-100 text-yellow-600 dark:bg-yellow-500/15 dark:text-yellow-400',
|
||||
iconBg: 'bg-yellow-100 dark:bg-yellow-500/15',
|
||||
iconColor: 'text-yellow-600 dark:text-yellow-400',
|
||||
hoverBorder: 'hover:border-yellow-300 dark:hover:border-yellow-700',
|
||||
},
|
||||
{
|
||||
href: '/admin/promotions',
|
||||
title: 'مدیریت تبلیغات',
|
||||
desc: 'ایجاد و مدیریت تبلیغات، بنرها و اسلایدرها',
|
||||
Icon: MegaphoneIcon,
|
||||
iconWrap: 'bg-pink-100 text-pink-600 dark:bg-pink-500/15 dark:text-pink-400',
|
||||
iconBg: 'bg-pink-100 dark:bg-pink-500/15',
|
||||
iconColor: 'text-pink-600 dark:text-pink-400',
|
||||
hoverBorder: 'hover:border-pink-300 dark:hover:border-pink-700',
|
||||
},
|
||||
{
|
||||
href: '/admin/referral-rewards',
|
||||
title: 'پاداشهای معرفی',
|
||||
desc: 'اعطای اشتراک رایگان به کاربران واجد شرایط دعوت',
|
||||
Icon: GiftIcon,
|
||||
iconWrap: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400',
|
||||
iconBg: 'bg-emerald-100 dark:bg-emerald-500/15',
|
||||
iconColor: 'text-emerald-600 dark:text-emerald-400',
|
||||
hoverBorder: 'hover:border-emerald-300 dark:hover:border-emerald-700',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-8">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 p-6">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
|
||||
داشبورد
|
||||
{/* Welcome Section */}
|
||||
<div className="mb-8">
|
||||
<div className="bg-gradient-to-l from-indigo-600 to-indigo-700 rounded-2xl p-6 sm:p-8 text-white shadow-lg shadow-indigo-500/20">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold">
|
||||
خوش آمدید
|
||||
</h1>
|
||||
<div className="flex items-center gap-2">
|
||||
<ThemeToggle withLabel />
|
||||
<button
|
||||
onClick={logout}
|
||||
className="inline-flex items-center gap-2 px-4 py-2 bg-red-600 text-white rounded-lg hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 transition-colors"
|
||||
>
|
||||
<PowerIcon className="h-5 w-5" />
|
||||
خروج
|
||||
</button>
|
||||
</div>
|
||||
<p className="mt-1 text-indigo-100 text-sm sm:text-base">
|
||||
{user?.email}
|
||||
</p>
|
||||
<p className="mt-3 text-indigo-200 text-sm">
|
||||
یکی از بخشهای زیر را برای مدیریت انتخاب کنید
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200 dark:border-gray-800 pt-6">
|
||||
<h2 className="text-lg font-semibold mb-1 text-gray-900 dark:text-gray-100">خوش آمدید، {user?.email}</h2>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mb-6">یکی از بخشهای زیر را برای مدیریت انتخاب کنید.</p>
|
||||
|
||||
{/* Dashboard Cards */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
|
||||
{cards.map(({ href, title, desc, Icon, iconWrap }) => (
|
||||
<Link key={href} href={href} className="block group">
|
||||
<div className="h-full bg-white dark:bg-gray-900 rounded-xl p-6 ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm hover:shadow-md hover:ring-indigo-300 dark:hover:ring-indigo-700 hover:-translate-y-0.5 transition-all duration-200">
|
||||
<div className={`inline-flex h-12 w-12 items-center justify-center rounded-xl mb-4 ${iconWrap}`}>
|
||||
<Icon className="h-6 w-6" />
|
||||
</div>
|
||||
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">{title}</h3>
|
||||
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
||||
{desc}
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{/* Dashboard Cards */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{cards.map(({ href, title, desc, Icon, iconBg, iconColor, hoverBorder }) => (
|
||||
<Link key={href} href={href} className="block group">
|
||||
<div className={`h-full bg-white dark:bg-gray-900 rounded-2xl p-5 ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm hover:shadow-md ${hoverBorder} hover:-translate-y-0.5 transition-all duration-200`}>
|
||||
<div className={`inline-flex h-11 w-11 items-center justify-center rounded-xl mb-3 ${iconBg}`}>
|
||||
<Icon className={`h-5.5 w-5.5 ${iconColor}`} />
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">{title}</h3>
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1.5 leading-relaxed">
|
||||
{desc}
|
||||
</p>
|
||||
<div className="mt-4 flex items-center text-xs font-medium text-indigo-600 dark:text-indigo-400 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
ورود به بخش
|
||||
<svg className="h-4 w-4 mr-1 rotate-180" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user