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 { useAuth } from '@/contexts/AuthContext';
import Link from 'next/link'; 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 { MegaphoneIcon } from 'lucide-react';
import ThemeToggle from '@/components/ThemeToggle';
// import { BellIcon } from 'lucide-react'; // import { BellIcon } from 'lucide-react';
export default function Dashboard() { export default function Dashboard() {
const { user, logout } = useAuth(); 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 ( return (
<div className="p-8"> <div className="p-4 sm:p-8">
<div className="max-w-7xl mx-auto"> <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"> <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> </h1>
<button <div className="flex items-center gap-2">
onClick={logout} <ThemeToggle withLabel />
className="px-4 py-2 bg-red-600 text-white rounded-md hover:bg-red-700 transition-colors" <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"
</button> >
<PowerIcon className="h-5 w-5" />
خروج
</button>
</div>
</div> </div>
<div className="border-t pt-6"> <div className="border-t border-gray-200 dark:border-gray-800 pt-6">
<h2 className="text-lg font-semibold mb-4 text-slate-900">خوش آمدید، {user?.email}</h2> <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 */} {/* Dashboard Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
<Link href="/admin/users" className="block"> {cards.map(({ href, title, desc, Icon, iconWrap }) => (
<div className="bg-indigo-50 hover:bg-indigo-100 rounded-lg p-6 transition-colors"> <Link key={href} href={href} className="block group">
<UsersIcon className="h-8 w-8 text-indigo-600 mb-3" /> <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">
<h3 className="text-lg font-medium text-gray-900">مدیریت کاربران</h3> <div className={`inline-flex h-12 w-12 items-center justify-center rounded-xl mb-4 ${iconWrap}`}>
<p className="text-sm text-gray-600 mt-1"> <Icon className="h-6 w-6" />
مشاهده و مدیریت کاربران، اشتراک‌ها و تراکنش‌ها </div>
</p> <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">{title}</h3>
</div> <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
</Link> {desc}
</p>
<Link href="/admin/packages" className="block"> </div>
<div className="bg-green-50 hover:bg-green-100 rounded-lg p-6 transition-colors"> </Link>
<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> </div>
</div> </div>
</div> </div>
app/admin/layout.tsx
+3 -1
View File
@@ -1,6 +1,7 @@
'use client'; 'use client';
import { AuthProvider } from '@/contexts/AuthContext'; import { AuthProvider } from '@/contexts/AuthContext';
import ThemeToggle from '@/components/ThemeToggle';
export default function AdminLayout({ export default function AdminLayout({
children, children,
@@ -9,8 +10,9 @@ export default function AdminLayout({
}) { }) {
return ( return (
<AuthProvider> <AuthProvider>
<div className="min-h-screen bg-gray-100"> <div className="min-h-screen bg-gray-100 dark:bg-gray-950">
{children} {children}
<ThemeToggle floating />
</div> </div>
</AuthProvider> </AuthProvider>
); );
app/admin/login/page.tsx
+66 -59
View File
@@ -4,6 +4,7 @@ import { useState } from 'react';
import { useAuth } from '@/contexts/AuthContext'; import { useAuth } from '@/contexts/AuthContext';
import { useRouter } from 'next/navigation'; import { useRouter } from 'next/navigation';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { LockClosedIcon } from '@heroicons/react/24/outline';
export default function LoginPage() { export default function LoginPage() {
const [auth, setAuth] = useState(''); const [auth, setAuth] = useState('');
@@ -36,72 +37,78 @@ export default function LoginPage() {
}; };
return ( 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="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 space-y-8"> <div className="max-w-md w-full">
<div> <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">
<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> <div>
<div className='py-2'> <div className="mx-auto h-14 w-14 rounded-2xl bg-indigo-600 flex items-center justify-center mb-4">
<label htmlFor="auth" className="sr-only"> <LockClosedIcon className="h-7 w-7 text-white" />
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> </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> </div>
{(error || localError) && ( <form className="space-y-5" onSubmit={handleSubmit}>
<div className="rounded-md bg-red-50 p-4"> <div className="space-y-4">
<div className="flex"> <div>
<div className="ml-3"> <label htmlFor="auth" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
<h3 className="text-sm font-medium text-red-800"> ایمیل
{localError || error} </label>
</h3> <input
</div> 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> </div>
)}
<div> {(error || localError) && (
<button <div className="rounded-lg bg-red-50 dark:bg-red-900/20 p-4">
type="submit" <h3 className="text-sm font-medium text-red-800 dark:text-red-300 text-center">
disabled={isLoading} {localError || error}
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" </h3>
> </div>
{isLoading ? 'کمی صبر کنید' : 'ورود'} )}
</button>
</div> <div>
</form> <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>
</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="p-6">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="flex justify-between items-center mb-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> </h1>
{!isFormVisible && ( {!isFormVisible && (
<button <button
onClick={handleCreate} 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" /> <PlusIcon className="h-5 w-5 ml-2" />
پکیج جدید پکیج جدید
@@ -120,14 +120,14 @@ export default function PackagesPage() {
{/* Messages */} {/* Messages */}
{error && ( {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">
<p className="text-sm text-red-800">{error}</p> <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
</div> </div>
)} )}
{success && ( {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">
<p className="text-sm text-green-800">{success}</p> <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
</div> </div>
)} )}
app/admin/products/page.tsx
+9 -9
View File
@@ -170,14 +170,14 @@ export default function ProductsPage() {
<div className="p-6"> <div className="p-6">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="flex justify-between items-center mb-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> </h1>
</div> </div>
{/* Package Selector */} {/* Package Selector */}
<div className="bg-white p-4 rounded-lg shadow mb-6"> <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 mb-2"> <label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
انتخاب پکیج انتخاب پکیج
</label> </label>
<select <select
@@ -185,7 +185,7 @@ export default function ProductsPage() {
value={selectedPackage?.name || ''} value={selectedPackage?.name || ''}
onChange={handlePackageChange} onChange={handlePackageChange}
disabled={isLoadingPackages} 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 ? ( {isLoadingPackages ? (
<option>در حال بارگذاری پکیج‌ها...</option> <option>در حال بارگذاری پکیج‌ها...</option>
@@ -201,14 +201,14 @@ export default function ProductsPage() {
{/* Messages */} {/* Messages */}
{error && ( {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">
<p className="text-sm text-red-800">{error}</p> <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
</div> </div>
)} )}
{success && ( {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">
<p className="text-sm text-green-800">{success}</p> <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
</div> </div>
)} )}
@@ -220,7 +220,7 @@ export default function ProductsPage() {
<button <button
onClick={handleCreate} onClick={handleCreate}
disabled={isLoading} 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" /> <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="p-6">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="flex justify-between items-center mb-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> </h1>
{!isFormVisible && ( {!isFormVisible && (
<button <button
onClick={handleCreate} onClick={handleCreate}
disabled={isLoading} 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" /> <PlusIcon className="h-5 w-5 ml-2" />
تبلیغ جدید تبلیغ جدید
@@ -140,14 +140,14 @@ export default function PromotionsPage() {
{/* Messages */} {/* Messages */}
{error && ( {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">
<p className="text-sm text-red-800">{error}</p> <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
</div> </div>
)} )}
{success && ( {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">
<p className="text-sm text-green-800">{success}</p> <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
</div> </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="max-w-7xl mx-auto">
<div className="flex justify-between items-center mb-6"> <div className="flex justify-between items-center mb-6">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900"> <h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
پاداش‌های معرفی پاداش‌های معرفی
</h1> </h1>
<p className="text-sm text-gray-500 mt-1"> <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
کاربرانی که به حد نصاب دعوت موفق رسیده‌اند و هنوز اشتراک رایگان دریافت نکرده‌اند. کاربرانی که به حد نصاب دعوت موفق رسیده‌اند و هنوز اشتراک رایگان دریافت نکرده‌اند.
</p> </p>
</div> </div>
<button <button
onClick={loadRewards} onClick={loadRewards}
disabled={isLoading} 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' : ''}`} /> <ArrowPathIcon className={`h-5 w-5 ml-2 ${isLoading ? 'animate-spin' : ''}`} />
بروزرسانی بروزرسانی
@@ -86,20 +86,20 @@ export default function ReferralRewardsPage() {
{/* Messages */} {/* Messages */}
{error && ( {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">
<p className="text-sm text-red-800">{error}</p> <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
</div> </div>
)} )}
{success && ( {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">
<p className="text-sm text-green-800">{success}</p> <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
</div> </div>
)} )}
{isLoading && users.length === 0 ? ( {isLoading && users.length === 0 ? (
<div className="text-center py-12 bg-white rounded-lg shadow"> <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">در حال بارگذاری...</p> <p className="text-gray-500 dark:text-gray-400">در حال بارگذاری...</p>
</div> </div>
) : ( ) : (
<ReferralList <ReferralList
app/admin/reminders/page.tsx
+9 -9
View File
@@ -164,14 +164,14 @@ export default function RemindersPage() {
<div className="p-6"> <div className="p-6">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<div className="flex justify-between items-center mb-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> </h1>
</div> </div>
{/* Package Selector */} {/* Package Selector */}
<div className="bg-white p-4 rounded-lg shadow mb-6"> <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 mb-2"> <label htmlFor="package" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
انتخاب پکیج انتخاب پکیج
</label> </label>
<select <select
@@ -179,7 +179,7 @@ export default function RemindersPage() {
value={selectedPackage?.name || ''} value={selectedPackage?.name || ''}
onChange={handlePackageChange} onChange={handlePackageChange}
disabled={isLoadingPackages} 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 ? ( {isLoadingPackages ? (
<option>در حال بارگذاری پکیج‌ها...</option> <option>در حال بارگذاری پکیج‌ها...</option>
@@ -195,14 +195,14 @@ export default function RemindersPage() {
{/* Messages */} {/* Messages */}
{error && ( {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">
<p className="text-sm text-red-800">{error}</p> <p className="text-sm text-red-800 dark:text-red-300">{error}</p>
</div> </div>
)} )}
{success && ( {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">
<p className="text-sm text-green-800">{success}</p> <p className="text-sm text-green-800 dark:text-green-300">{success}</p>
</div> </div>
)} )}
@@ -214,7 +214,7 @@ export default function RemindersPage() {
<button <button
onClick={handleCreate} onClick={handleCreate}
disabled={isLoading} 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" /> <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 ( return (
<div className="p-6"> <div className="p-6">
<div className="max-w-7xl mx-auto"> <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> </h1>
@@ -251,30 +251,30 @@ export default function UsersPage() {
{/* Messages */} {/* Messages */}
{error && ( {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">
<div className="flex-shrink-0"> <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" /> <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> </svg>
</div> </div>
<div className="mr-3"> <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> </div>
</div> </div>
)} )}
{success && ( {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">
<div className="flex-shrink-0"> <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" /> <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> </svg>
</div> </div>
<div className="mr-3"> <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> </div>
</div> </div>
@@ -282,40 +282,40 @@ export default function UsersPage() {
{/* No Package Selected Message */} {/* No Package Selected Message */}
{!selectedPackage && packages.length === 0 && ( {!selectedPackage && packages.length === 0 && (
<div className="text-center py-12 bg-white rounded-lg shadow"> <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">هیچ پکیجی یافت نشد. ابتدا یک پکیج ایجاد کنید.</p> <p className="text-gray-500 dark:text-gray-400">هیچ پکیجی یافت نشد. ابتدا یک پکیج ایجاد کنید.</p>
</div> </div>
)} )}
{/* Show products list even without user */} {/* Show products list even without user */}
{selectedPackage && products.length > 0 && !user && ( {selectedPackage && products.length > 0 && !user && (
<div className="mb-6"> <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"> <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} محصولات موجود در پکیج {selectedPackage}
</h3> </h3>
</div> </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"> <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
{products.map((product) => ( {products.map((product) => (
<div <div
key={product.id} 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 || 'محصول'} {product.title || 'محصول'}
</p> </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)} تومان قیمت: {formatPrice(product.price)} تومان
</p> </p>
<p className="text-xs text-gray-500"> <p className="text-xs text-gray-500 dark:text-gray-400">
نوع: {getProductTypeLabel(product.type)} نوع: {getProductTypeLabel(product.type)}
</p> </p>
</div> </div>
))} ))}
</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> </p>
</div> </div>
@@ -331,7 +331,7 @@ export default function UsersPage() {
<button <button
onClick={() => setIsEditing(true)} onClick={() => setIsEditing(true)}
disabled={isLoading} 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" /> <PencilSquareIcon className="h-5 w-5 ml-2" />
ویرایش اطلاعات ویرایش اطلاعات
@@ -339,7 +339,7 @@ export default function UsersPage() {
<button <button
onClick={handleDeleteUser} onClick={handleDeleteUser}
disabled={isLoading} 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" /> <TrashIcon className="h-5 w-5 ml-2" />
حذف کاربر حذف کاربر
app/globals.css
+50 -12
View File
@@ -1,8 +1,7 @@
@import "tailwindcss"; @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 { @theme {
--color-primary-50: #f0f1ff; --color-primary-50: #f0f1ff;
@@ -14,7 +13,7 @@
--color-primary-600: #5d68e0; --color-primary-600: #5d68e0;
--color-primary-700: #4853c4; --color-primary-700: #4853c4;
--color-primary-800: #343ea8; --color-primary-800: #343ea8;
--color-primary-900: #1f298; --color-primary-900: #2a318c;
} }
/* Dana Font Faces */ /* Dana Font Faces */
@@ -43,10 +42,16 @@
} }
:root { :root {
--background: #ffffff; --background: #f3f4f6;
--foreground: #171717; --foreground: #171717;
} }
/* Dark palette is driven by the `.dark` class so the toggle controls it */
.dark {
--background: #030712;
--foreground: #ededed;
}
@theme inline { @theme inline {
--color-background: var(--background); --color-background: var(--background);
--color-foreground: var(--foreground); --color-foreground: var(--foreground);
@@ -54,16 +59,49 @@
--font-mono: var(--font-geist-mono); --font-mono: var(--font-geist-mono);
} }
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body { body {
background: var(--background); background: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: 'Dana', 'Inter', Arial, Helvetica, sans-serif; font-family: 'Dana', 'Inter', Arial, Helvetica, sans-serif;
font-weight: 400; 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; children: React.ReactNode;
}) { }) {
return ( return (
<html lang="fa" dir="rtl"> <html lang="fa" dir="rtl" suppressHydrationWarning>
<head> <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 <meta
name="google-site-verification" name="google-site-verification"
content="HIKgdf_siYdPxbJ2P1792opMprpxci_QjE-quk9kyi8" 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 ( 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"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Name */} {/* Name */}
<div> <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> نام پکیج <span className="text-red-500">*</span>
</label> </label>
<input <input
@@ -109,7 +109,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
required required
value={formData.name || ''} value={formData.name || ''}
onChange={handleInputChange} 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" placeholder="مثال: com.approagency.meditation"
dir="ltr" dir="ltr"
/> />
@@ -117,7 +117,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
{/* Title */} {/* Title */}
<div> <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> عنوان <span className="text-red-500">*</span>
</label> </label>
<input <input
@@ -127,19 +127,19 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
required required
value={formData.title || ''} value={formData.title || ''}
onChange={handleInputChange} 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="مثال: آرام لند" placeholder="مثال: آرام لند"
/> />
</div> </div>
{/* Avatar */} {/* Avatar */}
<div> <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> </label>
<div className="flex items-center space-x-3 space-x-reverse"> <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"> <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" /> <PhotoIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
انتخاب تصویر انتخاب تصویر
<input <input
type="file" type="file"
@@ -152,7 +152,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
<button <button
type="button" type="button"
onClick={removeAvatar} 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" /> <XMarkIcon className="h-5 w-5" />
</button> </button>
@@ -163,7 +163,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
<img <img
src={avatarPreview} src={avatarPreview}
alt="Preview" 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> </div>
)} )}
@@ -171,7 +171,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
{/* V1 Identifier */} {/* V1 Identifier */}
<div> <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 شناسه V1
</label> </label>
<input <input
@@ -180,13 +180,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="v1_identifier" name="v1_identifier"
value={formData.v1_identifier || ''} value={formData.v1_identifier || ''}
onChange={handleInputChange} 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> </div>
{/* Myket Access Token */} {/* Myket Access Token */}
<div> <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 توکن دسترسی Myket
</label> </label>
<input <input
@@ -195,13 +195,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="myket_access_token" name="myket_access_token"
value={formData.myket_access_token || ''} value={formData.myket_access_token || ''}
onChange={handleInputChange} 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> </div>
{/* Cafe Config ID */} {/* Cafe Config ID */}
<div> <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> </label>
<input <input
@@ -210,13 +210,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="cafe_config_id" name="cafe_config_id"
value={formData.cafe_config_id || ''} value={formData.cafe_config_id || ''}
onChange={handleNumberChange} 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> </div>
{/* Web App URL */} {/* Web App URL */}
<div> <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> </label>
<input <input
@@ -225,14 +225,14 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="web_app_url" name="web_app_url"
value={formData.web_app_url || ''} value={formData.web_app_url || ''}
onChange={handleInputChange} 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" placeholder="https://example.com"
/> />
</div> </div>
{/* Tries */} {/* Tries */}
<div> <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> </label>
<input <input
@@ -241,17 +241,17 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="tries" name="tries"
value={formData.tries || 0} value={formData.tries || 0}
onChange={handleNumberChange} 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> </div>
{/* Firebase JSON */} {/* Firebase JSON */}
<div className="md:col-span-2"> <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 فایل Firebase JSON
</label> </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"> <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" /> <DocumentTextIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
انتخاب فایل انتخاب فایل
<input <input
type="file" type="file"
@@ -261,7 +261,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
/> />
</label> </label>
{firebaseFile && ( {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} فایل انتخاب شده: {firebaseFile.name}
</p> </p>
)} )}
@@ -269,18 +269,18 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
</div> </div>
{/* Form Actions */} {/* 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 <button
type="button" type="button"
onClick={onCancel} 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>
<button <button
type="submit" type="submit"
disabled={isLoading} 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 ? 'به‌روزرسانی' : 'ایجاد'} {isLoading ? 'در حال ذخیره...' : pkg ? 'به‌روزرسانی' : 'ایجاد'}
</button> </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) { if (!packages || packages.length === 0) {
return ( return (
<div className="text-center py-12 bg-white rounded-lg shadow"> <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
<p className="text-gray-500">هیچ پکیجی یافت نشد</p> <p className="text-gray-500 dark:text-gray-400">هیچ پکیجی یافت نشد</p>
</div> </div>
); );
} }
return ( 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">
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200 dark:divide-gray-800">
{packages.map((pkg) => ( {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 items-center justify-between">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center space-x-3 space-x-reverse"> <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> <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 || 'بدون عنوان'} {pkg.title || 'بدون عنوان'}
</p> </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 || 'بدون نام'} {pkg.name || 'بدون نام'}
</p> </p>
</div> </div>
@@ -57,7 +57,7 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
</div> </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)} آخرین به‌روزرسانی: {formatDate(pkg.updated_at)}
</p> </p>
</div> </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"> <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
<button <button
onClick={() => onEdit(pkg)} 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" /> <PencilIcon className="h-5 w-5" />
</button> </button>
<button <button
onClick={() => onDelete(pkg)} 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" /> <TrashIcon className="h-5 w-5" />
</button> </button>
components/admin/products/ProductForm.tsx
+17 -17
View File
@@ -64,9 +64,9 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
}; };
return ( 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> <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} {product ? 'ویرایش محصول' : 'ایجاد محصول جدید'} برای پکیج {packageName}
</h3> </h3>
</div> </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"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Title */} {/* Title */}
<div> <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> عنوان <span className="text-red-500">*</span>
</label> </label>
<input <input
@@ -84,14 +84,14 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
required required
value={formData.title || ''} value={formData.title || ''}
onChange={handleInputChange} 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="مثال: اشتراک ماهانه" placeholder="مثال: اشتراک ماهانه"
/> />
</div> </div>
{/* Price */} {/* Price */}
<div> <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> قیمت (تومان) <span className="text-red-500">*</span>
</label> </label>
<input <input
@@ -102,14 +102,14 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
min="0" min="0"
value={formData.price || ''} value={formData.price || ''}
onChange={handleInputChange} 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" placeholder="مثال: 60000"
/> />
</div> </div>
{/* Type */} {/* Type */}
<div> <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> نوع اشتراک <span className="text-red-500">*</span>
</label> </label>
<select <select
@@ -118,7 +118,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
required required
value={formData.type || 4} value={formData.type || 4}
onChange={handleInputChange} 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]) => ( {Object.entries(PRODUCT_TYPES).map(([value, label]) => (
<option key={value} value={value}> <option key={value} value={value}>
@@ -131,7 +131,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
{/* Descriptions */} {/* Descriptions */}
<div> <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> </label>
<div className="flex space-x-2 space-x-reverse"> <div className="flex space-x-2 space-x-reverse">
@@ -139,7 +139,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
type="text" type="text"
value={newDescription} value={newDescription}
onChange={(e) => setNewDescription(e.target.value)} 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="ویژگی جدید را وارد کنید" placeholder="ویژگی جدید را وارد کنید"
onKeyPress={(e) => { onKeyPress={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
@@ -151,7 +151,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
<button <button
type="button" type="button"
onClick={handleAddDescription} 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" /> <PlusIcon className="h-5 w-5" />
</button> </button>
@@ -161,12 +161,12 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
{descriptions.length > 0 && ( {descriptions.length > 0 && (
<ul className="mt-3 space-y-2"> <ul className="mt-3 space-y-2">
{descriptions.map((desc, index) => ( {descriptions.map((desc, index) => (
<li key={index} className="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-md"> <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">{desc}</span> <span className="text-sm text-gray-700 dark:text-gray-300">{desc}</span>
<button <button
type="button" type="button"
onClick={() => handleRemoveDescription(index)} 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" /> <XMarkIcon className="h-5 w-5" />
</button> </button>
@@ -177,18 +177,18 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
</div> </div>
{/* Form Actions */} {/* 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 <button
type="button" type="button"
onClick={onCancel} 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>
<button <button
type="submit" type="submit"
disabled={isLoading} 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 ? 'به‌روزرسانی' : 'ایجاد'} {isLoading ? 'در حال ذخیره...' : product ? 'به‌روزرسانی' : 'ایجاد'}
</button> </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) { if (!products || products.length === 0) {
return ( return (
<div className="text-center py-12 bg-white rounded-lg shadow"> <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
<p className="text-gray-500">هیچ محصولی برای این پکیج یافت نشد</p> <p className="text-gray-500 dark:text-gray-400">هیچ محصولی برای این پکیج یافت نشد</p>
</div> </div>
); );
} }
return ( 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"> <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} محصولات پکیج {packageName}
</h3> </h3>
</div> </div>
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200 dark:divide-gray-800">
{products.map((product) => ( {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 items-center justify-between">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center justify-between"> <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 || 'بدون عنوان'} {product.title || 'بدون عنوان'}
</p> </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)} {getProductTypeLabel(product.type)}
</span> </span>
</div> </div>
<div className="mt-2"> <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)} تومان قیمت: {formatPrice(product.price)} تومان
</p> </p>
{product.descriptions && product.descriptions.length > 0 && ( {product.descriptions && product.descriptions.length > 0 && (
<div className="mt-2"> <div className="mt-2">
<p className="text-xs text-gray-500 mb-1">ویژگی‌ها:</p> <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 pr-4"> <ul className="list-disc list-inside text-xs text-gray-600 dark:text-gray-400 pr-4">
{product.descriptions.map((desc, index) => ( {product.descriptions.map((desc, index) => (
<li key={index}>{desc}</li> <li key={index}>{desc}</li>
))} ))}
@@ -65,20 +65,20 @@ export default function ProductList({ products, packageName, onEdit, onDelete, i
</div> </div>
)} )}
</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)} آخرین به‌روزرسانی: {formatDate(product.updated_at)}
</div> </div>
</div> </div>
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse"> <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
<button <button
onClick={() => onEdit(product)} 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" /> <PencilIcon className="h-5 w-5" />
</button> </button>
<button <button
onClick={() => onDelete(product)} 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" /> <TrashIcon className="h-5 w-5" />
</button> </button>
components/admin/promotions/PromotionForm.tsx
+37 -37
View File
@@ -122,9 +122,9 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
}; };
return ( 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> <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 ? 'ویرایش تبلیغ' : 'ایجاد تبلیغ جدید'} {promotion ? 'ویرایش تبلیغ' : 'ایجاد تبلیغ جدید'}
</h3> </h3>
</div> </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"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Type */} {/* Type */}
<div> <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> نوع <span className="text-red-500">*</span>
</label> </label>
<select <select
@@ -141,7 +141,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
required required
value={formData.type || 'slider'} value={formData.type || 'slider'}
onChange={handleInputChange} 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]) => ( {Object.entries(PROMOTION_TYPES).map(([value, label]) => (
<option key={value} value={value}> <option key={value} value={value}>
@@ -153,7 +153,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
{/* Title */} {/* Title */}
<div> <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> </label>
<input <input
@@ -162,14 +162,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="title" name="title"
value={formData.title || ''} value={formData.title || ''}
onChange={handleInputChange} 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="عنوان تبلیغ" placeholder="عنوان تبلیغ"
/> />
</div> </div>
{/* Subtitle */} {/* Subtitle */}
<div className="md:col-span-2"> <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> </label>
<input <input
@@ -178,14 +178,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="subtitle" name="subtitle"
value={formData.subtitle || ''} value={formData.subtitle || ''}
onChange={handleInputChange} 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="زیرعنوان تبلیغ" placeholder="زیرعنوان تبلیغ"
/> />
</div> </div>
{/* Action Text */} {/* Action Text */}
<div> <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> </label>
<input <input
@@ -194,14 +194,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="action_text" name="action_text"
value={formData.action_text || ''} value={formData.action_text || ''}
onChange={handleInputChange} 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="مثال: همین حالا نصب کن" placeholder="مثال: همین حالا نصب کن"
/> />
</div> </div>
{/* Priority */} {/* Priority */}
<div> <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> </label>
<input <input
@@ -211,14 +211,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
min="0" min="0"
value={formData.priority || 0} value={formData.priority || 0}
onChange={handleNumberChange} 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="عدد بالاتر = اولویت بیشتر" placeholder="عدد بالاتر = اولویت بیشتر"
/> />
</div> </div>
{/* Start Date */} {/* Start Date */}
<div> <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> </label>
<input <input
@@ -227,13 +227,13 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="start_at" name="start_at"
value={formData.start_at || ''} value={formData.start_at || ''}
onChange={handleInputChange} 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>
{/* End Date */} {/* End Date */}
<div> <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> </label>
<input <input
@@ -242,18 +242,18 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="end_at" name="end_at"
value={formData.end_at || ''} value={formData.end_at || ''}
onChange={handleInputChange} 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>
</div> </div>
{/* URLs Section */} {/* URLs Section */}
<div className="border-t border-gray-200 pt-4"> <div className="border-t border-gray-200 dark:border-gray-800 pt-4">
<h4 className="text-md font-medium text-gray-900 mb-3">لینک‌ها</h4> <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"> <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{/* Myket URL */} {/* Myket URL */}
<div> <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> </label>
<input <input
@@ -262,14 +262,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_myket" name="url_myket"
value={formData.url_myket || ''} value={formData.url_myket || ''}
onChange={handleInputChange} 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/..." placeholder="https://myket.ir/app/..."
/> />
</div> </div>
{/* Bazaar URL */} {/* Bazaar URL */}
<div> <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> </label>
<input <input
@@ -278,14 +278,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_bazzar" name="url_bazzar"
value={formData.url_bazzar || ''} value={formData.url_bazzar || ''}
onChange={handleInputChange} 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/..." placeholder="https://cafebazaar.ir/app/..."
/> />
</div> </div>
{/* Google Play URL */} {/* Google Play URL */}
<div> <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> </label>
<input <input
@@ -294,14 +294,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_google_play" name="url_google_play"
value={formData.url_google_play || ''} value={formData.url_google_play || ''}
onChange={handleInputChange} 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/..." placeholder="https://play.google.com/store/apps/..."
/> />
</div> </div>
{/* Site URL */} {/* Site URL */}
<div> <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> </label>
<input <input
@@ -310,7 +310,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_site" name="url_site"
value={formData.url_site || ''} value={formData.url_site || ''}
onChange={handleInputChange} 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" placeholder="https://example.com"
/> />
</div> </div>
@@ -319,12 +319,12 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
{/* Image Upload */} {/* Image Upload */}
<div> <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> </label>
<div className="flex items-center space-x-3 space-x-reverse"> <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"> <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" /> <PhotoIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
انتخاب تصویر انتخاب تصویر
<input <input
type="file" type="file"
@@ -337,14 +337,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
<button <button
type="button" type="button"
onClick={removeImage} 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" /> <XMarkIcon className="h-5 w-5" />
</button> </button>
)} )}
</div> </div>
{imagePreview && ( {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 <img
src={imagePreview} src={imagePreview}
alt="Preview" alt="Preview"
@@ -352,7 +352,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
/> />
</div> </div>
)} )}
<p className="mt-1 text-xs text-gray-500"> <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
حداکثر حجم: ۲ مگابایت حداکثر حجم: ۲ مگابایت
</p> </p>
</div> </div>
@@ -365,27 +365,27 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
id="is_active" id="is_active"
checked={isActive} checked={isActive}
onChange={(e) => setIsActive(e.target.checked)} 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> </label>
</div> </div>
)} )}
{/* Form Actions */} {/* 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 <button
type="button" type="button"
onClick={onCancel} 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>
<button <button
type="submit" type="submit"
disabled={isLoading} 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 ? 'به‌روزرسانی' : 'ایجاد'} {isLoading ? 'در حال ذخیره...' : promotion ? 'به‌روزرسانی' : 'ایجاد'}
</button> </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) { if (!promotions || promotions.length === 0) {
return ( return (
<div className="text-center py-12 bg-white rounded-lg shadow"> <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
<p className="text-gray-500">هیچ تبلیغاتی یافت نشد</p> <p className="text-gray-500 dark:text-gray-400">هیچ تبلیغاتی یافت نشد</p>
</div> </div>
); );
} }
@@ -49,22 +49,22 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
}; };
return ( 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"> <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> </h3>
</div> </div>
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200 dark:divide-gray-800">
{sortedPromotions.map((promotion) => ( {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 items-start justify-between">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-start space-x-4 space-x-reverse"> <div className="flex items-start space-x-4 space-x-reverse">
{/* Promotion Image - Using unoptimized Image component */} {/* Promotion Image - Using unoptimized Image component */}
{promotion.image_url && !imageErrors[promotion.id] && ( {promotion.image_url && !imageErrors[promotion.id] && (
<div className="flex-shrink-0"> <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 <Image
src={promotion.image_url} src={promotion.image_url}
alt={promotion.title || 'Promotion'} alt={promotion.title || 'Promotion'}
@@ -81,18 +81,18 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-2 space-x-reverse"> <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 || 'بدون عنوان'} {promotion.title || 'بدون عنوان'}
</p> </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)} {getPromotionTypeLabel(promotion.type)}
</span> </span>
{promotion.is_active ? ( {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>
) : ( ) : (
<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> </span>
)} )}
@@ -100,32 +100,32 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
</div> </div>
{promotion.subtitle && ( {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} {promotion.subtitle}
</p> </p>
)} )}
{promotion.action_text && ( {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} متن دکمه: {promotion.action_text}
</p> </p>
)} )}
<div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4"> <div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
{promotion.priority && ( {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} <span className="font-medium">اولویت:</span> {promotion.priority}
</div> </div>
)} )}
{promotion.start_at && ( {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)} <span className="font-medium">شروع:</span> {formatDate(promotion.start_at)}
</div> </div>
)} )}
{promotion.end_at && ( {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)} <span className="font-medium">پایان:</span> {formatDate(promotion.end_at)}
</div> </div>
)} )}
@@ -134,28 +134,28 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
{/* URLs */} {/* URLs */}
<div className="mt-2 space-y-1"> <div className="mt-2 space-y-1">
{promotion.url_site && ( {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} <span className="font-medium">وبسایت:</span> {promotion.url_site}
</div> </div>
)} )}
{promotion.url_myket && ( {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} <span className="font-medium">مایکت:</span> {promotion.url_myket}
</div> </div>
)} )}
{promotion.url_bazzar && ( {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} <span className="font-medium">بازار:</span> {promotion.url_bazzar}
</div> </div>
)} )}
{promotion.url_google_play && ( {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} <span className="font-medium">گوگل‌پلی:</span> {promotion.url_google_play}
</div> </div>
)} )}
</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)} آخرین به‌روزرسانی: {formatDate(promotion.updated_at)}
</div> </div>
</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"> <div className="mr-4 flex-shrink-0 flex flex-col space-y-2">
<button <button
onClick={() => onToggleActive(promotion)} onClick={() => onToggleActive(promotion)}
className={`p-2 rounded-full hover:bg-gray-100 ${ className={`p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${
promotion.is_active ? 'text-green-600' : 'text-gray-400' promotion.is_active ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'
}`} }`}
title={promotion.is_active ? 'غیرفعال کردن' : 'فعال کردن'} title={promotion.is_active ? 'غیرفعال کردن' : 'فعال کردن'}
> >
@@ -179,13 +179,13 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
</button> </button>
<button <button
onClick={() => onEdit(promotion)} 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" /> <PencilIcon className="h-5 w-5" />
</button> </button>
<button <button
onClick={() => onDelete(promotion)} 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" /> <TrashIcon className="h-5 w-5" />
</button> </button>
components/admin/referral/ReferralList.tsx
+17 -17
View File
@@ -20,12 +20,12 @@ export default function ReferralList({
}: ReferralListProps) { }: ReferralListProps) {
if (users.length === 0) { if (users.length === 0) {
return ( return (
<div className="text-center py-12 bg-white rounded-lg shadow"> <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 mx-auto mb-3" /> <GiftIcon className="h-10 w-10 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
<p className="text-gray-500"> <p className="text-gray-500 dark:text-gray-400">
در حال حاضر هیچ کاربری واجد شرایط دریافت پاداش معرفی نیست. در حال حاضر هیچ کاربری واجد شرایط دریافت پاداش معرفی نیست.
</p> </p>
<p className="text-sm text-gray-400 mt-1"> <p className="text-sm text-gray-400 dark:text-gray-500 mt-1">
کاربران پس از {subscriptionTarget} دعوت موفق در این لیست نمایش داده می‌شوند. کاربران پس از {subscriptionTarget} دعوت موفق در این لیست نمایش داده می‌شوند.
</p> </p>
</div> </div>
@@ -33,41 +33,41 @@ export default function ReferralList({
} }
return ( 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"> <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> </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} دعوت موفق هدف: {subscriptionTarget} دعوت موفق
</span> </span>
</div> </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) => ( {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 items-center justify-between flex-wrap gap-3">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<UserIcon className="h-4 w-4 text-gray-400" /> <UserIcon className="h-4 w-4 text-gray-400 dark:text-gray-500" />
<p className="text-sm font-medium text-gray-900 truncate"> <p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
{user.name || 'بدون نام'} {user.name || 'بدون نام'}
</p> </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} دعوت موفق {user.successful_invites} دعوت موفق
</span> </span>
</div> </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"> <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 || 'ایمیل ثبت نشده'} {user.email || 'ایمیل ثبت نشده'}
</span> </span>
<span className="flex items-center"> <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 || 'شماره ثبت نشده'} {user.mobile || 'شماره ثبت نشده'}
</span> </span>
{user.referral_code && ( {user.referral_code && (
<span className="flex items-center"> <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} کد معرف: {user.referral_code}
</span> </span>
)} )}
@@ -76,7 +76,7 @@ export default function ReferralList({
<button <button
onClick={() => onFulfill(user)} onClick={() => onFulfill(user)}
disabled={isLoading} 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" /> <GiftIcon className="h-5 w-5 ml-2" />
{fulfillingId === user.id ? 'در حال اعطا...' : 'اعطای اشتراک رایگان'} {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 ( 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> <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} {reminder ? 'ویرایش یادآوری' : 'ایجاد یادآوری جدید'} برای پکیج {packageName}
</h3> </h3>
</div> </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"> <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Title */} {/* Title */}
<div className="md:col-span-2"> <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> عنوان <span className="text-red-500">*</span>
</label> </label>
<input <input
@@ -126,14 +126,14 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
required required
value={formData.title || ''} value={formData.title || ''}
onChange={handleInputChange} 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="مثال: یادآوری روزانه" placeholder="مثال: یادآوری روزانه"
/> />
</div> </div>
{/* Type */} {/* Type */}
<div> <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> نوع <span className="text-red-500">*</span>
</label> </label>
<select <select
@@ -142,7 +142,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
required required
value={formData.type || 'reminder'} value={formData.type || 'reminder'}
onChange={handleInputChange} 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]) => ( {Object.entries(REMINDER_TYPES).map(([value, label]) => (
<option key={value} value={value}> <option key={value} value={value}>
@@ -154,7 +154,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
{/* Time */} {/* Time */}
<div> <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> زمان <span className="text-red-500">*</span>
</label> </label>
<input <input
@@ -164,7 +164,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
required required
value={formData.time || ''} value={formData.time || ''}
onChange={handleInputChange} 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>
@@ -177,9 +177,9 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
name="repeatable" name="repeatable"
checked={formData.repeatable || false} checked={formData.repeatable || false}
onChange={handleInputChange} 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> </label>
</div> </div>
@@ -188,7 +188,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
{/* Repeat Days */} {/* Repeat Days */}
{formData.repeatable && ( {formData.repeatable && (
<div> <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> </label>
<input <input
@@ -198,7 +198,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
min="1" min="1"
value={formData.repeat_days || ''} value={formData.repeat_days || ''}
onChange={handleNumberChange} 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" placeholder="مثال: 7"
/> />
</div> </div>
@@ -207,7 +207,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
{/* Description */} {/* Description */}
<div> <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> </label>
<textarea <textarea
@@ -216,24 +216,24 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
rows={3} rows={3}
value={formData.description || ''} value={formData.description || ''}
onChange={handleInputChange} 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="توضیحات یادآوری را وارد کنید..." placeholder="توضیحات یادآوری را وارد کنید..."
/> />
</div> </div>
{/* Form Actions */} {/* 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 <button
type="button" type="button"
onClick={onCancel} 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>
<button <button
type="submit" type="submit"
disabled={isLoading} 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 ? 'به‌روزرسانی' : 'ایجاد'} {isLoading ? 'در حال ذخیره...' : reminder ? 'به‌روزرسانی' : 'ایجاد'}
</button> </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) { if (!reminders || reminders.length === 0) {
return ( return (
<div className="text-center py-12 bg-white rounded-lg shadow"> <div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow transition-colors">
<p className="text-gray-500">هیچ یادآوری برای این پکیج یافت نشد</p> <p className="text-gray-500 dark:text-gray-400">هیچ یادآوری برای این پکیج یافت نشد</p>
</div> </div>
); );
} }
@@ -36,15 +36,15 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
); );
return ( 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"> <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} یادآوری‌های پکیج {packageName}
</h3> </h3>
</div> </div>
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200 dark:divide-gray-800">
{sortedReminders.map((reminder) => ( {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 items-center justify-between">
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center justify-between"> <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" /> <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} {reminder.title}
</p> </p>
</div> </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)} {getReminderTypeLabel(reminder.type)}
</span> </span>
</div> </div>
{reminder.description && ( {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} {reminder.description}
</p> </p>
)} )}
<div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-3"> <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)} <span className="font-medium">زمان:</span> {formatDate(reminder.time)} {formatTime(reminder.time)}
</div> </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 ? 'فعال' : 'غیرفعال'} <span className="font-medium">تکرار:</span> {reminder.repeatable ? 'فعال' : 'غیرفعال'}
</div> </div>
{reminder.repeatable && reminder.repeat_days && ( {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} روز <span className="font-medium">فاصله تکرار:</span> هر {reminder.repeat_days} روز
</div> </div>
)} )}
</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)} آخرین به‌روزرسانی: {formatDate(reminder.updated_at)}
</div> </div>
</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"> <div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
<button <button
onClick={() => onEdit(reminder)} 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" /> <PencilIcon className="h-5 w-5" />
</button> </button>
<button <button
onClick={() => onDelete(reminder)} 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" /> <TrashIcon className="h-5 w-5" />
</button> </button>
components/admin/users/PackageSelector.tsx
+3 -3
View File
@@ -41,8 +41,8 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
}; };
return ( return (
<div className="bg-white p-4 rounded-lg shadow mb-6"> <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 mb-2"> <label htmlFor="package-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
انتخاب پکیج انتخاب پکیج
</label> </label>
<select <select
@@ -50,7 +50,7 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
value={selectedPackage || ''} value={selectedPackage || ''}
onChange={handleChange} onChange={handleChange}
disabled={loading || isLoading} 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 ? ( {loading ? (
<option>در حال بارگذاری...</option> <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 = 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 ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"> <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 rounded-lg shadow-xl w-full max-w-lg" dir="rtl"> <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"> <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">ویرایش اطلاعات کاربر</h3> <h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">ویرایش اطلاعات کاربر</h3>
<button <button
onClick={onCancel} 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" type="button"
> >
<XMarkIcon className="h-5 w-5" /> <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"> <form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<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 <input
type="text" type="text"
className={inputClass} className={inputClass}
@@ -63,7 +63,7 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
/> />
</div> </div>
<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 <input
type="text" type="text"
className={inputClass} className={inputClass}
@@ -101,7 +101,7 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
<input <input
type="file" type="file"
accept="image/*" 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) => onChange={(e) =>
setFormData({ ...formData, avatar: e.target.files?.[0] || null }) setFormData({ ...formData, avatar: e.target.files?.[0] || null })
} }
@@ -113,14 +113,14 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
type="button" type="button"
onClick={onCancel} onClick={onCancel}
disabled={isLoading} 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>
<button <button
type="submit" type="submit"
disabled={isLoading} 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 ? 'در حال ذخیره...' : 'ذخیره تغییرات'} {isLoading ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
</button> </button>
components/admin/users/UserInfo.tsx
+29 -29
View File
@@ -10,61 +10,61 @@ interface UserInfoProps {
export default function UserInfo({ user }: UserInfoProps) { export default function UserInfo({ user }: UserInfoProps) {
return ( 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"> <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> </h3>
</div> </div>
<div className="border-t border-gray-200"> <div className="border-t border-gray-200 dark:border-gray-800">
<dl> <dl>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <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">نام کامل</dt> <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">نام کامل</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center"> <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" /> <UserIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{getFullName(user)} {getFullName(user)}
</dd> </dd>
</div> </div>
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <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">ایمیل</dt> <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">ایمیل</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center"> <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" /> <EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{getEmail(user.email)} {getEmail(user.email)}
</dd> </dd>
</div> </div>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <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">شماره موبایل</dt> <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">شماره موبایل</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center"> <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" /> <PhoneIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{getMobile(user.mobile)} {getMobile(user.mobile)}
</dd> </dd>
</div> </div>
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <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">کیف پول</dt> <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">کیف پول</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center"> <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" /> <WalletIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{formatPrice(user.wallet)} تومان {formatPrice(user.wallet)} تومان
</dd> </dd>
</div> </div>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <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">تاریخ عضویت</dt> <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ عضویت</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center"> <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" /> <CalendarIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{formatDate(user.created_at)} {formatDate(user.created_at)}
</dd> </dd>
</div> </div>
{user.birthday && ( {user.birthday && (
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <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">تاریخ تولد</dt> <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ تولد</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
{formatDate(user.birthday)} {formatDate(user.birthday)}
</dd> </dd>
</div> </div>
)} )}
{user.gender && ( {user.gender && (
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6"> <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">جنسیت</dt> <dt className="text-sm font-medium text-gray-500 dark:text-gray-400">جنسیت</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2"> <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} {user.gender === 'male' ? 'مرد' : user.gender === 'female' ? 'زن' : user.gender}
</dd> </dd>
</div> </div>
components/admin/users/UserProducts.tsx
+23 -23
View File
@@ -67,24 +67,24 @@ export default function UserProducts({
}; };
return ( 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"> <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> </h3>
</div> </div>
{/* Current Subscriptions grouped by package */} {/* 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.keys(productsByPackage).length > 0 ? (
Object.entries(productsByPackage).map(([packageName, packageProducts]) => ( Object.entries(productsByPackage).map(([packageName, packageProducts]) => (
<div key={packageName} className="border-b border-gray-200 last:border-b-0"> <div key={packageName} className="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
<div className="bg-gray-50 px-4 py-2"> <div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-2">
<h4 className="text-sm font-medium text-gray-700"> <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
پکیج: {packageName} پکیج: {packageName}
</h4> </h4>
</div> </div>
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200 dark:divide-gray-800">
{packageProducts.map((product) => { {packageProducts.map((product) => {
const status = getSubscriptionStatus(product); const status = getSubscriptionStatus(product);
const StatusIcon = status.icon; const StatusIcon = status.icon;
@@ -96,17 +96,17 @@ export default function UserProducts({
<div className="flex-1"> <div className="flex-1">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center space-x-2 space-x-reverse"> <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 || 'محصول'} {product.title || 'محصول'}
</p> </p>
{subscriptionCount > 1 && ( {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} اشتراک {subscriptionCount} اشتراک
</span> </span>
)} )}
</div> </div>
<div className="mr-2 flex-shrink-0 flex"> <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}`} /> <StatusIcon className={`h-4 w-4 ml-1 ${status.color}`} />
{status.text} {status.text}
</p> </p>
@@ -114,23 +114,23 @@ export default function UserProducts({
</div> </div>
<div className="mt-2 sm:flex sm:justify-between"> <div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex"> <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)} تومان قیمت: {formatPrice(product.price)} تومان
</p> </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)} نوع: {getProductTypeLabel(product.type)}
</p> </p>
{product.pivot?.expire_at && ( {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)} تاریخ انقضا: {formatDate(product.pivot.expire_at)}
</p> </p>
)} )}
</div> </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 <button
onClick={() => onUnsubscribe(product.id)} onClick={() => onUnsubscribe(product.id)}
disabled={isLoading} 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> </button>
@@ -145,7 +145,7 @@ export default function UserProducts({
</div> </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> </div>
)} )}
@@ -153,8 +153,8 @@ export default function UserProducts({
{/* Available Products for Subscription */} {/* Available Products for Subscription */}
{availableProducts && availableProducts.length > 0 && selectedPackage && ( {availableProducts && availableProducts.length > 0 && selectedPackage && (
<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">
<h4 className="text-md font-medium text-gray-900 mb-3"> <h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">
افزودن اشتراک جدید برای پکیج {selectedPackage} افزودن اشتراک جدید برای پکیج {selectedPackage}
</h4> </h4>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3"> <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} key={product.id}
onClick={() => handleSubscribeClick(product.id)} onClick={() => handleSubscribeClick(product.id)}
disabled={isLoading} 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 className="flex items-start justify-between">
<div> <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 || 'محصول'} {product.title || 'محصول'}
</p> </p>
{subscriptionCount > 0 && ( {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} اشتراک فعال دارد {subscriptionCount} اشتراک فعال دارد
</p> </p>
)} )}
</div> </div>
<PlusCircleIcon className="h-5 w-5 text-indigo-600" /> <PlusCircleIcon className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
</div> </div>
<p className="mt-2 text-xs text-gray-500"> <p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
برای افزودن اشتراک جدید کلیک کنید برای افزودن اشتراک جدید کلیک کنید
</p> </p>
</button> </button>
components/admin/users/UserSearch.tsx
+3 -3
View File
@@ -27,12 +27,12 @@ export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
</label> </label>
<div className="relative"> <div className="relative">
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> <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> </div>
<input <input
type="text" type="text"
id="search" 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="جستجو با ایمیل یا شماره موبایل..." placeholder="جستجو با ایمیل یا شماره موبایل..."
value={searchTerm} value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)} onChange={(e) => setSearchTerm(e.target.value)}
@@ -43,7 +43,7 @@ export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
<button <button
type="submit" type="submit"
disabled={isLoading || !searchTerm.trim()} 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 ? 'در حال جستجو...' : 'جستجو'} {isLoading ? 'در حال جستجو...' : 'جستجو'}
</button> </button>
next-env.d.ts
Vendored
+1 -1
View File
@@ -1,6 +1,6 @@
/// <reference types="next" /> /// <reference types="next" />
/// <reference types="next/image-types/global" /> /// <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 // NOTE: This file should not be edited
// see https://nextjs.org/docs/app/api-reference/config/typescript for more information. // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.