Amirmahdi/approagency-admin-panel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: redesign

Browse Source
This commit is contained in:
Amirmahdi
2026-07-10 16:01:27 +03:30
parent 05262b7636
commit a447222201
31 changed files with 1426 additions and 1738 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/admin/dashboard/page.tsx
+56 -46
View File
@@ -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>
app/admin/layout.tsx
+20 -5
View File
@@ -1,19 +1,34 @@
'use client';
import { AuthProvider } from '@/contexts/AuthContext';
import ThemeToggle from '@/components/ThemeToggle';
import AuthGuard from '@/components/AuthGuard';
import Sidebar from '@/components/admin/Sidebar';
import ToastContainer from '@/components/Toast';
import { usePathname } from 'next/navigation';
export default function AdminLayout({
children,
}: {
children: React.ReactNode;
}) {
const pathname = usePathname();
const isLogin = pathname === '/admin/login' || pathname === '/admin/login/';
return (
<AuthProvider>
<div className="min-h-screen bg-gray-100 dark:bg-gray-950">
{children}
<ThemeToggle floating />
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
<ToastContainer />
{isLogin ? (
children
) : (
<AuthGuard>
<Sidebar />
<main className="lg:pr-64 min-h-screen">
{children}
</main>
</AuthGuard>
)}
</div>
</AuthProvider>
);
}
}
app/admin/login/page.tsx
+33 -21
View File
@@ -1,9 +1,8 @@
'use client';
import { useState } from 'react';
import { useState, useEffect } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';
import { LockClosedIcon } from '@heroicons/react/24/outline';
export default function LoginPage() {
@@ -25,7 +24,7 @@ export default function LoginPage() {
setLocalError('');
if (!auth || !password) {
setLocalError('Please fill in all fields');
setLocalError('لطفاً همه فیلدها را پر کنید');
return;
}
@@ -37,33 +36,39 @@ export default function LoginPage() {
};
return (
<div className="min-h-screen flex items-center justify-center bg-gray-100 dark:bg-gray-950 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full">
<div className="bg-white dark:bg-gray-900 rounded-2xl shadow-xl ring-1 ring-gray-200 dark:ring-gray-800 p-8 space-y-8">
<div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-50 via-indigo-50/30 to-gray-100 dark:from-gray-950 dark:via-indigo-950/20 dark:to-gray-950 py-12 px-4 sm:px-6 lg:px-8">
{/* Decorative background */}
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -top-40 -right-40 w-80 h-80 bg-indigo-100 dark:bg-indigo-500/10 rounded-full blur-3xl opacity-60" />
<div className="absolute -bottom-40 -left-40 w-80 h-80 bg-indigo-100 dark:bg-indigo-500/10 rounded-full blur-3xl opacity-40" />
</div>
<div className="relative max-w-md w-full">
<div className="bg-white/80 dark:bg-gray-900/80 backdrop-blur-xl rounded-3xl shadow-xl shadow-gray-200/50 dark:shadow-black/30 ring-1 ring-gray-200/60 dark:ring-gray-800/60 p-8 space-y-8">
<div>
<div className="mx-auto h-14 w-14 rounded-2xl bg-indigo-600 flex items-center justify-center mb-4">
<LockClosedIcon className="h-7 w-7 text-white" />
<div className="mx-auto h-16 w-16 rounded-2xl bg-gradient-to-br from-indigo-500 to-indigo-700 flex items-center justify-center mb-5 shadow-lg shadow-indigo-500/30">
<LockClosedIcon className="h-8 w-8 text-white" />
</div>
<h2 className="text-center text-2xl font-bold text-gray-900 dark:text-gray-100">
پنل ادمین اپروایجنسی
پنل ادمین
</h2>
<p className="mt-2 text-center text-sm text-gray-500 dark:text-gray-400">
برای ادامه وارد حساب کاربری خود شوید
اپروایجنسی
</p>
</div>
<form className="space-y-5" onSubmit={handleSubmit}>
<div className="space-y-4">
<div>
<label htmlFor="auth" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
ایمیل
<label htmlFor="auth" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
ایمیل یا نام کاربری
</label>
<input
id="auth"
name="auth"
type="text"
required
className="appearance-none relative block w-full px-3 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
className="block w-full px-4 py-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/80 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm transition-all duration-150 shadow-sm"
placeholder="example@email.com"
value={auth}
onChange={(e) => setAuth(e.target.value)}
@@ -72,7 +77,7 @@ export default function LoginPage() {
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
<label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5">
رمز عبور
</label>
<input
@@ -80,7 +85,7 @@ export default function LoginPage() {
name="password"
type="password"
required
className="appearance-none relative block w-full px-3 py-3 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
className="block w-full px-4 py-3 border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/80 placeholder-gray-400 dark:placeholder-gray-500 text-gray-900 dark:text-gray-100 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm transition-all duration-150 shadow-sm"
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
@@ -91,10 +96,10 @@ export default function LoginPage() {
</div>
{(error || localError) && (
<div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4">
<h3 className="text-sm font-medium text-red-800 dark:text-red-300 text-center">
<div className="rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4">
<p className="text-sm font-medium text-red-700 dark:text-red-300 text-center">
{localError || error}
</h3>
</p>
</div>
)}
@@ -102,9 +107,16 @@ export default function LoginPage() {
<button
type="submit"
disabled={isLoading}
className="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-lg text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
className="relative w-full flex justify-center items-center py-3 px-4 border border-transparent text-sm font-semibold rounded-xl text-white bg-gradient-to-l from-indigo-600 to-indigo-700 hover:from-indigo-700 hover:to-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-indigo-500/25 hover:shadow-xl hover:shadow-indigo-500/30 transition-all duration-150"
>
{isLoading ? 'کمی صبر کنید...' : 'ورود'}
{isLoading ? (
<div className="flex items-center gap-2">
<div className="h-4 w-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />
کمی صبر کنید...
</div>
) : (
'ورود'
)}
</button>
</div>
</form>
@@ -112,4 +124,4 @@ export default function LoginPage() {
</div>
</div>
);
}
}
app/admin/packages/page.tsx
+28 -36
View File
@@ -5,6 +5,8 @@ import { useAuth } from '@/contexts/AuthContext';
import { packagesApi } from '@/lib/api/packages';
import PackageList from '@/components/admin/packages/PackageList';
import PackageForm from '@/components/admin/packages/PackageForm';
import PageHeader from '@/components/admin/PageHeader';
import { showToast } from '@/components/Toast';
import { PackageName, CreatePackageData, UpdatePackageData } from '@/types/package';
import { PlusIcon } from '@heroicons/react/24/outline';
@@ -15,9 +17,7 @@ export default function PackagesPage() {
const [isLoading, setIsLoading] = useState(false);
const [isFormVisible, setIsFormVisible] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | null>(null);
// Load packages on mount
useEffect(() => {
if (token) {
loadPackages();
@@ -54,11 +54,10 @@ export default function PackagesPage() {
setIsLoading(true);
setError(null);
setSuccess(null);
try {
await packagesApi.deletePackage(pkg.name!, token!);
setSuccess('پکیج با موفقیت حذف شد');
showToast('success', 'پکیج با موفقیت حذف شد');
await loadPackages();
} catch (err) {
setError(err instanceof Error ? err.message : 'خطا در حذف پکیج');
@@ -70,17 +69,14 @@ export default function PackagesPage() {
const handleSubmit = async (data: CreatePackageData | UpdatePackageData) => {
setIsLoading(true);
setError(null);
setSuccess(null);
try {
if (selectedPackage) {
// Update existing package
await packagesApi.updatePackage(selectedPackage.name!, data, token!);
setSuccess('پکیج با موفقیت به‌روزرسانی شد');
showToast('success', 'پکیج با موفقیت به‌روزرسانی شد');
} else {
// Create new package
await packagesApi.createPackage(data as CreatePackageData, token!);
setSuccess('پکیج با موفقیت ایجاد شد');
showToast('success', 'پکیج با موفقیت ایجاد شد');
}
await loadPackages();
@@ -97,41 +93,37 @@ export default function PackagesPage() {
setIsFormVisible(false);
setSelectedPackage(null);
setError(null);
setSuccess(null);
};
return (
<div className="p-6">
<div className="p-4 sm:p-8">
<div className="max-w-7xl mx-auto">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
مدیریت پکیج‌ها
</h1>
{!isFormVisible && (
<button
onClick={handleCreate}
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors"
>
<PlusIcon className="h-5 w-5 ml-2" />
پکیج جدید
</button>
)}
</div>
<PageHeader
title="مدیریت پکیج‌ها"
action={
!isFormVisible ? (
<button
onClick={handleCreate}
className="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors shadow-sm shadow-indigo-500/20"
>
<PlusIcon className="h-4 w-4" />
پکیج جدید
</button>
) : undefined
}
/>
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
<p className="text-sm text-red-800 dark:text-red-300">{error}</p>
<div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
<p className="text-sm text-red-700 dark:text-red-300">{error}</p>
<button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
)}
{success && (
<div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
<p className="text-sm text-green-800 dark:text-green-300">{success}</p>
</div>
)}
{/* Form or List */}
{isFormVisible ? (
<PackageForm
package={selectedPackage}
@@ -150,4 +142,4 @@ export default function PackagesPage() {
</div>
</div>
);
}
}
app/admin/products/page.tsx
+21 -42
View File
@@ -6,6 +6,8 @@ import { packagesApi } from '@/lib/api/packages';
import { productsApi } from '@/lib/api/products';
import ProductList from '@/components/admin/products/ProductList';
import ProductForm from '@/components/admin/products/ProductForm';
import PageHeader from '@/components/admin/PageHeader';
import { showToast } from '@/components/Toast';
import { PackageName } from '@/types/package';
import { Product, CreateProductData, UpdateProductData } from '@/types/product';
import { PlusIcon } from '@heroicons/react/24/outline';
@@ -20,13 +22,10 @@ export default function ProductsPage() {
const [isLoadingPackages, setIsLoadingPackages] = useState(false);
const [isFormVisible, setIsFormVisible] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | null>(null);
// Use refs to track initial loads and prevent duplicate calls
const initialLoadRef = useRef(false);
const prevPackageRef = useRef<string | null>(null);
// Load packages on mount - only once
useEffect(() => {
if (token && !initialLoadRef.current) {
initialLoadRef.current = true;
@@ -51,9 +50,7 @@ export default function ProductsPage() {
};
const loadProducts = useCallback(async (packageName: string, force = false) => {
// Prevent duplicate loads of the same package
if (!force && prevPackageRef.current === packageName) {
console.log('Skipping duplicate load for package:', packageName);
return;
}
@@ -62,7 +59,6 @@ export default function ProductsPage() {
prevPackageRef.current = packageName;
try {
console.log('Loading products for package:', packageName);
const data = await productsApi.getProducts(packageName, token!);
setProducts(data);
} catch (err) {
@@ -72,7 +68,6 @@ export default function ProductsPage() {
}
}, [token]);
// Load products when package changes - with proper dependency
useEffect(() => {
if (selectedPackage?.name && token) {
loadProducts(selectedPackage.name);
@@ -87,7 +82,6 @@ export default function ProductsPage() {
setIsFormVisible(false);
setSelectedProduct(null);
setError(null);
setSuccess(null);
};
const handleCreate = () => {
@@ -102,21 +96,18 @@ export default function ProductsPage() {
const handleDelete = async (product: Product) => {
if (!selectedPackage) return;
if (!confirm(`آیا از حذف محصول "${product.title}" اطمینان دارید؟`)) {
return;
}
setIsLoading(true);
setError(null);
setSuccess(null);
try {
await productsApi.deleteProduct(selectedPackage.name!, product.id, token!);
setSuccess('محصول با موفقیت حذف شد');
// Force reload products after delete
showToast('success', 'محصول با موفقیت حذف شد');
if (selectedPackage.name) {
prevPackageRef.current = null; // Reset ref to force load
prevPackageRef.current = null;
await loadProducts(selectedPackage.name, true);
}
} catch (err) {
@@ -131,22 +122,18 @@ export default function ProductsPage() {
setIsLoading(true);
setError(null);
setSuccess(null);
try {
if (selectedProduct) {
// Update existing product
await productsApi.updateProduct(selectedPackage.name!, selectedProduct.id, data, token!);
setSuccess('محصول با موفقیت به‌روزرسانی شد');
showToast('success', 'محصول با موفقیت به‌روزرسانی شد');
} else {
// Create new product
await productsApi.createProduct(selectedPackage.name!, data as CreateProductData, token!);
setSuccess('محصول با موفقیت ایجاد شد');
showToast('success', 'محصول با موفقیت ایجاد شد');
}
// Force reload products after create/update
if (selectedPackage.name) {
prevPackageRef.current = null; // Reset ref to force load
prevPackageRef.current = null;
await loadProducts(selectedPackage.name, true);
}
@@ -163,20 +150,15 @@ export default function ProductsPage() {
setIsFormVisible(false);
setSelectedProduct(null);
setError(null);
setSuccess(null);
};
return (
<div className="p-6">
<div className="p-4 sm:p-8">
<div className="max-w-7xl mx-auto">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
مدیریت محصولات
</h1>
</div>
<PageHeader title="مدیریت محصولات" />
{/* Package Selector */}
<div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow mb-6">
<div className="bg-white dark:bg-gray-900 p-4 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm mb-6">
<label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
انتخاب پکیج
</label>
@@ -185,7 +167,7 @@ export default function ProductsPage() {
value={selectedPackage?.name || ''}
onChange={handlePackageChange}
disabled={isLoadingPackages}
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
className="block w-full px-3 py-2.5 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm disabled:opacity-50 dark:bg-gray-800/80 transition-colors"
>
{isLoadingPackages ? (
<option>در حال بارگذاری پکیج‌ها...</option>
@@ -199,20 +181,17 @@ export default function ProductsPage() {
</select>
</div>
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
<p className="text-sm text-red-800 dark:text-red-300">{error}</p>
<div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
<p className="text-sm text-red-700 dark:text-red-300">{error}</p>
<button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
)}
{success && (
<div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
<p className="text-sm text-green-800 dark:text-green-300">{success}</p>
</div>
)}
{/* Form or List */}
{selectedPackage && (
<>
{!isFormVisible && (
@@ -220,9 +199,9 @@ export default function ProductsPage() {
<button
onClick={handleCreate}
disabled={isLoading}
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
className="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
>
<PlusIcon className="h-5 w-5 ml-2" />
<PlusIcon className="h-4 w-4" />
محصول جدید
</button>
</div>
@@ -250,4 +229,4 @@ export default function ProductsPage() {
</div>
</div>
);
}
}
app/admin/promotions/page.tsx
+31 -40
View File
@@ -5,6 +5,8 @@ import { useAuth } from '@/contexts/AuthContext';
import { promotionsApi } from '@/lib/api/promotions';
import PromotionList from '@/components/admin/promotions/PromotionList';
import PromotionForm from '@/components/admin/promotions/PromotionForm';
import PageHeader from '@/components/admin/PageHeader';
import { showToast } from '@/components/Toast';
import { Promotion, CreatePromotionData, UpdatePromotionData } from '@/types/promotion';
import { PlusIcon } from '@heroicons/react/24/outline';
@@ -15,11 +17,9 @@ export default function PromotionsPage() {
const [isLoading, setIsLoading] = useState(false);
const [isFormVisible, setIsFormVisible] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | null>(null);
const initialLoadRef = useRef(false);
// Load promotions on mount
useEffect(() => {
if (token && !initialLoadRef.current) {
initialLoadRef.current = true;
@@ -57,11 +57,10 @@ export default function PromotionsPage() {
setIsLoading(true);
setError(null);
setSuccess(null);
try {
await promotionsApi.deletePromotion(promotion.id, token!);
setSuccess('تبلیغ با موفقیت حذف شد');
showToast('success', 'تبلیغ با موفقیت حذف شد');
await loadPromotions();
} catch (err) {
setError(err instanceof Error ? err.message : 'خطا در حذف تبلیغ');
@@ -73,11 +72,10 @@ export default function PromotionsPage() {
const handleToggleActive = async (promotion: Promotion) => {
setIsLoading(true);
setError(null);
setSuccess(null);
try {
await promotionsApi.toggleActive(promotion.id, !promotion.is_active, token!);
setSuccess(`تبلیغ با موفقیت ${!promotion.is_active ? 'فعال' : 'غیرفعال'} شد`);
showToast('success', `تبلیغ با موفقیت ${!promotion.is_active ? 'فعال' : 'غیرفعال'} شد`);
await loadPromotions();
} catch (err) {
setError(err instanceof Error ? err.message : 'خطا در تغییر وضعیت تبلیغ');
@@ -89,17 +87,14 @@ export default function PromotionsPage() {
const handleSubmit = async (data: CreatePromotionData | UpdatePromotionData) => {
setIsLoading(true);
setError(null);
setSuccess(null);
try {
if (selectedPromotion) {
// Update existing promotion
await promotionsApi.updatePromotion(selectedPromotion.id, data, token!);
setSuccess('تبلیغ با موفقیت به‌روزرسانی شد');
showToast('success', 'تبلیغ با موفقیت به‌روزرسانی شد');
} else {
// Create new promotion
await promotionsApi.createPromotion(data as CreatePromotionData, token!);
setSuccess('تبلیغ با موفقیت ایجاد شد');
showToast('success', 'تبلیغ با موفقیت ایجاد شد');
}
await loadPromotions();
@@ -116,42 +111,38 @@ export default function PromotionsPage() {
setIsFormVisible(false);
setSelectedPromotion(null);
setError(null);
setSuccess(null);
};
return (
<div className="p-6">
<div className="p-4 sm:p-8">
<div className="max-w-7xl mx-auto">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
مدیریت تبلیغات
</h1>
{!isFormVisible && (
<button
onClick={handleCreate}
disabled={isLoading}
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
>
<PlusIcon className="h-5 w-5 ml-2" />
تبلیغ جدید
</button>
)}
</div>
<PageHeader
title="مدیریت تبلیغات"
action={
!isFormVisible ? (
<button
onClick={handleCreate}
disabled={isLoading}
className="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
>
<PlusIcon className="h-4 w-4" />
تبلیغ جدید
</button>
) : undefined
}
/>
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
<p className="text-sm text-red-800 dark:text-red-300">{error}</p>
<div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
<p className="text-sm text-red-700 dark:text-red-300">{error}</p>
<button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
)}
{success && (
<div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
<p className="text-sm text-green-800 dark:text-green-300">{success}</p>
</div>
)}
{/* Form or List */}
{isFormVisible ? (
<PromotionForm
promotion={selectedPromotion}
@@ -171,4 +162,4 @@ export default function PromotionsPage() {
</div>
</div>
);
}
}
app/admin/purchases/page.tsx
+45 -47
View File
@@ -1,10 +1,10 @@
'use client';
import { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { useAuth } from '@/contexts/AuthContext';
import { purchasesApi } from '@/lib/api/purchases';
import { packagesApi } from '@/lib/api/packages';
import PageHeader from '@/components/admin/PageHeader';
import {
Purchase,
Paginated,
@@ -16,15 +16,15 @@ import {
} from '@/types/purchase';
import { PackageName } from '@/types/package';
import { formatPrice, formatDate, getProductTypeLabel } from '@/lib/utils';
import { ArrowRightIcon, MagnifyingGlassIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
import { MagnifyingGlassIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
const statusBadgeClass = (status: number): string => {
switch (status) {
case 2: // موفق
case 2:
return 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300';
case 3: // مصرف‌شده
case 3:
return 'bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300';
default: // در انتظار
default:
return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300';
}
};
@@ -63,7 +63,6 @@ export default function PurchasesPage() {
}
}, [token]);
// Load package list (for the filter dropdown) and the first page
useEffect(() => {
if (!token) return;
packagesApi.getAllPackages(token).then(setPackages).catch(() => setPackages([]));
@@ -96,31 +95,20 @@ export default function PurchasesPage() {
};
const inputClass =
'block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors';
const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1';
'block w-full px-3 py-2.5 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm dark:bg-gray-800/80 transition-colors';
const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
return (
<div className="p-6">
<div className="p-4 sm:p-8">
<div className="max-w-7xl mx-auto">
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
خریدهای اشتراک
</h1>
<Link
href="/admin/dashboard"
className="inline-flex items-center gap-1 text-sm text-indigo-600 dark:text-indigo-400 hover:text-indigo-800"
>
<ArrowRightIcon className="h-4 w-4" />
بازگشت به داشبورد
</Link>
</div>
<PageHeader title="خریدهای اشتراک" />
{/* Filters */}
<form
onSubmit={handleSearch}
className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 rounded-xl p-4 sm:p-6 mb-6"
className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl p-5 sm:p-6 mb-6 shadow-sm"
>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-5">
<div>
<label htmlFor="email" className={labelClass}>ایمیل</label>
<input type="text" id="email" name="email" value={filters.email || ''} onChange={handleInputChange} className={inputClass} placeholder="example@mail.com" dir="ltr" />
@@ -160,36 +148,41 @@ export default function PurchasesPage() {
</div>
</div>
<div className="flex items-center gap-3 mt-4">
<div className="flex items-center gap-3 mt-5">
<button
type="submit"
disabled={isLoading}
className="inline-flex items-center gap-2 px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
className="inline-flex items-center gap-2 px-5 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
>
<MagnifyingGlassIcon className="h-5 w-5" />
<MagnifyingGlassIcon className="h-4 w-4" />
جستجو
</button>
<button
type="button"
onClick={handleReset}
disabled={isLoading}
className="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
className="inline-flex items-center gap-2 px-5 py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm"
>
<ArrowPathIcon className="h-5 w-5" />
<ArrowPathIcon className="h-4 w-4" />
پاک کردن فیلترها
</button>
</div>
</form>
{error && (
<div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
<p className="text-sm text-red-800 dark:text-red-300">{error}</p>
<div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
<p className="text-sm text-red-700 dark:text-red-300">{error}</p>
<button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
)}
{/* Results */}
<div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 rounded-xl overflow-hidden">
<div className="px-4 py-4 sm:px-6 flex items-center justify-between border-b border-gray-200 dark:border-gray-800">
<div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
<div className="px-5 py-4 flex items-center justify-between border-b border-gray-200 dark:border-gray-800">
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">
{result ? `${formatPrice(result.total)} خرید یافت شد` : 'در حال بارگذاری...'}
</h3>
@@ -197,11 +190,16 @@ export default function PurchasesPage() {
{isLoading ? (
<div className="flex justify-center items-center py-16">
<div className="animate-spin rounded-full h-10 w-10 border-b-2 border-indigo-600"></div>
<div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
</div>
) : !result || result.data.length === 0 ? (
<div className="text-center py-16">
<p className="text-gray-500 dark:text-gray-400">هیچ خریدی با این فیلترها یافت نشد</p>
<div className="mx-auto h-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
<svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121 0 2.09-.773 2.34-1.872l1.836-8.046A1.125 1.125 0 0 0 18.054 3H5.106m2.394 11.25-1.5-6h13.5" />
</svg>
</div>
<p className="text-gray-500 dark:text-gray-400 text-sm">هیچ خریدی با این فیلترها یافت نشد</p>
</div>
) : (
<div className="overflow-x-auto">
@@ -219,8 +217,8 @@ export default function PurchasesPage() {
</thead>
<tbody className="divide-y divide-gray-200 dark:divide-gray-800">
{result.data.map((purchase) => (
<tr key={purchase.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors">
<td className="px-4 py-3">
<tr key={purchase.id} className="hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
<td className="px-4 py-3.5">
<div className="text-sm font-medium text-gray-900 dark:text-gray-100">
{purchase.user?.full_name?.trim() || 'بدون نام'}
</div>
@@ -231,10 +229,10 @@ export default function PurchasesPage() {
{purchase.user?.mobile || '—'}
</div>
</td>
<td className="px-4 py-3 text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap">
<td className="px-4 py-3.5 text-sm text-gray-700 dark:text-gray-300 whitespace-nowrap">
{purchase.product?.package_name?.title || purchase.product?.package_name?.name || '—'}
</td>
<td className="px-4 py-3 whitespace-nowrap">
<td className="px-4 py-3.5 whitespace-nowrap">
<div className="text-sm text-gray-900 dark:text-gray-100">
{purchase.product?.title || '—'}
</div>
@@ -242,20 +240,20 @@ export default function PurchasesPage() {
{purchase.product ? getProductTypeLabel(purchase.product.type) : ''}
</div>
</td>
<td className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap">
<td className="px-4 py-3.5 text-sm text-gray-900 dark:text-gray-100 whitespace-nowrap font-medium">
{formatPrice(purchase.amount)} تومان
</td>
<td className="px-4 py-3 whitespace-nowrap">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300">
<td className="px-4 py-3.5 whitespace-nowrap">
<span className="px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-lg bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300">
{getGatewayLabel(purchase.gateway)}
</span>
</td>
<td className="px-4 py-3 whitespace-nowrap">
<span className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${statusBadgeClass(purchase.status)}`}>
<td className="px-4 py-3.5 whitespace-nowrap">
<span className={`px-2.5 py-1 inline-flex text-xs leading-5 font-semibold rounded-lg ${statusBadgeClass(purchase.status)}`}>
{getPurchaseStatusLabel(purchase.status)}
</span>
</td>
<td className="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
<td className="px-4 py-3.5 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
{formatDate(purchase.created_at)}
</td>
</tr>
@@ -267,11 +265,11 @@ export default function PurchasesPage() {
{/* Pagination */}
{result && result.last_page > 1 && (
<div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 dark:border-gray-800">
<div className="flex items-center justify-between px-5 py-3.5 border-t border-gray-200 dark:border-gray-800">
<button
onClick={() => goToPage(page - 1)}
disabled={page <= 1 || isLoading}
className="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
className="px-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
>
قبلی
</button>
@@ -281,7 +279,7 @@ export default function PurchasesPage() {
<button
onClick={() => goToPage(page + 1)}
disabled={page >= result.last_page || isLoading}
className="px-3 py-1.5 text-sm border border-gray-300 dark:border-gray-600 rounded-md text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
className="px-4 py-2 text-sm border border-gray-200 dark:border-gray-700 rounded-xl text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
>
بعدی
</button>
app/admin/referral-rewards/page.tsx
+28 -34
View File
@@ -4,6 +4,8 @@ import { useState, useEffect, useRef } from 'react';
import { useAuth } from '@/contexts/AuthContext';
import { referralApi } from '@/lib/api/referral';
import ReferralList from '@/components/admin/referral/ReferralList';
import PageHeader from '@/components/admin/PageHeader';
import { showToast } from '@/components/Toast';
import { ReferralRewardUser } from '@/types/referral';
import { ArrowPathIcon } from '@heroicons/react/24/outline';
@@ -14,7 +16,6 @@ export default function ReferralRewardsPage() {
const [isLoading, setIsLoading] = useState(false);
const [fulfillingId, setFulfillingId] = useState<number | null>(null);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | null>(null);
const initialLoadRef = useRef(false);
@@ -47,12 +48,10 @@ export default function ReferralRewardsPage() {
setFulfillingId(user.id);
setIsLoading(true);
setError(null);
setSuccess(null);
try {
await referralApi.fulfillReward(user.id, token!);
setSuccess(`اشتراک رایگان با موفقیت به «${user.name || user.mobile || user.email}» اعطا شد`);
// Remove the fulfilled user from the list and refresh
showToast('success', `اشتراک رایگان با موفقیت به «${user.name || user.mobile || user.email}» اعطا شد`);
setUsers((prev) => prev.filter((u) => u.id !== user.id));
} catch (err) {
setError(err instanceof Error ? err.message : 'خطا در اعطای اشتراک رایگان');
@@ -63,43 +62,38 @@ export default function ReferralRewardsPage() {
};
return (
<div className="p-6">
<div className="p-4 sm:p-8">
<div className="max-w-7xl mx-auto">
<div className="flex justify-between items-center mb-6">
<div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
پاداش‌های معرفی
</h1>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
کاربرانی که به حد نصاب دعوت موفق رسیده‌اند و هنوز اشتراک رایگان دریافت نکرده‌اند.
</p>
</div>
<button
onClick={loadRewards}
disabled={isLoading}
className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
>
<ArrowPathIcon className={`h-5 w-5 ml-2 ${isLoading ? 'animate-spin' : ''}`} />
بروزرسانی
</button>
</div>
<PageHeader
title="پاداش‌های معرفی"
subtitle="کاربرانی که به حد نصاب دعوت موفق رسیده‌اند و هنوز اشتراک رایگان دریافت نکرده‌اند."
action={
<button
onClick={loadRewards}
disabled={isLoading}
className="inline-flex items-center gap-2 px-4 py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors shadow-sm"
>
<ArrowPathIcon className={`h-4 w-4 ${isLoading ? 'animate-spin' : ''}`} />
بروزرسانی
</button>
}
/>
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
<p className="text-sm text-red-800 dark:text-red-300">{error}</p>
</div>
)}
{success && (
<div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
<p className="text-sm text-green-800 dark:text-green-300">{success}</p>
<div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
<p className="text-sm text-red-700 dark:text-red-300">{error}</p>
<button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
)}
{isLoading && users.length === 0 ? (
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800">
<p className="text-gray-500 dark:text-gray-400">در حال بارگذاری...</p>
<div className="text-center py-16 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
<div className="mx-auto h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
<p className="mt-3 text-gray-500 dark:text-gray-400 text-sm">در حال بارگذاری...</p>
</div>
) : (
<ReferralList
app/admin/reminders/page.tsx
+23 -38
View File
@@ -6,6 +6,8 @@ import { packagesApi } from '@/lib/api/packages';
import { remindersApi } from '@/lib/api/reminders';
import ReminderList from '@/components/admin/reminders/ReminderList';
import ReminderForm from '@/components/admin/reminders/ReminderForm';
import PageHeader from '@/components/admin/PageHeader';
import { showToast } from '@/components/Toast';
import { PackageName } from '@/types/package';
import { Reminder, CreateReminderData, UpdateReminderData } from '@/types/reminder';
import { PlusIcon } from '@heroicons/react/24/outline';
@@ -20,12 +22,10 @@ export default function RemindersPage() {
const [isLoadingPackages, setIsLoadingPackages] = useState(false);
const [isFormVisible, setIsFormVisible] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | null>(null);
const initialLoadRef = useRef(false);
const prevPackageRef = useRef<string | null>(null);
// Load packages on mount
useEffect(() => {
if (token && !initialLoadRef.current) {
initialLoadRef.current = true;
@@ -53,11 +53,11 @@ export default function RemindersPage() {
if (!force && prevPackageRef.current === packageName) {
return;
}
setIsLoading(true);
setError(null);
prevPackageRef.current = packageName;
try {
const data = await remindersApi.getReminders(packageName, token!);
setReminders(data);
@@ -68,7 +68,6 @@ export default function RemindersPage() {
}
}, [token]);
// Load reminders when package changes
useEffect(() => {
if (selectedPackage?.name && token) {
loadReminders(selectedPackage.name);
@@ -83,7 +82,6 @@ export default function RemindersPage() {
setIsFormVisible(false);
setSelectedReminder(null);
setError(null);
setSuccess(null);
};
const handleCreate = () => {
@@ -98,18 +96,16 @@ export default function RemindersPage() {
const handleDelete = async (reminder: Reminder) => {
if (!selectedPackage) return;
if (!confirm(`آیا از حذف یادآوری "${reminder.title}" اطمینان دارید؟`)) {
return;
}
setIsLoading(true);
setError(null);
setSuccess(null);
try {
await remindersApi.deleteReminder(selectedPackage.name!, reminder.id, token!);
setSuccess('یادآوری با موفقیت حذف شد');
showToast('success', 'یادآوری با موفقیت حذف شد');
if (selectedPackage.name) {
prevPackageRef.current = null;
await loadReminders(selectedPackage.name, true);
@@ -126,24 +122,21 @@ export default function RemindersPage() {
setIsLoading(true);
setError(null);
setSuccess(null);
try {
if (selectedReminder) {
// Update existing reminder
await remindersApi.updateReminder(selectedPackage.name!, selectedReminder.id, data, token!);
setSuccess('یادآوری با موفقیت به‌روزرسانی شد');
showToast('success', 'یادآوری با موفقیت به‌روزرسانی شد');
} else {
// Create new reminder
await remindersApi.createReminder(selectedPackage.name!, data as CreateReminderData, token!);
setSuccess('یادآوری با موفقیت ایجاد شد');
showToast('success', 'یادآوری با موفقیت ایجاد شد');
}
if (selectedPackage.name) {
prevPackageRef.current = null;
await loadReminders(selectedPackage.name, true);
}
setIsFormVisible(false);
setSelectedReminder(null);
} catch (err) {
@@ -157,20 +150,15 @@ export default function RemindersPage() {
setIsFormVisible(false);
setSelectedReminder(null);
setError(null);
setSuccess(null);
};
return (
<div className="p-6">
<div className="p-4 sm:p-8">
<div className="max-w-7xl mx-auto">
<div className="flex justify-between items-center mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
مدیریت یادآوری‌ها
</h1>
</div>
<PageHeader title="مدیریت یادآوری‌ها" />
{/* Package Selector */}
<div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow mb-6 transition-colors">
<div className="bg-white dark:bg-gray-900 p-4 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm mb-6">
<label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
انتخاب پکیج
</label>
@@ -179,7 +167,7 @@ export default function RemindersPage() {
value={selectedPackage?.name || ''}
onChange={handlePackageChange}
disabled={isLoadingPackages}
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 transition-colors"
className="block w-full px-3 py-2.5 text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-transparent sm:text-sm disabled:opacity-50 dark:bg-gray-800/80 transition-colors"
>
{isLoadingPackages ? (
<option>در حال بارگذاری پکیج‌ها...</option>
@@ -193,20 +181,17 @@ export default function RemindersPage() {
</select>
</div>
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
<p className="text-sm text-red-800 dark:text-red-300">{error}</p>
<div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
<p className="text-sm text-red-700 dark:text-red-300">{error}</p>
<button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600">
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
)}
{success && (
<div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
<p className="text-sm text-green-800 dark:text-green-300">{success}</p>
</div>
)}
{/* Form or List */}
{selectedPackage && (
<>
{!isFormVisible && (
@@ -214,9 +199,9 @@ export default function RemindersPage() {
<button
onClick={handleCreate}
disabled={isLoading}
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
className="inline-flex items-center gap-2 px-4 py-2.5 bg-indigo-600 text-white rounded-xl text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20"
>
<PlusIcon className="h-5 w-5 ml-2" />
<PlusIcon className="h-4 w-4" />
یادآوری جدید
</button>
</div>
@@ -244,4 +229,4 @@ export default function RemindersPage() {
</div>
</div>
);
}
}
app/admin/users/page.tsx
+69 -114
View File
@@ -9,6 +9,9 @@ import UserInfo from '@/components/admin/users/UserInfo';
import UserProducts from '@/components/admin/users/UserProducts';
import UserEditForm from '@/components/admin/users/UserEditForm';
import PackageSelector from '@/components/admin/users/PackageSelector';
import PageHeader from '@/components/admin/PageHeader';
import StepIndicator from '@/components/admin/StepIndicator';
import { showToast } from '@/components/Toast';
import { User, Product, UpdateUserProfileData } from '@/types/user';
import { PackageName } from '@/types/package';
import { formatPrice, getProductTypeLabel } from '@/lib/utils';
@@ -22,17 +25,14 @@ export default function UsersPage() {
const [selectedPackage, setSelectedPackage] = useState<string | null>(null);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState<string | null>(null);
const [success, setSuccess] = useState<string | null>(null);
const [isEditing, setIsEditing] = useState(false);
// Load packages on mount
useEffect(() => {
if (token) {
loadPackages();
}
}, [token]);
// Load products when package changes
useEffect(() => {
if (token && selectedPackage) {
loadProducts(selectedPackage);
@@ -54,9 +54,7 @@ export default function UsersPage() {
const loadProducts = async (packageName: string) => {
try {
console.log('Loading products for package:', packageName);
const data = await usersApi.getProductsByPackage(packageName, token!);
console.log('Products loaded:', data);
setProducts(data);
} catch (err) {
console.error('Failed to load products:', err);
@@ -75,9 +73,7 @@ export default function UsersPage() {
setUser(null);
try {
console.log('Searching for user:', searchTerm, 'in package:', selectedPackage);
const userData = await usersApi.getUserStatus(searchTerm, selectedPackage, token!);
console.log('User data:', userData);
setUser(userData);
} catch (err) {
setError(err instanceof Error ? err.message : 'خطا در دریافت اطلاعات کاربر');
@@ -88,10 +84,7 @@ export default function UsersPage() {
const handleSubscribe = async (productId: number) => {
if (!user) return;
// Get identifier (email or mobile) with null check
const identifier = user.email || user.mobile;
if (!identifier) {
setError('کاربر فاقد ایمیل یا شماره موبایل است');
return;
@@ -99,13 +92,10 @@ export default function UsersPage() {
setIsLoading(true);
setError(null);
setSuccess(null);
try {
console.log('Subscribing user:', identifier, 'to product:', productId);
await usersApi.subscribeUser(identifier, productId, token!);
setSuccess('اشتراک با موفقیت اضافه شد');
// Refresh user data with current selected package
showToast('success', 'اشتراک با موفقیت اضافه شد');
if (selectedPackage) {
const userData = await usersApi.getUserStatus(identifier, selectedPackage, token!);
setUser(userData);
@@ -119,10 +109,7 @@ export default function UsersPage() {
const handleUnsubscribe = async (productId: number) => {
if (!user) return;
// Get identifier (email or mobile) with null check
const identifier = user.email || user.mobile;
if (!identifier) {
setError('کاربر فاقد ایمیل یا شماره موبایل است');
return;
@@ -130,13 +117,10 @@ export default function UsersPage() {
setIsLoading(true);
setError(null);
setSuccess(null);
try {
console.log('Unsubscribing user:', identifier, 'from product:', productId);
await usersApi.unsubscribeUser(identifier, productId, token!);
setSuccess('اشتراک با موفقیت لغو شد');
// Refresh user data with current selected package
showToast('success', 'اشتراک با موفقیت لغو شد');
if (selectedPackage) {
const userData = await usersApi.getUserStatus(identifier, selectedPackage, token!);
setUser(userData);
@@ -150,9 +134,7 @@ export default function UsersPage() {
const handleEditSubmit = async (data: UpdateUserProfileData) => {
if (!user) return;
const identifier = user.email || user.mobile;
if (!identifier) {
setError('کاربر فاقد ایمیل یا شماره موبایل است');
return;
@@ -160,13 +142,11 @@ export default function UsersPage() {
setIsLoading(true);
setError(null);
setSuccess(null);
try {
await usersApi.updateUserProfile(identifier, data, token!);
setSuccess('اطلاعات کاربر با موفقیت به‌روزرسانی شد');
showToast('success', 'اطلاعات کاربر با موفقیت به‌روزرسانی شد');
setIsEditing(false);
// Refresh user data using the (possibly) new identifier
const newIdentifier = data.email || data.mobile || identifier;
if (selectedPackage) {
const userData = await usersApi.getUserStatus(newIdentifier, selectedPackage, token!);
@@ -181,9 +161,7 @@ export default function UsersPage() {
const handleDeleteUser = async () => {
if (!user) return;
const identifier = user.email || user.mobile;
if (!identifier) {
setError('کاربر فاقد ایمیل یا شماره موبایل است');
return;
@@ -195,11 +173,10 @@ export default function UsersPage() {
setIsLoading(true);
setError(null);
setSuccess(null);
try {
await usersApi.deleteUser(identifier, token!);
setSuccess('کاربر با موفقیت حذف شد');
showToast('success', 'کاربر با موفقیت حذف شد');
setUser(null);
} catch (err) {
setError(err instanceof Error ? err.message : 'خطا در حذف کاربر');
@@ -209,32 +186,30 @@ export default function UsersPage() {
};
const handlePackageChange = (packageName: string) => {
console.log('Package changed to:', packageName);
setSelectedPackage(packageName);
// Clear user when package changes to avoid showing wrong data
setUser(null);
setError(null);
setSuccess(null);
};
// Filter available products (show ALL products, don't filter out ones user already has)
const availableProducts = products;
// console.log('Current state:', {
// selectedPackage,
// productsCount: products.length,
// userProductsCount: user?.products?.length,
// availableProductsCount: availableProducts.length
// });
// Compute step indicator state
const steps = [
{ label: 'انتخاب پکیج', isCompleted: !!selectedPackage, isCurrent: !selectedPackage },
{ label: 'جستجوی کاربر', isCompleted: !!user, isCurrent: !!selectedPackage && !user },
{ label: 'پروفایل کاربر', isCompleted: false, isCurrent: !!user },
];
return (
<div className="p-6">
<div className="p-4 sm:p-8">
<div className="max-w-7xl mx-auto">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">
مدیریت کاربران
</h1>
<PageHeader title="مدیریت کاربران" subtitle="پکیج را انتخاب کنید، کاربر را جستجو کنید و مدیریت کنید" />
{/* Step Indicator */}
<div className="mb-6 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm p-5">
<StepIndicator steps={steps} />
</div>
{/* Package Selector */}
{token && (
<PackageSelector
token={token}
@@ -244,86 +219,68 @@ export default function UsersPage() {
/>
)}
{/* Search Section - Only show if package is selected */}
{selectedPackage && (
<UserSearch onSearch={handleSearch} isLoading={isLoading} />
)}
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 dark:bg-red-900/20 p-4">
<div className="flex">
<div className="flex-shrink-0">
<svg className="h-5 w-5 text-red-400 dark:text-red-400" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
</svg>
</div>
<div className="mr-3">
<p className="text-sm text-red-800 dark:text-red-300">{error}</p>
</div>
</div>
<div className="mb-4 rounded-xl bg-red-50 dark:bg-red-950/40 ring-1 ring-red-200 dark:ring-red-800/60 p-4 flex items-center gap-3">
<svg className="h-5 w-5 text-red-500 dark:text-red-400 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
</svg>
<p className="text-sm text-red-700 dark:text-red-300">{error}</p>
<button onClick={() => setError(null)} className="mr-auto text-red-400 hover:text-red-600 dark:hover:text-red-300">
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12" />
</svg>
</button>
</div>
)}
{success && (
<div className="mb-4 rounded-md bg-green-50 dark:bg-green-900/20 p-4">
<div className="flex">
<div className="flex-shrink-0">
<svg className="h-5 w-5 text-green-400 dark:text-green-400" viewBox="0 0 20 20" fill="currentColor">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
</div>
<div className="mr-3">
<p className="text-sm text-green-800 dark:text-green-300">{success}</p>
</div>
</div>
</div>
)}
{/* No Package Selected Message */}
{!selectedPackage && packages.length === 0 && (
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800">
<p className="text-gray-500 dark:text-gray-400">هیچ پکیجی یافت نشد. ابتدا یک پکیج ایجاد کنید.</p>
<div className="text-center py-16 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800">
<div className="mx-auto h-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
<svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="m21 7.5-9-5.25L3 7.5m18 0-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-9v9" />
</svg>
</div>
<p className="text-gray-500 dark:text-gray-400 text-sm">هیچ پکیجی یافت نشد. ابتدا یک پکیج ایجاد کنید.</p>
</div>
)}
{/* Show products list even without user */}
{selectedPackage && products.length > 0 && !user && (
<div className="mb-6">
<div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
محصولات موجود در پکیج {selectedPackage}
</h3>
</div>
<div className="border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
{products.map((product) => (
<div
key={product.id}
className="relative block w-full border border-gray-200 dark:border-gray-800 rounded-lg p-4 text-right bg-gray-50 dark:bg-gray-800/60"
>
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
{product.title || 'محصول'}
</p>
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
قیمت: {formatPrice(product.price)} تومان
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
نوع: {getProductTypeLabel(product.type)}
</p>
</div>
))}
</div>
<p className="mt-4 text-sm text-gray-500 dark:text-gray-400 text-center">
برای افزودن اشتراک به کاربر، ابتدا یک کاربر جستجو کنید
</p>
<div className="bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden">
<div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
<h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
محصولات موجود در پکیج {selectedPackage}
</h3>
</div>
<div className="p-5">
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
{products.map((product) => (
<div
key={product.id}
className="border border-gray-200 dark:border-gray-800 rounded-xl p-4 bg-gray-50 dark:bg-gray-800/60 hover:bg-white dark:hover:bg-gray-800 transition-colors"
>
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
{product.title || 'محصول'}
</p>
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
قیمت: {formatPrice(product.price)} تومان
</p>
<p className="text-xs text-gray-500 dark:text-gray-400">
نوع: {getProductTypeLabel(product.type)}
</p>
</div>
))}
</div>
<p className="mt-4 text-sm text-gray-400 dark:text-gray-500 text-center">
برای افزودن اشتراک به کاربر، ابتدا یک کاربر جستجو کنید
</p>
</div>
</div>
)}
{/* User Info */}
{user && (
<>
<UserInfo user={user} />
@@ -331,24 +288,23 @@ export default function UsersPage() {
<button
onClick={() => setIsEditing(true)}
disabled={isLoading}
className="inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
className="inline-flex items-center gap-2 px-4 py-2.5 border border-gray-200 dark:border-gray-700 rounded-xl text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors shadow-sm"
>
<PencilSquareIcon className="h-5 w-5 ml-2" />
<PencilSquareIcon className="h-4 w-4" />
ویرایش اطلاعات
</button>
<button
onClick={handleDeleteUser}
disabled={isLoading}
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
className="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors shadow-sm"
>
<TrashIcon className="h-5 w-5 ml-2" />
<TrashIcon className="h-4 w-4" />
حذف کاربر
</button>
</div>
</>
)}
{/* User Products */}
{user && selectedPackage && (
<UserProducts
products={user.products || []}
@@ -360,7 +316,6 @@ export default function UsersPage() {
/>
)}
{/* Edit User Modal */}
{user && isEditing && (
<UserEditForm
user={user}
@@ -372,4 +327,4 @@ export default function UsersPage() {
</div>
</div>
);
}
}
app/globals.css
+32 -7
View File
@@ -42,14 +42,13 @@
}
:root {
--background: #f3f4f6;
--foreground: #171717;
--background: #f9fafb;
--foreground: #111827;
}
/* Dark palette is driven by the `.dark` class so the toggle controls it */
.dark {
--background: #030712;
--foreground: #ededed;
--foreground: #f9fafb;
}
@theme inline {
@@ -64,6 +63,8 @@ body {
color: var(--foreground);
font-family: 'Dana', 'Inter', Arial, Helvetica, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Smooth theme transition for surfaces, borders and text */
@@ -71,7 +72,7 @@ body {
*::before,
*::after {
transition-property: background-color, border-color, color, fill, stroke;
transition-duration: 200ms;
transition-duration: 150ms;
transition-timing-function: ease;
}
@@ -84,8 +85,11 @@ body {
scrollbar-color: #374151 transparent;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
width: 8px;
height: 8px;
}
*::-webkit-scrollbar-track {
background: transparent;
}
*::-webkit-scrollbar-thumb {
background-color: #cbd5e1;
@@ -105,3 +109,24 @@ body {
background-color: #4853c4;
color: #f9fafb;
}
/* Toast animations */
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slide-in-from-top-4 {
from { transform: translateY(-1rem); }
to { transform: translateY(0); }
}
.animate-in {
animation-duration: 300ms;
animation-timing-function: ease-out;
animation-fill-mode: both;
}
.fade-in {
animation-name: fade-in;
}
.slide-in-from-top-4 {
animation-name: slide-in-from-top-4;
}