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

feat: dark and light mdoe

Browse Source
This commit is contained in:
Amirmahdi
2026-06-06 15:33:01 +03:30
parent 07c93ceb91 99d29bbce5
commit f80fdd61ca
27 changed files with 594 additions and 451 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/admin/dashboard/page.tsx
+77 -69
View File
@@ -2,90 +2,98 @@
import { useAuth } from '@/contexts/AuthContext';
import Link from 'next/link';
import { UsersIcon, CubeIcon, TagIcon , BellIcon, GiftIcon } from '@heroicons/react/24/outline';
import { UsersIcon, CubeIcon, TagIcon , BellIcon, GiftIcon, PowerIcon } 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 cards = [
{
href: '/admin/users',
title: 'مدیریت کاربران',
desc: 'مشاهده و مدیریت کاربران، اشتراک‌ها و تراکنش‌ها',
Icon: UsersIcon,
iconWrap: 'bg-indigo-100 text-indigo-600 dark:bg-indigo-500/15 dark:text-indigo-400',
},
{
href: '/admin/packages',
title: 'مدیریت پکیج‌ها',
desc: 'ایجاد و مدیریت پکیج‌های نرم‌افزار',
Icon: CubeIcon,
iconWrap: 'bg-green-100 text-green-600 dark:bg-green-500/15 dark:text-green-400',
},
{
href: '/admin/products',
title: 'مدیریت محصولات',
desc: 'ایجاد و مدیریت محصولات و اشتراک‌ها',
Icon: TagIcon,
iconWrap: 'bg-purple-100 text-purple-600 dark:bg-purple-500/15 dark:text-purple-400',
},
{
href: '/admin/reminders',
title: 'مدیریت یادآوری‌ها',
desc: 'ایجاد و مدیریت یادآوری‌ها و پیام‌های انگیزشی',
Icon: BellIcon,
iconWrap: 'bg-yellow-100 text-yellow-600 dark:bg-yellow-500/15 dark:text-yellow-400',
},
{
href: '/admin/promotions',
title: 'مدیریت تبلیغات',
desc: 'ایجاد و مدیریت تبلیغات، بنرها و اسلایدرها',
Icon: MegaphoneIcon,
iconWrap: 'bg-pink-100 text-pink-600 dark:bg-pink-500/15 dark:text-pink-400',
},
{
href: '/admin/referral-rewards',
title: 'پاداش‌های معرفی',
desc: 'اعطای اشتراک رایگان به کاربران واجد شرایط دعوت',
Icon: GiftIcon,
iconWrap: 'bg-emerald-100 text-emerald-600 dark:bg-emerald-500/15 dark:text-emerald-400',
},
];
return (
<div className="p-8">
<div className="p-4 sm:p-8">
<div className="max-w-7xl mx-auto">
<div className="bg-white rounded-lg shadow-lg p-6">
<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">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
داشبورد
</h1>
<button
onClick={logout}
className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors"
>
خروج
</button>
<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>
</div>
<div className="border-t pt-6">
<h2 className="text-lg font-semibold mb-4 text-slate-900">خوش آمدید، {user?.email}</h2>
<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-6 mt-6">
<Link href="/admin/users" className="block">
<div className="bg-indigo-50 hover:bg-indigo-100 rounded-lg p-6 transition-colors">
<UsersIcon className="h-8 w-8 text-indigo-600 mb-3" />
<h3 className="text-lg font-medium text-gray-900">مدیریت کاربران</h3>
<p className="text-sm text-gray-600 mt-1">
مشاهده و مدیریت کاربران، اشتراک‌ها و تراکنش‌ها
</p>
</div>
</Link>
<Link href="/admin/packages" className="block">
<div className="bg-green-50 hover:bg-green-100 rounded-lg p-6 transition-colors">
<CubeIcon className="h-8 w-8 text-green-600 mb-3" />
<h3 className="text-lg font-medium text-gray-900">مدیریت پکیج‌ها</h3>
<p className="text-sm text-gray-600 mt-1">
ایجاد و مدیریت پکیج‌های نرم‌افزار
</p>
</div>
</Link>
<Link href="/admin/products" className="block">
<div className="bg-purple-50 hover:bg-purple-100 rounded-lg p-6 transition-colors">
<TagIcon className="h-8 w-8 text-purple-600 mb-3" />
<h3 className="text-lg font-medium text-gray-900">مدیریت محصولات</h3>
<p className="text-sm text-gray-600 mt-1">
ایجاد و مدیریت محصولات و اشتراک‌ها
</p>
</div>
</Link>
<Link href="/admin/reminders" className="block">
<div className="bg-yellow-50 hover:bg-yellow-100 rounded-lg p-6 transition-colors">
<BellIcon className="h-8 w-8 text-yellow-600 mb-3" />
<h3 className="text-lg font-medium text-gray-900">مدیریت یادآوری‌ها</h3>
<p className="text-sm text-gray-600 mt-1">
ایجاد و مدیریت یادآوری‌ها و پیام‌های انگیزشی
</p>
</div>
</Link>
<Link href="/admin/promotions" className="block">
<div className="bg-pink-50 hover:bg-pink-100 rounded-lg p-6 transition-colors">
<MegaphoneIcon className="h-8 w-8 text-pink-600 mb-3" />
<h3 className="text-lg font-medium text-gray-900">مدیریت تبلیغات</h3>
<p className="text-sm text-gray-600 mt-1">
ایجاد و مدیریت تبلیغات، بنرها و اسلایدرها
</p>
</div>
</Link>
<Link href="/admin/referral-rewards" className="block">
<div className="bg-emerald-50 hover:bg-emerald-100 rounded-lg p-6 transition-colors">
<GiftIcon className="h-8 w-8 text-emerald-600 mb-3" />
<h3 className="text-lg font-medium text-gray-900">پاداش‌های معرفی</h3>
<p className="text-sm text-gray-600 mt-1">
اعطای اشتراک رایگان به کاربران واجد شرایط دعوت
</p>
</div>
</Link>
<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>
</div>
app/admin/layout.tsx
+3 -1
View File
@@ -1,6 +1,7 @@
'use client';
import { AuthProvider } from '@/contexts/AuthContext';
import ThemeToggle from '@/components/ThemeToggle';
export default function AdminLayout({
children,
@@ -9,8 +10,9 @@ export default function AdminLayout({
}) {
return (
<AuthProvider>
<div className="min-h-screen bg-gray-100">
<div className="min-h-screen bg-gray-100 dark:bg-gray-950">
{children}
<ThemeToggle floating />
</div>
</AuthProvider>
);
app/admin/login/page.tsx
+66 -59
View File
@@ -4,6 +4,7 @@ import { useState } 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() {
const [auth, setAuth] = useState('');
@@ -36,72 +37,78 @@ export default function LoginPage() {
};
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div className="max-w-md w-full space-y-8">
<div>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">
پنل ادمین اپروایجنسی
</h2>
</div>
<form className="mt-8 space-y-6" onSubmit={handleSubmit}>
<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>
<div className='py-2'>
<label htmlFor="auth" className="sr-only">
Email
</label>
<input
id="auth"
name="auth"
type="text"
required
className="appearance-none relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="ایمیل"
value={auth}
onChange={(e) => setAuth(e.target.value)}
disabled={isLoading}
/>
</div>
<div>
<label htmlFor="password" className="sr-only">
Password
</label>
<input
id="password"
name="password"
type="password"
required
className="appearance-none rounded-md relative block w-full px-3 py-3 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 focus:z-10 sm:text-sm"
placeholder="رمز عبور"
value={password}
onChange={(e) => setPassword(e.target.value)}
disabled={isLoading}
/>
<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>
<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>
{(error || localError) && (
<div className="rounded-md bg-red-50 p-4">
<div className="flex">
<div className="ml-3">
<h3 className="text-sm font-medium text-red-800">
{localError || error}
</h3>
</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>
<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"
placeholder="example@email.com"
value={auth}
onChange={(e) => setAuth(e.target.value)}
disabled={isLoading}
dir="ltr"
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
رمز عبور
</label>
<input
id="password"
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"
placeholder="••••••••"
value={password}
onChange={(e) => setPassword(e.target.value)}
disabled={isLoading}
dir="ltr"
/>
</div>
</div>
)}
<div>
<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-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
>
{isLoading ? 'کمی صبر کنید' : 'ورود'}
</button>
</div>
</form>
{(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">
{localError || error}
</h3>
</div>
)}
<div>
<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"
>
{isLoading ? 'کمی صبر کنید...' : 'ورود'}
</button>
</div>
</form>
</div>
</div>
</div>
);
app/admin/packages/page.tsx
+6 -6
View File
@@ -104,13 +104,13 @@ export default function PackagesPage() {
<div className="p-6">
<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">
<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"
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" />
پکیج جدید
@@ -120,14 +120,14 @@ export default function PackagesPage() {
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 p-4">
<p className="text-sm text-red-800">{error}</p>
<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 p-4">
<p className="text-sm text-green-800">{success}</p>
<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>
)}
app/admin/products/page.tsx
+9 -9
View File
@@ -170,14 +170,14 @@ export default function ProductsPage() {
<div className="p-6">
<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">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
مدیریت محصولات
</h1>
</div>
{/* Package Selector */}
<div className="bg-white p-4 rounded-lg shadow mb-6">
<label htmlFor="package" className="block text-sm font-medium text-gray-700 mb-2">
<div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow mb-6">
<label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
انتخاب پکیج
</label>
<select
@@ -185,7 +185,7 @@ export default function ProductsPage() {
value={selectedPackage?.name || ''}
onChange={handlePackageChange}
disabled={isLoadingPackages}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50"
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"
>
{isLoadingPackages ? (
<option>در حال بارگذاری پکیج‌ها...</option>
@@ -201,14 +201,14 @@ export default function ProductsPage() {
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 p-4">
<p className="text-sm text-red-800">{error}</p>
<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 p-4">
<p className="text-sm text-green-800">{success}</p>
<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>
)}
@@ -220,7 +220,7 @@ 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 focus:ring-indigo-500 disabled:opacity-50"
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" />
محصول جدید
app/admin/promotions/page.tsx
+6 -6
View File
@@ -123,14 +123,14 @@ export default function PromotionsPage() {
<div className="p-6">
<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">
<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 focus:ring-indigo-500 disabled:opacity-50"
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" />
تبلیغ جدید
@@ -140,14 +140,14 @@ export default function PromotionsPage() {
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 p-4">
<p className="text-sm text-red-800">{error}</p>
<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 p-4">
<p className="text-sm text-green-800">{success}</p>
<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>
)}
app/admin/referral-rewards/page.tsx
+9 -9
View File
@@ -67,17 +67,17 @@ export default function ReferralRewardsPage() {
<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">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
پاداش‌های معرفی
</h1>
<p className="text-sm text-gray-500 mt-1">
<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 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
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' : ''}`} />
بروزرسانی
@@ -86,20 +86,20 @@ export default function ReferralRewardsPage() {
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 p-4">
<p className="text-sm text-red-800">{error}</p>
<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 p-4">
<p className="text-sm text-green-800">{success}</p>
<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>
)}
{isLoading && users.length === 0 ? (
<div className="text-center py-12 bg-white rounded-lg shadow">
<p className="text-gray-500">در حال بارگذاری...</p>
<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>
) : (
<ReferralList
app/admin/reminders/page.tsx
+9 -9
View File
@@ -164,14 +164,14 @@ export default function RemindersPage() {
<div className="p-6">
<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">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
مدیریت یادآوری‌ها
</h1>
</div>
{/* Package Selector */}
<div className="bg-white p-4 rounded-lg shadow mb-6">
<label htmlFor="package" className="block text-sm font-medium text-gray-700 mb-2">
<div className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow mb-6 transition-colors">
<label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
انتخاب پکیج
</label>
<select
@@ -179,7 +179,7 @@ export default function RemindersPage() {
value={selectedPackage?.name || ''}
onChange={handlePackageChange}
disabled={isLoadingPackages}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50"
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"
>
{isLoadingPackages ? (
<option>در حال بارگذاری پکیج‌ها...</option>
@@ -195,14 +195,14 @@ export default function RemindersPage() {
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 p-4">
<p className="text-sm text-red-800">{error}</p>
<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 p-4">
<p className="text-sm text-green-800">{success}</p>
<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>
)}
@@ -214,7 +214,7 @@ 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 focus:ring-indigo-500 disabled:opacity-50"
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" />
یادآوری جدید
app/admin/users/page.tsx
+19 -19
View File
@@ -230,7 +230,7 @@ export default function UsersPage() {
return (
<div className="p-6">
<div className="max-w-7xl mx-auto">
<h1 className="text-2xl font-bold text-gray-900 mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-6">
مدیریت کاربران
</h1>
@@ -251,30 +251,30 @@ export default function UsersPage() {
{/* Messages */}
{error && (
<div className="mb-4 rounded-md bg-red-50 p-4">
<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" viewBox="0 0 20 20" fill="currentColor">
<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">{error}</p>
<p className="text-sm text-red-800 dark:text-red-300">{error}</p>
</div>
</div>
</div>
)}
{success && (
<div className="mb-4 rounded-md bg-green-50 p-4">
<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" viewBox="0 0 20 20" fill="currentColor">
<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">{success}</p>
<p className="text-sm text-green-800 dark:text-green-300">{success}</p>
</div>
</div>
</div>
@@ -282,40 +282,40 @@ export default function UsersPage() {
{/* No Package Selected Message */}
{!selectedPackage && packages.length === 0 && (
<div className="text-center py-12 bg-white rounded-lg shadow">
<p className="text-gray-500">هیچ پکیجی یافت نشد. ابتدا یک پکیج ایجاد کنید.</p>
<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>
)}
{/* Show products list even without user */}
{selectedPackage && products.length > 0 && !user && (
<div className="mb-6">
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<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">
<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 px-4 py-5 sm:px-6">
<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 rounded-lg p-4 text-right bg-gray-50"
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">
<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">
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
قیمت: {formatPrice(product.price)} تومان
</p>
<p className="text-xs text-gray-500">
<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 text-center">
<p className="mt-4 text-sm text-gray-500 dark:text-gray-400 text-center">
برای افزودن اشتراک به کاربر، ابتدا یک کاربر جستجو کنید
</p>
</div>
@@ -331,7 +331,7 @@ export default function UsersPage() {
<button
onClick={() => setIsEditing(true)}
disabled={isLoading}
className="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
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"
>
<PencilSquareIcon className="h-5 w-5 ml-2" />
ویرایش اطلاعات
@@ -339,7 +339,7 @@ export default function UsersPage() {
<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 disabled:opacity-50"
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"
>
<TrashIcon className="h-5 w-5 ml-2" />
حذف کاربر
app/globals.css
+50 -12
View File
@@ -1,8 +1,7 @@
@import "tailwindcss";
@tailwind utilities;
/* @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); */
/* Class-based dark mode (Tailwind v4): toggled by a `.dark` class on <html> */
@custom-variant dark (&:where(.dark, .dark *));
@theme {
--color-primary-50: #f0f1ff;
@@ -14,7 +13,7 @@
--color-primary-600: #5d68e0;
--color-primary-700: #4853c4;
--color-primary-800: #343ea8;
--color-primary-900: #1f298;
--color-primary-900: #2a318c;
}
/* Dana Font Faces */
@@ -43,10 +42,16 @@
}
:root {
--background: #ffffff;
--background: #f3f4f6;
--foreground: #171717;
}
/* Dark palette is driven by the `.dark` class so the toggle controls it */
.dark {
--background: #030712;
--foreground: #ededed;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
@@ -54,16 +59,49 @@
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: 'Dana', 'Inter', Arial, Helvetica, sans-serif;
font-weight: 400;
}
/* Smooth theme transition for surfaces, borders and text */
*,
*::before,
*::after {
transition-property: background-color, border-color, color, fill, stroke;
transition-duration: 200ms;
transition-timing-function: ease;
}
/* Custom scrollbar that adapts to the theme */
* {
scrollbar-width: thin;
scrollbar-color: #cbd5e1 transparent;
}
.dark * {
scrollbar-color: #374151 transparent;
}
*::-webkit-scrollbar {
width: 10px;
height: 10px;
}
*::-webkit-scrollbar-thumb {
background-color: #cbd5e1;
border-radius: 9999px;
border: 2px solid transparent;
background-clip: content-box;
}
.dark *::-webkit-scrollbar-thumb {
background-color: #374151;
}
::selection {
background-color: #c3c7ff;
color: #1f2937;
}
.dark ::selection {
background-color: #4853c4;
color: #f9fafb;
}
app/layout.tsx
+7 -1
View File
@@ -21,8 +21,14 @@ export default function RootLayout({
children: React.ReactNode;
}) {
return (
<html lang="fa" dir="rtl">
<html lang="fa" dir="rtl" suppressHydrationWarning>
<head>
{/* Apply the saved/system theme before paint to avoid a flash of the wrong theme */}
<script
dangerouslySetInnerHTML={{
__html: `(function(){try{var t=localStorage.getItem('theme');var d=t?t==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;if(d)document.documentElement.classList.add('dark');}catch(e){}})();`,
}}
/>
<meta
name="google-site-verification"
content="HIKgdf_siYdPxbJ2P1792opMprpxci_QjE-quk9kyi8"
components/ThemeToggle.tsx
+82
View File
@@ -0,0 +1,82 @@
'use client';
import { useEffect, useState } from 'react';
import { SunIcon, MoonIcon } from '@heroicons/react/24/outline';
type Theme = 'light' | 'dark';
interface ThemeToggleProps {
/** When true, renders as a fixed floating pill (used on the app shell). */
floating?: boolean;
/** When true, shows a Persian text label next to the icon. */
withLabel?: boolean;
className?: string;
}
export default function ThemeToggle({ floating = false, withLabel, className = '' }: ThemeToggleProps) {
const [theme, setTheme] = useState<Theme>('light');
const [mounted, setMounted] = useState(false);
// Floating variant shows a label by default; inline variant is icon-only unless asked.
const showLabel = withLabel ?? floating;
useEffect(() => {
setMounted(true);
setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light');
}, []);
const toggle = () => {
const next: Theme = theme === 'dark' ? 'light' : 'dark';
const root = document.documentElement;
if (next === 'dark') {
root.classList.add('dark');
} else {
root.classList.remove('dark');
}
try {
localStorage.setItem('theme', next);
} catch {
// ignore storage errors
}
setTheme(next);
};
const base =
'inline-flex items-center gap-2 border border-gray-200 bg-white text-gray-700 shadow-sm hover:bg-gray-50 hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-200 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-offset-gray-900 transition-colors';
const shape = showLabel
? 'rounded-full px-4 py-2 text-sm font-medium'
: 'rounded-full justify-center h-10 w-10';
const floatingCls = floating ? 'fixed bottom-5 left-5 z-50' : '';
const isDark = theme === 'dark';
const label = isDark ? 'حالت روشن' : 'حالت تیره';
// Avoid hydration mismatch: render a neutral placeholder until mounted
if (!mounted) {
return (
<button
type="button"
aria-label="تغییر تم"
className={`${base} ${shape} ${floatingCls} ${className}`}
>
<SunIcon className="h-5 w-5" />
{showLabel && <span>تم</span>}
</button>
);
}
return (
<button
type="button"
onClick={toggle}
aria-label={label}
title={label}
className={`${base} ${shape} ${floatingCls} ${className}`}
>
{isDark ? <SunIcon className="h-5 w-5" /> : <MoonIcon className="h-5 w-5" />}
{showLabel && <span>{label}</span>}
</button>
);
}
components/admin/packages/PackageForm.tsx
+27 -27
View File
@@ -95,11 +95,11 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
};
return (
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
<form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Name */}
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
نام پکیج <span className="text-red-500">*</span>
</label>
<input
@@ -109,7 +109,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
required
value={formData.name || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 dark:bg-gray-800 dark:placeholder-gray-500"
placeholder="مثال: com.approagency.meditation"
dir="ltr"
/>
@@ -117,7 +117,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
{/* Title */}
<div>
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
عنوان <span className="text-red-500">*</span>
</label>
<input
@@ -127,19 +127,19 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
required
value={formData.title || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 dark:bg-gray-800 dark:placeholder-gray-500"
placeholder="مثال: آرام لند"
/>
</div>
{/* Avatar */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تصویر
</label>
<div className="flex items-center space-x-3 space-x-reverse">
<label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
<PhotoIcon className="h-5 w-5 ml-2 text-gray-400" />
<label className="cursor-pointer 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 transition-colors">
<PhotoIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
انتخاب تصویر
<input
type="file"
@@ -152,7 +152,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
<button
type="button"
onClick={removeAvatar}
className="text-red-600 hover:text-red-900"
className="text-red-600 dark:text-red-400 hover:text-red-900 transition-colors"
>
<XMarkIcon className="h-5 w-5" />
</button>
@@ -163,7 +163,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
<img
src={avatarPreview}
alt="Preview"
className="h-20 w-20 object-cover rounded-lg border border-gray-200"
className="h-20 w-20 object-cover rounded-lg border border-gray-200 dark:border-gray-800"
/>
</div>
)}
@@ -171,7 +171,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
{/* V1 Identifier */}
<div>
<label htmlFor="v1_identifier" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="v1_identifier" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
شناسه V1
</label>
<input
@@ -180,13 +180,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="v1_identifier"
value={formData.v1_identifier || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 dark:bg-gray-800 dark:placeholder-gray-500"
/>
</div>
{/* Myket Access Token */}
<div>
<label htmlFor="myket_access_token" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="myket_access_token" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
توکن دسترسی Myket
</label>
<input
@@ -195,13 +195,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="myket_access_token"
value={formData.myket_access_token || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 dark:bg-gray-800 dark:placeholder-gray-500"
/>
</div>
{/* Cafe Config ID */}
<div>
<label htmlFor="cafe_config_id" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="cafe_config_id" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
شناسه کافه بازار
</label>
<input
@@ -210,13 +210,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="cafe_config_id"
value={formData.cafe_config_id || ''}
onChange={handleNumberChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 dark:bg-gray-800 dark:placeholder-gray-500"
/>
</div>
{/* Web App URL */}
<div>
<label htmlFor="web_app_url" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="web_app_url" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
آدرس وب اپلیکیشن
</label>
<input
@@ -225,14 +225,14 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="web_app_url"
value={formData.web_app_url || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 dark:bg-gray-800 dark:placeholder-gray-500"
placeholder="https://example.com"
/>
</div>
{/* Tries */}
<div>
<label htmlFor="tries" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="tries" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تعداد تلاش‌ها
</label>
<input
@@ -241,17 +241,17 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="tries"
value={formData.tries || 0}
onChange={handleNumberChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 dark:bg-gray-800 dark:placeholder-gray-500"
/>
</div>
{/* Firebase JSON */}
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
فایل Firebase JSON
</label>
<label className="cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
<DocumentTextIcon className="h-5 w-5 ml-2 text-gray-400" />
<label className="cursor-pointer 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 transition-colors">
<DocumentTextIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
انتخاب فایل
<input
type="file"
@@ -261,7 +261,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
/>
</label>
{firebaseFile && (
<p className="mt-2 text-sm text-gray-600">
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
فایل انتخاب شده: {firebaseFile.name}
</p>
)}
@@ -269,18 +269,18 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
</div>
{/* Form Actions */}
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
<button
type="button"
onClick={onCancel}
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="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 transition-colors"
>
انصراف
</button>
<button
type="submit"
disabled={isLoading}
className="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 disabled:opacity-50"
className="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 disabled:opacity-50 transition-colors"
>
{isLoading ? 'در حال ذخیره...' : pkg ? 'به‌روزرسانی' : 'ایجاد'}
</button>
components/admin/packages/PackageList.tsx
+10 -10
View File
@@ -22,17 +22,17 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
if (!packages || packages.length === 0) {
return (
<div className="text-center py-12 bg-white rounded-lg shadow">
<p className="text-gray-500">هیچ پکیجی یافت نشد</p>
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
<p className="text-gray-500 dark:text-gray-400">هیچ پکیجی یافت نشد</p>
</div>
);
}
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<ul className="divide-y divide-gray-200">
<div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{packages.map((pkg) => (
<li key={pkg.id} className="px-2 py-4 hover:bg-gray-50">
<li key={pkg.id} className="px-2 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center space-x-3 space-x-reverse">
@@ -44,10 +44,10 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
/>
)}
<div>
<p className="text-sm font-medium text-indigo-600 truncate px-2">
<p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate px-2">
{pkg.title || 'بدون عنوان'}
</p>
<p className="text-sm text-gray-500 px-2">
<p className="text-sm text-gray-500 dark:text-gray-400 px-2">
{pkg.name || 'بدون نام'}
</p>
</div>
@@ -57,7 +57,7 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
</div>
<p className="text-xs text-gray-500 mt-1 sm:mt-0">
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1 sm:mt-0">
آخرین به‌روزرسانی: {formatDate(pkg.updated_at)}
</p>
</div>
@@ -65,13 +65,13 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
<button
onClick={() => onEdit(pkg)}
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
>
<PencilIcon className="h-5 w-5" />
</button>
<button
onClick={() => onDelete(pkg)}
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
className="text-red-600 dark:text-red-400 hover:text-red-900 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
>
<TrashIcon className="h-5 w-5" />
</button>
components/admin/products/ProductForm.tsx
+17 -17
View File
@@ -64,9 +64,9 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
};
return (
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
<form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
{product ? 'ویرایش محصول' : 'ایجاد محصول جدید'} برای پکیج {packageName}
</h3>
</div>
@@ -74,7 +74,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Title */}
<div>
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
عنوان <span className="text-red-500">*</span>
</label>
<input
@@ -84,14 +84,14 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
required
value={formData.title || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
placeholder="مثال: اشتراک ماهانه"
/>
</div>
{/* Price */}
<div>
<label htmlFor="price" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="price" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
قیمت (تومان) <span className="text-red-500">*</span>
</label>
<input
@@ -102,14 +102,14 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
min="0"
value={formData.price || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
placeholder="مثال: 60000"
/>
</div>
{/* Type */}
<div>
<label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
نوع اشتراک <span className="text-red-500">*</span>
</label>
<select
@@ -118,7 +118,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
required
value={formData.type || 4}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
>
{Object.entries(PRODUCT_TYPES).map(([value, label]) => (
<option key={value} value={value}>
@@ -131,7 +131,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
{/* Descriptions */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
ویژگی‌ها
</label>
<div className="flex space-x-2 space-x-reverse">
@@ -139,7 +139,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
type="text"
value={newDescription}
onChange={(e) => setNewDescription(e.target.value)}
className="flex-1 px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="flex-1 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"
placeholder="ویژگی جدید را وارد کنید"
onKeyPress={(e) => {
if (e.key === 'Enter') {
@@ -151,7 +151,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
<button
type="button"
onClick={handleAddDescription}
className="inline-flex items-center px-3 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"
className="inline-flex items-center px-3 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 transition-colors"
>
<PlusIcon className="h-5 w-5" />
</button>
@@ -161,12 +161,12 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
{descriptions.length > 0 && (
<ul className="mt-3 space-y-2">
{descriptions.map((desc, index) => (
<li key={index} className="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-md">
<span className="text-sm text-gray-700">{desc}</span>
<li key={index} className="flex items-center justify-between bg-gray-50 dark:bg-gray-800/60 px-3 py-2 rounded-md">
<span className="text-sm text-gray-700 dark:text-gray-300">{desc}</span>
<button
type="button"
onClick={() => handleRemoveDescription(index)}
className="text-red-600 hover:text-red-900"
className="text-red-600 dark:text-red-400 hover:text-red-900 transition-colors"
>
<XMarkIcon className="h-5 w-5" />
</button>
@@ -177,18 +177,18 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
</div>
{/* Form Actions */}
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
<button
type="button"
onClick={onCancel}
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="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 transition-colors"
>
انصراف
</button>
<button
type="submit"
disabled={isLoading}
className="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 disabled:opacity-50"
className="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"
>
{isLoading ? 'در حال ذخیره...' : product ? 'به‌روزرسانی' : 'ایجاد'}
</button>
components/admin/products/ProductList.tsx
+14 -14
View File
@@ -24,40 +24,40 @@ export default function ProductList({ products, packageName, onEdit, onDelete, i
if (!products || products.length === 0) {
return (
<div className="text-center py-12 bg-white rounded-lg shadow">
<p className="text-gray-500">هیچ محصولی برای این پکیج یافت نشد</p>
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
<p className="text-gray-500 dark:text-gray-400">هیچ محصولی برای این پکیج یافت نشد</p>
</div>
);
}
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
محصولات پکیج {packageName}
</h3>
</div>
<ul className="divide-y divide-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{products.map((product) => (
<li key={product.id} className="px-6 py-4 hover:bg-gray-50">
<li key={product.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-indigo-600 truncate">
<p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate">
{product.title || 'بدون عنوان'}
</p>
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
{getProductTypeLabel(product.type)}
</span>
</div>
<div className="mt-2">
<p className="text-sm text-gray-900">
<p className="text-sm text-gray-900 dark:text-gray-100">
قیمت: {formatPrice(product.price)} تومان
</p>
{product.descriptions && product.descriptions.length > 0 && (
<div className="mt-2">
<p className="text-xs text-gray-500 mb-1">ویژگی‌ها:</p>
<ul className="list-disc list-inside text-xs text-gray-600 pr-4">
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">ویژگی‌ها:</p>
<ul className="list-disc list-inside text-xs text-gray-600 dark:text-gray-400 pr-4">
{product.descriptions.map((desc, index) => (
<li key={index}>{desc}</li>
))}
@@ -65,20 +65,20 @@ export default function ProductList({ products, packageName, onEdit, onDelete, i
</div>
)}
</div>
<div className="mt-2 text-xs text-gray-500">
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
آخرین به‌روزرسانی: {formatDate(product.updated_at)}
</div>
</div>
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
<button
onClick={() => onEdit(product)}
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
>
<PencilIcon className="h-5 w-5" />
</button>
<button
onClick={() => onDelete(product)}
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
className="text-red-600 dark:text-red-400 hover:text-red-900 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
>
<TrashIcon className="h-5 w-5" />
</button>
components/admin/promotions/PromotionForm.tsx
+37 -37
View File
@@ -122,9 +122,9 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
};
return (
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
<form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
{promotion ? 'ویرایش تبلیغ' : 'ایجاد تبلیغ جدید'}
</h3>
</div>
@@ -132,7 +132,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Type */}
<div>
<label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
نوع <span className="text-red-500">*</span>
</label>
<select
@@ -141,7 +141,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
required
value={formData.type || 'slider'}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
>
{Object.entries(PROMOTION_TYPES).map(([value, label]) => (
<option key={value} value={value}>
@@ -153,7 +153,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
{/* Title */}
<div>
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
عنوان
</label>
<input
@@ -162,14 +162,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="title"
value={formData.title || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
placeholder="عنوان تبلیغ"
/>
</div>
{/* Subtitle */}
<div className="md:col-span-2">
<label htmlFor="subtitle" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="subtitle" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
زیرعنوان
</label>
<input
@@ -178,14 +178,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="subtitle"
value={formData.subtitle || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
placeholder="زیرعنوان تبلیغ"
/>
</div>
{/* Action Text */}
<div>
<label htmlFor="action_text" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="action_text" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
متن دکمه
</label>
<input
@@ -194,14 +194,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="action_text"
value={formData.action_text || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
placeholder="مثال: همین حالا نصب کن"
/>
</div>
{/* Priority */}
<div>
<label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="priority" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
اولویت
</label>
<input
@@ -211,14 +211,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
min="0"
value={formData.priority || 0}
onChange={handleNumberChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
placeholder="عدد بالاتر = اولویت بیشتر"
/>
</div>
{/* Start Date */}
<div>
<label htmlFor="start_at" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="start_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تاریخ شروع
</label>
<input
@@ -227,13 +227,13 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="start_at"
value={formData.start_at || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
/>
</div>
{/* End Date */}
<div>
<label htmlFor="end_at" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="end_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تاریخ پایان
</label>
<input
@@ -242,18 +242,18 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="end_at"
value={formData.end_at || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
/>
</div>
</div>
{/* URLs Section */}
<div className="border-t border-gray-200 pt-4">
<h4 className="text-md font-medium text-gray-900 mb-3">لینک‌ها</h4>
<div className="border-t border-gray-200 dark:border-gray-800 pt-4">
<h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">لینک‌ها</h4>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{/* Myket URL */}
<div>
<label htmlFor="url_myket" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_myket" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک مایکت
</label>
<input
@@ -262,14 +262,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_myket"
value={formData.url_myket || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
placeholder="https://myket.ir/app/..."
/>
</div>
{/* Bazaar URL */}
<div>
<label htmlFor="url_bazzar" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_bazzar" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک بازار
</label>
<input
@@ -278,14 +278,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_bazzar"
value={formData.url_bazzar || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
placeholder="https://cafebazaar.ir/app/..."
/>
</div>
{/* Google Play URL */}
<div>
<label htmlFor="url_google_play" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_google_play" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک گوگل‌پلی
</label>
<input
@@ -294,14 +294,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_google_play"
value={formData.url_google_play || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
placeholder="https://play.google.com/store/apps/..."
/>
</div>
{/* Site URL */}
<div>
<label htmlFor="url_site" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_site" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک وبسایت
</label>
<input
@@ -310,7 +310,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_site"
value={formData.url_site || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
placeholder="https://example.com"
/>
</div>
@@ -319,12 +319,12 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
{/* Image Upload */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تصویر
</label>
<div className="flex items-center space-x-3 space-x-reverse">
<label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
<PhotoIcon className="h-5 w-5 ml-2 text-gray-400" />
<label className="cursor-pointer 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 transition-colors">
<PhotoIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
انتخاب تصویر
<input
type="file"
@@ -337,14 +337,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
<button
type="button"
onClick={removeImage}
className="text-red-600 hover:text-red-900"
className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 transition-colors"
>
<XMarkIcon className="h-5 w-5" />
</button>
)}
</div>
{imagePreview && (
<div className="mt-2 relative h-32 w-32 rounded-lg overflow-hidden border border-gray-200">
<div className="mt-2 relative h-32 w-32 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
<img
src={imagePreview}
alt="Preview"
@@ -352,7 +352,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
/>
</div>
)}
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
حداکثر حجم: ۲ مگابایت
</p>
</div>
@@ -365,27 +365,27 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
id="is_active"
checked={isActive}
onChange={(e) => setIsActive(e.target.checked)}
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded"
/>
<label htmlFor="is_active" className="mr-2 block text-sm text-gray-900">
<label htmlFor="is_active" className="mr-2 block text-sm text-gray-900 dark:text-gray-100">
فعال
</label>
</div>
)}
{/* Form Actions */}
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
<button
type="button"
onClick={onCancel}
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="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 transition-colors"
>
انصراف
</button>
<button
type="submit"
disabled={isLoading}
className="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 disabled:opacity-50"
className="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"
>
{isLoading ? 'در حال ذخیره...' : promotion ? 'به‌روزرسانی' : 'ایجاد'}
</button>
components/admin/promotions/PromotionList.tsx
+25 -25
View File
@@ -28,8 +28,8 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
if (!promotions || promotions.length === 0) {
return (
<div className="text-center py-12 bg-white rounded-lg shadow">
<p className="text-gray-500">هیچ تبلیغاتی یافت نشد</p>
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
<p className="text-gray-500 dark:text-gray-400">هیچ تبلیغاتی یافت نشد</p>
</div>
);
}
@@ -49,22 +49,22 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
};
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
لیست تبلیغات
</h3>
</div>
<ul className="divide-y divide-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{sortedPromotions.map((promotion) => (
<li key={promotion.id} className="px-6 py-4 hover:bg-gray-50">
<li key={promotion.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-start space-x-4 space-x-reverse">
{/* Promotion Image - Using unoptimized Image component */}
{promotion.image_url && !imageErrors[promotion.id] && (
<div className="flex-shrink-0">
<div className="relative h-20 w-20 rounded-lg overflow-hidden border border-gray-200">
<div className="relative h-20 w-20 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
<Image
src={promotion.image_url}
alt={promotion.title || 'Promotion'}
@@ -81,18 +81,18 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
<div className="flex-1">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2 space-x-reverse">
<p className="text-sm font-medium text-indigo-600">
<p className="text-sm font-medium text-indigo-600 dark:text-indigo-400">
{promotion.title || 'بدون عنوان'}
</p>
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
{getPromotionTypeLabel(promotion.type)}
</span>
{promotion.is_active ? (
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
فعال
</span>
) : (
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
غیرفعال
</span>
)}
@@ -100,32 +100,32 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
</div>
{promotion.subtitle && (
<p className="mt-1 text-sm text-gray-600">
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
{promotion.subtitle}
</p>
)}
{promotion.action_text && (
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
متن دکمه: {promotion.action_text}
</p>
)}
<div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
{promotion.priority && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">اولویت:</span> {promotion.priority}
</div>
)}
{promotion.start_at && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">شروع:</span> {formatDate(promotion.start_at)}
</div>
)}
{promotion.end_at && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">پایان:</span> {formatDate(promotion.end_at)}
</div>
)}
@@ -134,28 +134,28 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
{/* URLs */}
<div className="mt-2 space-y-1">
{promotion.url_site && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">وبسایت:</span> {promotion.url_site}
</div>
)}
{promotion.url_myket && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">مایکت:</span> {promotion.url_myket}
</div>
)}
{promotion.url_bazzar && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">بازار:</span> {promotion.url_bazzar}
</div>
)}
{promotion.url_google_play && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">گوگل‌پلی:</span> {promotion.url_google_play}
</div>
)}
</div>
<div className="mt-2 text-xs text-gray-400">
<div className="mt-2 text-xs text-gray-400 dark:text-gray-500">
آخرین به‌روزرسانی: {formatDate(promotion.updated_at)}
</div>
</div>
@@ -166,8 +166,8 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
<div className="mr-4 flex-shrink-0 flex flex-col space-y-2">
<button
onClick={() => onToggleActive(promotion)}
className={`p-2 rounded-full hover:bg-gray-100 ${
promotion.is_active ? 'text-green-600' : 'text-gray-400'
className={`p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${
promotion.is_active ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'
}`}
title={promotion.is_active ? 'غیرفعال کردن' : 'فعال کردن'}
>
@@ -179,13 +179,13 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
</button>
<button
onClick={() => onEdit(promotion)}
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
>
<PencilIcon className="h-5 w-5" />
</button>
<button
onClick={() => onDelete(promotion)}
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
>
<TrashIcon className="h-5 w-5" />
</button>
components/admin/referral/ReferralList.tsx
+17 -17
View File
@@ -20,12 +20,12 @@ export default function ReferralList({
}: ReferralListProps) {
if (users.length === 0) {
return (
<div className="text-center py-12 bg-white rounded-lg shadow">
<GiftIcon className="h-10 w-10 text-gray-300 mx-auto mb-3" />
<p className="text-gray-500">
<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">
<GiftIcon className="h-10 w-10 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
<p className="text-gray-500 dark:text-gray-400">
در حال حاضر هیچ کاربری واجد شرایط دریافت پاداش معرفی نیست.
</p>
<p className="text-sm text-gray-400 mt-1">
<p className="text-sm text-gray-400 dark:text-gray-500 mt-1">
کاربران پس از {subscriptionTarget} دعوت موفق در این لیست نمایش داده می‌شوند.
</p>
</div>
@@ -33,41 +33,41 @@ export default function ReferralList({
}
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<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 flex items-center justify-between">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
کاربران واجد شرایط پاداش
</h3>
<span className="px-3 py-1 text-xs font-medium rounded-full bg-indigo-100 text-indigo-800">
<span className="px-3 py-1 text-xs font-medium rounded-full bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300">
هدف: {subscriptionTarget} دعوت موفق
</span>
</div>
<ul className="divide-y divide-gray-200 border-t border-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-800 border-t border-gray-200 dark:border-gray-800">
{users.map((user) => (
<li key={user.id} className="px-4 py-4 sm:px-6">
<li key={user.id} className="px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors">
<div className="flex items-center justify-between flex-wrap gap-3">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<UserIcon className="h-4 w-4 text-gray-400" />
<p className="text-sm font-medium text-gray-900 truncate">
<UserIcon className="h-4 w-4 text-gray-400 dark:text-gray-500" />
<p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
{user.name || 'بدون نام'}
</p>
<span className="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800">
<span className="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
{user.successful_invites} دعوت موفق
</span>
</div>
<div className="mt-2 flex flex-wrap gap-x-6 gap-y-1 text-sm text-gray-500">
<div className="mt-2 flex flex-wrap gap-x-6 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
<span className="flex items-center">
<EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400" />
<EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{user.email || 'ایمیل ثبت نشده'}
</span>
<span className="flex items-center">
<PhoneIcon className="h-4 w-4 ml-1 text-gray-400" />
<PhoneIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{user.mobile || 'شماره ثبت نشده'}
</span>
{user.referral_code && (
<span className="flex items-center">
<TicketIcon className="h-4 w-4 ml-1 text-gray-400" />
<TicketIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
کد معرف: {user.referral_code}
</span>
)}
@@ -76,7 +76,7 @@ export default function ReferralList({
<button
onClick={() => onFulfill(user)}
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-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
<GiftIcon className="h-5 w-5 ml-2" />
{fulfillingId === user.id ? 'در حال اعطا...' : 'اعطای اشتراک رایگان'}
components/admin/reminders/ReminderForm.tsx
+17 -17
View File
@@ -106,9 +106,9 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
};
return (
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
<form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow transition-colors">
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
{reminder ? 'ویرایش یادآوری' : 'ایجاد یادآوری جدید'} برای پکیج {packageName}
</h3>
</div>
@@ -116,7 +116,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Title */}
<div className="md:col-span-2">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
عنوان <span className="text-red-500">*</span>
</label>
<input
@@ -126,14 +126,14 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
required
value={formData.title || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
placeholder="مثال: یادآوری روزانه"
/>
</div>
{/* Type */}
<div>
<label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
نوع <span className="text-red-500">*</span>
</label>
<select
@@ -142,7 +142,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
required
value={formData.type || 'reminder'}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
>
{Object.entries(REMINDER_TYPES).map(([value, label]) => (
<option key={value} value={value}>
@@ -154,7 +154,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
{/* Time */}
<div>
<label htmlFor="time" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="time" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
زمان <span className="text-red-500">*</span>
</label>
<input
@@ -164,7 +164,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
required
value={formData.time || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
/>
</div>
@@ -177,9 +177,9 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
name="repeatable"
checked={formData.repeatable || false}
onChange={handleInputChange}
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded"
/>
<label htmlFor="repeatable" className="mr-2 block text-sm text-gray-900">
<label htmlFor="repeatable" className="mr-2 block text-sm text-gray-900 dark:text-gray-100">
قابل تکرار
</label>
</div>
@@ -188,7 +188,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
{/* Repeat Days */}
{formData.repeatable && (
<div>
<label htmlFor="repeat_days" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="repeat_days" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
فاصله تکرار (روز)
</label>
<input
@@ -198,7 +198,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
min="1"
value={formData.repeat_days || ''}
onChange={handleNumberChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
placeholder="مثال: 7"
/>
</div>
@@ -207,7 +207,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
{/* Description */}
<div>
<label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
توضیحات
</label>
<textarea
@@ -216,24 +216,24 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
rows={3}
value={formData.description || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
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 transition-colors"
placeholder="توضیحات یادآوری را وارد کنید..."
/>
</div>
{/* Form Actions */}
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
<button
type="button"
onClick={onCancel}
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="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 transition-colors"
>
انصراف
</button>
<button
type="submit"
disabled={isLoading}
className="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 disabled:opacity-50"
className="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"
>
{isLoading ? 'در حال ذخیره...' : reminder ? 'به‌روزرسانی' : 'ایجاد'}
</button>
components/admin/reminders/ReminderList.tsx
+15 -15
View File
@@ -24,8 +24,8 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
if (!reminders || reminders.length === 0) {
return (
<div className="text-center py-12 bg-white rounded-lg shadow">
<p className="text-gray-500">هیچ یادآوری برای این پکیج یافت نشد</p>
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow transition-colors">
<p className="text-gray-500 dark:text-gray-400">هیچ یادآوری برای این پکیج یافت نشد</p>
</div>
);
}
@@ -36,15 +36,15 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
);
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg transition-colors">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
یادآوری‌های پکیج {packageName}
</h3>
</div>
<ul className="divide-y divide-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{sortedReminders.map((reminder) => (
<li key={reminder.id} className="px-6 py-4 hover:bg-gray-50">
<li key={reminder.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
@@ -54,38 +54,38 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
) : (
<BellIcon className="h-5 w-5 text-indigo-500" />
)}
<p className="text-sm font-medium text-gray-900">
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
{reminder.title}
</p>
</div>
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
{getReminderTypeLabel(reminder.type)}
</span>
</div>
{reminder.description && (
<p className="mt-1 text-sm text-gray-600">
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
{reminder.description}
</p>
)}
<div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-3">
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">زمان:</span> {formatDate(reminder.time)} {formatTime(reminder.time)}
</div>
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">تکرار:</span> {reminder.repeatable ? 'فعال' : 'غیرفعال'}
</div>
{reminder.repeatable && reminder.repeat_days && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">فاصله تکرار:</span> هر {reminder.repeat_days} روز
</div>
)}
</div>
<div className="mt-2 text-xs text-gray-400">
<div className="mt-2 text-xs text-gray-400 dark:text-gray-500">
آخرین به‌روزرسانی: {formatDate(reminder.updated_at)}
</div>
</div>
@@ -93,13 +93,13 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
<button
onClick={() => onEdit(reminder)}
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-950/40 transition-colors"
>
<PencilIcon className="h-5 w-5" />
</button>
<button
onClick={() => onDelete(reminder)}
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
>
<TrashIcon className="h-5 w-5" />
</button>
components/admin/users/PackageSelector.tsx
+3 -3
View File
@@ -41,8 +41,8 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
};
return (
<div className="bg-white p-4 rounded-lg shadow mb-6">
<label htmlFor="package-select" className="block text-sm font-medium text-gray-700 mb-2">
<div className="bg-white dark:bg-gray-900 p-4 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 mb-6">
<label htmlFor="package-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
انتخاب پکیج
</label>
<select
@@ -50,7 +50,7 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
value={selectedPackage || ''}
onChange={handleChange}
disabled={loading || isLoading}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 bg-white dark:bg-gray-800 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 transition-colors"
>
{loading ? (
<option>در حال بارگذاری...</option>
components/admin/users/UserEditForm.tsx
+11 -11
View File
@@ -35,16 +35,16 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
};
const inputClass =
'block w-full px-3 py-2 border text-slate-900 border-gray-300 rounded-md leading-5 bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm';
'block w-full px-3 py-2 border text-slate-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-800 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors';
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
<div className="bg-white rounded-lg shadow-xl w-full max-w-lg" dir="rtl">
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
<h3 className="text-lg font-medium text-gray-900">ویرایش اطلاعات کاربر</h3>
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 dark:bg-black/60 p-4">
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-xl ring-1 ring-gray-200 dark:ring-gray-800 w-full max-w-lg" dir="rtl">
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">ویرایش اطلاعات کاربر</h3>
<button
onClick={onCancel}
className="text-gray-400 hover:text-gray-600"
className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors"
type="button"
>
<XMarkIcon className="h-5 w-5" />
@@ -54,7 +54,7 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
<form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">نام</label>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نام</label>
<input
type="text"
className={inputClass}
@@ -63,7 +63,7 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">نام خانوادگی</label>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نام خانوادگی</label>
<input
type="text"
className={inputClass}
@@ -101,7 +101,7 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
<input
type="file"
accept="image/*"
className="block w-full text-sm text-gray-700 file:ml-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
className="block w-full text-sm text-gray-700 dark:text-gray-300 file:ml-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 dark:file:bg-indigo-950/40 dark:file:text-indigo-300 dark:hover:file:bg-indigo-900/40"
onChange={(e) =>
setFormData({ ...formData, avatar: e.target.files?.[0] || null })
}
@@ -113,14 +113,14 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
type="button"
onClick={onCancel}
disabled={isLoading}
className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md 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 disabled:opacity-50 transition-colors"
>
انصراف
</button>
<button
type="submit"
disabled={isLoading}
className="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 disabled:opacity-50"
className="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 disabled:opacity-50 transition-colors"
>
{isLoading ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
</button>
components/admin/users/UserInfo.tsx
+29 -29
View File
@@ -10,61 +10,61 @@ interface UserInfoProps {
export default function UserInfo({ user }: UserInfoProps) {
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg 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 mb-6">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
اطلاعات کاربر
</h3>
</div>
<div className="border-t border-gray-200">
<div className="border-t border-gray-200 dark:border-gray-800">
<dl>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">نام کامل</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
<UserIcon className="h-4 w-4 ml-1 text-gray-400" />
<div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">نام کامل</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
<UserIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{getFullName(user)}
</dd>
</div>
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">ایمیل</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
<EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400" />
<div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">ایمیل</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
<EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{getEmail(user.email)}
</dd>
</div>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">شماره موبایل</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
<PhoneIcon className="h-4 w-4 ml-1 text-gray-400" />
<div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">شماره موبایل</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
<PhoneIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{getMobile(user.mobile)}
</dd>
</div>
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">کیف پول</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
<WalletIcon className="h-4 w-4 ml-1 text-gray-400" />
<div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">کیف پول</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
<WalletIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{formatPrice(user.wallet)} تومان
</dd>
</div>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">تاریخ عضویت</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
<CalendarIcon className="h-4 w-4 ml-1 text-gray-400" />
<div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ عضویت</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
<CalendarIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{formatDate(user.created_at)}
</dd>
</div>
{user.birthday && (
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">تاریخ تولد</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ تولد</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
{formatDate(user.birthday)}
</dd>
</div>
)}
{user.gender && (
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">جنسیت</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">جنسیت</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
{user.gender === 'male' ? 'مرد' : user.gender === 'female' ? 'زن' : user.gender}
</dd>
</div>
components/admin/users/UserProducts.tsx
+23 -23
View File
@@ -67,24 +67,24 @@ export default function UserProducts({
};
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<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">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
اشتراک‌های کاربر
</h3>
</div>
{/* Current Subscriptions grouped by package */}
<div className="border-t border-gray-200">
<div className="border-t border-gray-200 dark:border-gray-800">
{Object.keys(productsByPackage).length > 0 ? (
Object.entries(productsByPackage).map(([packageName, packageProducts]) => (
<div key={packageName} className="border-b border-gray-200 last:border-b-0">
<div className="bg-gray-50 px-4 py-2">
<h4 className="text-sm font-medium text-gray-700">
<div key={packageName} className="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
<div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-2">
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
پکیج: {packageName}
</h4>
</div>
<ul className="divide-y divide-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{packageProducts.map((product) => {
const status = getSubscriptionStatus(product);
const StatusIcon = status.icon;
@@ -96,17 +96,17 @@ export default function UserProducts({
<div className="flex-1">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2 space-x-reverse">
<p className="text-sm font-medium text-indigo-600 truncate">
<p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate">
{product.title || 'محصول'}
</p>
{subscriptionCount > 1 && (
<span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">
<span className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full">
{subscriptionCount} اشتراک
</span>
)}
</div>
<div className="mr-2 flex-shrink-0 flex">
<p className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${status.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
<p className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${status.isActive ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'}`}>
<StatusIcon className={`h-4 w-4 ml-1 ${status.color}`} />
{status.text}
</p>
@@ -114,23 +114,23 @@ export default function UserProducts({
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
<p className="flex items-center text-sm text-gray-500">
<p className="flex items-center text-sm text-gray-500 dark:text-gray-400">
قیمت: {formatPrice(product.price)} تومان
</p>
<p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:mr-6">
<p className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:mr-6">
نوع: {getProductTypeLabel(product.type)}
</p>
{product.pivot?.expire_at && (
<p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:mr-6">
<p className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:mr-6">
تاریخ انقضا: {formatDate(product.pivot.expire_at)}
</p>
)}
</div>
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
<div className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
<button
onClick={() => onUnsubscribe(product.id)}
disabled={isLoading}
className="text-red-600 hover:text-red-900 disabled:opacity-50"
className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 disabled:opacity-50 transition-colors"
>
لغو اشتراک
</button>
@@ -145,7 +145,7 @@ export default function UserProducts({
</div>
))
) : (
<div className="px-4 py-5 sm:px-6 text-center text-gray-500">
<div className="px-4 py-5 sm:px-6 text-center text-gray-500 dark:text-gray-400">
کاربر هیچ اشتراکی ندارد
</div>
)}
@@ -153,8 +153,8 @@ export default function UserProducts({
{/* Available Products for Subscription */}
{availableProducts && availableProducts.length > 0 && selectedPackage && (
<div className="border-t border-gray-200 px-4 py-5 sm:px-6">
<h4 className="text-md font-medium text-gray-900 mb-3">
<div className="border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
<h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">
افزودن اشتراک جدید برای پکیج {selectedPackage}
</h4>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
@@ -166,22 +166,22 @@ export default function UserProducts({
key={product.id}
onClick={() => handleSubscribeClick(product.id)}
disabled={isLoading}
className="relative block w-full border-2 border-indigo-200 rounded-lg p-4 text-right hover:border-indigo-500 hover:bg-indigo-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
className="relative block w-full border-2 border-indigo-200 dark:border-indigo-900/60 rounded-lg p-4 text-right hover:border-indigo-500 hover:bg-indigo-50 dark:hover:border-indigo-500 dark:hover:bg-indigo-950/40 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
>
<div className="flex items-start justify-between">
<div>
<p className="text-sm font-medium text-gray-900">
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
{product.title || 'محصول'}
</p>
{subscriptionCount > 0 && (
<p className="mt-1 text-xs text-amber-600">
<p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
{subscriptionCount} اشتراک فعال دارد
</p>
)}
</div>
<PlusCircleIcon className="h-5 w-5 text-indigo-600" />
<PlusCircleIcon className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
</div>
<p className="mt-2 text-xs text-gray-500">
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
برای افزودن اشتراک جدید کلیک کنید
</p>
</button>
components/admin/users/UserSearch.tsx
+3 -3
View File
@@ -27,12 +27,12 @@ export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
</label>
<div className="relative">
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400 dark:text-gray-500" />
</div>
<input
type="text"
id="search"
className="block w-full pr-10 pl-3 py-2 border text-slate-900 border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full pr-10 pl-3 py-2 border text-slate-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="جستجو با ایمیل یا شماره موبایل..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
@@ -43,7 +43,7 @@ export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
<button
type="submit"
disabled={isLoading || !searchTerm.trim()}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm 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"
>
{isLoading ? 'در حال جستجو...' : 'جستجو'}
</button>
next-env.d.ts
Vendored
+1 -1
View File
@@ -1,6 +1,6 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />
import "./.next/dev/types/routes.d.ts";
import "./.next/types/routes.d.ts";
// NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.