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
components/admin/packages/PackageForm.tsx
+27 -27
View File
@@ -95,11 +95,11 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
};
return (
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
<form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Name */}
<div>
<label htmlFor="name" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="name" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
نام پکیج <span className="text-red-500">*</span>
</label>
<input
@@ -109,7 +109,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
required
value={formData.name || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
placeholder="مثال: com.approagency.meditation"
dir="ltr"
/>
@@ -117,7 +117,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
{/* Title */}
<div>
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
عنوان <span className="text-red-500">*</span>
</label>
<input
@@ -127,19 +127,19 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
required
value={formData.title || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
placeholder="مثال: آرام لند"
/>
</div>
{/* Avatar */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تصویر
</label>
<div className="flex items-center space-x-3 space-x-reverse">
<label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
<PhotoIcon className="h-5 w-5 ml-2 text-gray-400" />
<label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
<PhotoIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
انتخاب تصویر
<input
type="file"
@@ -152,7 +152,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
<button
type="button"
onClick={removeAvatar}
className="text-red-600 hover:text-red-900"
className="text-red-600 dark:text-red-400 hover:text-red-900 transition-colors"
>
<XMarkIcon className="h-5 w-5" />
</button>
@@ -163,7 +163,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
<img
src={avatarPreview}
alt="Preview"
className="h-20 w-20 object-cover rounded-lg border border-gray-200"
className="h-20 w-20 object-cover rounded-lg border border-gray-200 dark:border-gray-800"
/>
</div>
)}
@@ -171,7 +171,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
{/* V1 Identifier */}
<div>
<label htmlFor="v1_identifier" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="v1_identifier" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
شناسه V1
</label>
<input
@@ -180,13 +180,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="v1_identifier"
value={formData.v1_identifier || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
/>
</div>
{/* Myket Access Token */}
<div>
<label htmlFor="myket_access_token" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="myket_access_token" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
توکن دسترسی Myket
</label>
<input
@@ -195,13 +195,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="myket_access_token"
value={formData.myket_access_token || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
/>
</div>
{/* Cafe Config ID */}
<div>
<label htmlFor="cafe_config_id" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="cafe_config_id" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
شناسه کافه بازار
</label>
<input
@@ -210,13 +210,13 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="cafe_config_id"
value={formData.cafe_config_id || ''}
onChange={handleNumberChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
/>
</div>
{/* Web App URL */}
<div>
<label htmlFor="web_app_url" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="web_app_url" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
آدرس وب اپلیکیشن
</label>
<input
@@ -225,14 +225,14 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="web_app_url"
value={formData.web_app_url || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
placeholder="https://example.com"
/>
</div>
{/* Tries */}
<div>
<label htmlFor="tries" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="tries" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تعداد تلاش‌ها
</label>
<input
@@ -241,17 +241,17 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
name="tries"
value={formData.tries || 0}
onChange={handleNumberChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500"
/>
</div>
{/* Firebase JSON */}
<div className="md:col-span-2">
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
فایل Firebase JSON
</label>
<label className="cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
<DocumentTextIcon className="h-5 w-5 ml-2 text-gray-400" />
<label className="cursor-pointer inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
<DocumentTextIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
انتخاب فایل
<input
type="file"
@@ -261,7 +261,7 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
/>
</label>
{firebaseFile && (
<p className="mt-2 text-sm text-gray-600">
<p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
فایل انتخاب شده: {firebaseFile.name}
</p>
)}
@@ -269,18 +269,18 @@ export default function PackageForm({ package: pkg, onSubmit, onCancel, isLoadin
</div>
{/* Form Actions */}
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
<button
type="button"
onClick={onCancel}
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 transition-colors"
>
انصراف
</button>
<button
type="submit"
disabled={isLoading}
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
>
{isLoading ? 'در حال ذخیره...' : pkg ? 'به‌روزرسانی' : 'ایجاد'}
</button>
components/admin/packages/PackageList.tsx
+10 -10
View File
@@ -22,17 +22,17 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
if (!packages || packages.length === 0) {
return (
<div className="text-center py-12 bg-white rounded-lg shadow">
<p className="text-gray-500">هیچ پکیجی یافت نشد</p>
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
<p className="text-gray-500 dark:text-gray-400">هیچ پکیجی یافت نشد</p>
</div>
);
}
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<ul className="divide-y divide-gray-200">
<div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{packages.map((pkg) => (
<li key={pkg.id} className="px-2 py-4 hover:bg-gray-50">
<li key={pkg.id} className="px-2 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center space-x-3 space-x-reverse">
@@ -44,10 +44,10 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
/>
)}
<div>
<p className="text-sm font-medium text-indigo-600 truncate px-2">
<p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate px-2">
{pkg.title || 'بدون عنوان'}
</p>
<p className="text-sm text-gray-500 px-2">
<p className="text-sm text-gray-500 dark:text-gray-400 px-2">
{pkg.name || 'بدون نام'}
</p>
</div>
@@ -57,7 +57,7 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
</div>
<p className="text-xs text-gray-500 mt-1 sm:mt-0">
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1 sm:mt-0">
آخرین به‌روزرسانی: {formatDate(pkg.updated_at)}
</p>
</div>
@@ -65,13 +65,13 @@ export default function PackageList({ packages, onEdit, onDelete, isLoading }: P
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
<button
onClick={() => onEdit(pkg)}
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
>
<PencilIcon className="h-5 w-5" />
</button>
<button
onClick={() => onDelete(pkg)}
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
className="text-red-600 dark:text-red-400 hover:text-red-900 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
>
<TrashIcon className="h-5 w-5" />
</button>
components/admin/products/ProductForm.tsx
+17 -17
View File
@@ -64,9 +64,9 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
};
return (
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
<form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
{product ? 'ویرایش محصول' : 'ایجاد محصول جدید'} برای پکیج {packageName}
</h3>
</div>
@@ -74,7 +74,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Title */}
<div>
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
عنوان <span className="text-red-500">*</span>
</label>
<input
@@ -84,14 +84,14 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
required
value={formData.title || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
placeholder="مثال: اشتراک ماهانه"
/>
</div>
{/* Price */}
<div>
<label htmlFor="price" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="price" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
قیمت (تومان) <span className="text-red-500">*</span>
</label>
<input
@@ -102,14 +102,14 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
min="0"
value={formData.price || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
placeholder="مثال: 60000"
/>
</div>
{/* Type */}
<div>
<label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
نوع اشتراک <span className="text-red-500">*</span>
</label>
<select
@@ -118,7 +118,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
required
value={formData.type || 4}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
>
{Object.entries(PRODUCT_TYPES).map(([value, label]) => (
<option key={value} value={value}>
@@ -131,7 +131,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
{/* Descriptions */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
ویژگی‌ها
</label>
<div className="flex space-x-2 space-x-reverse">
@@ -139,7 +139,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
type="text"
value={newDescription}
onChange={(e) => setNewDescription(e.target.value)}
className="flex-1 px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="flex-1 px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm dark:bg-gray-800 dark:placeholder-gray-500 transition-colors"
placeholder="ویژگی جدید را وارد کنید"
onKeyPress={(e) => {
if (e.key === 'Enter') {
@@ -151,7 +151,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
<button
type="button"
onClick={handleAddDescription}
className="inline-flex items-center px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="inline-flex items-center px-3 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
>
<PlusIcon className="h-5 w-5" />
</button>
@@ -161,12 +161,12 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
{descriptions.length > 0 && (
<ul className="mt-3 space-y-2">
{descriptions.map((desc, index) => (
<li key={index} className="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-md">
<span className="text-sm text-gray-700">{desc}</span>
<li key={index} className="flex items-center justify-between bg-gray-50 dark:bg-gray-800/60 px-3 py-2 rounded-md">
<span className="text-sm text-gray-700 dark:text-gray-300">{desc}</span>
<button
type="button"
onClick={() => handleRemoveDescription(index)}
className="text-red-600 hover:text-red-900"
className="text-red-600 dark:text-red-400 hover:text-red-900 transition-colors"
>
<XMarkIcon className="h-5 w-5" />
</button>
@@ -177,18 +177,18 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
</div>
{/* Form Actions */}
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
<button
type="button"
onClick={onCancel}
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
>
انصراف
</button>
<button
type="submit"
disabled={isLoading}
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
>
{isLoading ? 'در حال ذخیره...' : product ? 'به‌روزرسانی' : 'ایجاد'}
</button>
components/admin/products/ProductList.tsx
+14 -14
View File
@@ -24,40 +24,40 @@ export default function ProductList({ products, packageName, onEdit, onDelete, i
if (!products || products.length === 0) {
return (
<div className="text-center py-12 bg-white rounded-lg shadow">
<p className="text-gray-500">هیچ محصولی برای این پکیج یافت نشد</p>
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
<p className="text-gray-500 dark:text-gray-400">هیچ محصولی برای این پکیج یافت نشد</p>
</div>
);
}
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
محصولات پکیج {packageName}
</h3>
</div>
<ul className="divide-y divide-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{products.map((product) => (
<li key={product.id} className="px-6 py-4 hover:bg-gray-50">
<li key={product.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<p className="text-sm font-medium text-indigo-600 truncate">
<p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate">
{product.title || 'بدون عنوان'}
</p>
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
{getProductTypeLabel(product.type)}
</span>
</div>
<div className="mt-2">
<p className="text-sm text-gray-900">
<p className="text-sm text-gray-900 dark:text-gray-100">
قیمت: {formatPrice(product.price)} تومان
</p>
{product.descriptions && product.descriptions.length > 0 && (
<div className="mt-2">
<p className="text-xs text-gray-500 mb-1">ویژگی‌ها:</p>
<ul className="list-disc list-inside text-xs text-gray-600 pr-4">
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">ویژگی‌ها:</p>
<ul className="list-disc list-inside text-xs text-gray-600 dark:text-gray-400 pr-4">
{product.descriptions.map((desc, index) => (
<li key={index}>{desc}</li>
))}
@@ -65,20 +65,20 @@ export default function ProductList({ products, packageName, onEdit, onDelete, i
</div>
)}
</div>
<div className="mt-2 text-xs text-gray-500">
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
آخرین به‌روزرسانی: {formatDate(product.updated_at)}
</div>
</div>
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
<button
onClick={() => onEdit(product)}
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
>
<PencilIcon className="h-5 w-5" />
</button>
<button
onClick={() => onDelete(product)}
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
className="text-red-600 dark:text-red-400 hover:text-red-900 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
>
<TrashIcon className="h-5 w-5" />
</button>
components/admin/promotions/PromotionForm.tsx
+37 -37
View File
@@ -122,9 +122,9 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
};
return (
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
<form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow">
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
{promotion ? 'ویرایش تبلیغ' : 'ایجاد تبلیغ جدید'}
</h3>
</div>
@@ -132,7 +132,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Type */}
<div>
<label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
نوع <span className="text-red-500">*</span>
</label>
<select
@@ -141,7 +141,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
required
value={formData.type || 'slider'}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
>
{Object.entries(PROMOTION_TYPES).map(([value, label]) => (
<option key={value} value={value}>
@@ -153,7 +153,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
{/* Title */}
<div>
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
عنوان
</label>
<input
@@ -162,14 +162,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="title"
value={formData.title || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="عنوان تبلیغ"
/>
</div>
{/* Subtitle */}
<div className="md:col-span-2">
<label htmlFor="subtitle" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="subtitle" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
زیرعنوان
</label>
<input
@@ -178,14 +178,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="subtitle"
value={formData.subtitle || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="زیرعنوان تبلیغ"
/>
</div>
{/* Action Text */}
<div>
<label htmlFor="action_text" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="action_text" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
متن دکمه
</label>
<input
@@ -194,14 +194,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="action_text"
value={formData.action_text || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="مثال: همین حالا نصب کن"
/>
</div>
{/* Priority */}
<div>
<label htmlFor="priority" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="priority" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
اولویت
</label>
<input
@@ -211,14 +211,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
min="0"
value={formData.priority || 0}
onChange={handleNumberChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="عدد بالاتر = اولویت بیشتر"
/>
</div>
{/* Start Date */}
<div>
<label htmlFor="start_at" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="start_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تاریخ شروع
</label>
<input
@@ -227,13 +227,13 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="start_at"
value={formData.start_at || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
/>
</div>
{/* End Date */}
<div>
<label htmlFor="end_at" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="end_at" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تاریخ پایان
</label>
<input
@@ -242,18 +242,18 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="end_at"
value={formData.end_at || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
/>
</div>
</div>
{/* URLs Section */}
<div className="border-t border-gray-200 pt-4">
<h4 className="text-md font-medium text-gray-900 mb-3">لینک‌ها</h4>
<div className="border-t border-gray-200 dark:border-gray-800 pt-4">
<h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">لینک‌ها</h4>
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
{/* Myket URL */}
<div>
<label htmlFor="url_myket" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_myket" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک مایکت
</label>
<input
@@ -262,14 +262,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_myket"
value={formData.url_myket || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="https://myket.ir/app/..."
/>
</div>
{/* Bazaar URL */}
<div>
<label htmlFor="url_bazzar" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_bazzar" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک بازار
</label>
<input
@@ -278,14 +278,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_bazzar"
value={formData.url_bazzar || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="https://cafebazaar.ir/app/..."
/>
</div>
{/* Google Play URL */}
<div>
<label htmlFor="url_google_play" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_google_play" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک گوگل‌پلی
</label>
<input
@@ -294,14 +294,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_google_play"
value={formData.url_google_play || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="https://play.google.com/store/apps/..."
/>
</div>
{/* Site URL */}
<div>
<label htmlFor="url_site" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="url_site" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
لینک وبسایت
</label>
<input
@@ -310,7 +310,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
name="url_site"
value={formData.url_site || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="https://example.com"
/>
</div>
@@ -319,12 +319,12 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
{/* Image Upload */}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تصویر
</label>
<div className="flex items-center space-x-3 space-x-reverse">
<label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
<PhotoIcon className="h-5 w-5 ml-2 text-gray-400" />
<label className="cursor-pointer flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
<PhotoIcon className="h-5 w-5 ml-2 text-gray-400 dark:text-gray-500" />
انتخاب تصویر
<input
type="file"
@@ -337,14 +337,14 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
<button
type="button"
onClick={removeImage}
className="text-red-600 hover:text-red-900"
className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 transition-colors"
>
<XMarkIcon className="h-5 w-5" />
</button>
)}
</div>
{imagePreview && (
<div className="mt-2 relative h-32 w-32 rounded-lg overflow-hidden border border-gray-200">
<div className="mt-2 relative h-32 w-32 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
<img
src={imagePreview}
alt="Preview"
@@ -352,7 +352,7 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
/>
</div>
)}
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
حداکثر حجم: ۲ مگابایت
</p>
</div>
@@ -365,27 +365,27 @@ export default function PromotionForm({ promotion, onSubmit, onCancel, isLoading
id="is_active"
checked={isActive}
onChange={(e) => setIsActive(e.target.checked)}
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded"
/>
<label htmlFor="is_active" className="mr-2 block text-sm text-gray-900">
<label htmlFor="is_active" className="mr-2 block text-sm text-gray-900 dark:text-gray-100">
فعال
</label>
</div>
)}
{/* Form Actions */}
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
<button
type="button"
onClick={onCancel}
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
>
انصراف
</button>
<button
type="submit"
disabled={isLoading}
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
>
{isLoading ? 'در حال ذخیره...' : promotion ? 'به‌روزرسانی' : 'ایجاد'}
</button>
components/admin/promotions/PromotionList.tsx
+25 -25
View File
@@ -28,8 +28,8 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
if (!promotions || promotions.length === 0) {
return (
<div className="text-center py-12 bg-white rounded-lg shadow">
<p className="text-gray-500">هیچ تبلیغاتی یافت نشد</p>
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow">
<p className="text-gray-500 dark:text-gray-400">هیچ تبلیغاتی یافت نشد</p>
</div>
);
}
@@ -49,22 +49,22 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
};
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
لیست تبلیغات
</h3>
</div>
<ul className="divide-y divide-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{sortedPromotions.map((promotion) => (
<li key={promotion.id} className="px-6 py-4 hover:bg-gray-50">
<li key={promotion.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<div className="flex items-start justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-start space-x-4 space-x-reverse">
{/* Promotion Image - Using unoptimized Image component */}
{promotion.image_url && !imageErrors[promotion.id] && (
<div className="flex-shrink-0">
<div className="relative h-20 w-20 rounded-lg overflow-hidden border border-gray-200">
<div className="relative h-20 w-20 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-800">
<Image
src={promotion.image_url}
alt={promotion.title || 'Promotion'}
@@ -81,18 +81,18 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
<div className="flex-1">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2 space-x-reverse">
<p className="text-sm font-medium text-indigo-600">
<p className="text-sm font-medium text-indigo-600 dark:text-indigo-400">
{promotion.title || 'بدون عنوان'}
</p>
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
{getPromotionTypeLabel(promotion.type)}
</span>
{promotion.is_active ? (
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
فعال
</span>
) : (
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">
غیرفعال
</span>
)}
@@ -100,32 +100,32 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
</div>
{promotion.subtitle && (
<p className="mt-1 text-sm text-gray-600">
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
{promotion.subtitle}
</p>
)}
{promotion.action_text && (
<p className="mt-1 text-xs text-gray-500">
<p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
متن دکمه: {promotion.action_text}
</p>
)}
<div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-2 lg:grid-cols-4">
{promotion.priority && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">اولویت:</span> {promotion.priority}
</div>
)}
{promotion.start_at && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">شروع:</span> {formatDate(promotion.start_at)}
</div>
)}
{promotion.end_at && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">پایان:</span> {formatDate(promotion.end_at)}
</div>
)}
@@ -134,28 +134,28 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
{/* URLs */}
<div className="mt-2 space-y-1">
{promotion.url_site && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">وبسایت:</span> {promotion.url_site}
</div>
)}
{promotion.url_myket && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">مایکت:</span> {promotion.url_myket}
</div>
)}
{promotion.url_bazzar && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">بازار:</span> {promotion.url_bazzar}
</div>
)}
{promotion.url_google_play && (
<div className="text-xs text-gray-500 truncate">
<div className="text-xs text-gray-500 dark:text-gray-400 truncate">
<span className="font-medium">گوگل‌پلی:</span> {promotion.url_google_play}
</div>
)}
</div>
<div className="mt-2 text-xs text-gray-400">
<div className="mt-2 text-xs text-gray-400 dark:text-gray-500">
آخرین به‌روزرسانی: {formatDate(promotion.updated_at)}
</div>
</div>
@@ -166,8 +166,8 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
<div className="mr-4 flex-shrink-0 flex flex-col space-y-2">
<button
onClick={() => onToggleActive(promotion)}
className={`p-2 rounded-full hover:bg-gray-100 ${
promotion.is_active ? 'text-green-600' : 'text-gray-400'
className={`p-2 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors ${
promotion.is_active ? 'text-green-600 dark:text-green-400' : 'text-gray-400 dark:text-gray-500'
}`}
title={promotion.is_active ? 'غیرفعال کردن' : 'فعال کردن'}
>
@@ -179,13 +179,13 @@ export default function PromotionList({ promotions, onEdit, onDelete, onToggleAc
</button>
<button
onClick={() => onEdit(promotion)}
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-900/40 transition-colors"
>
<PencilIcon className="h-5 w-5" />
</button>
<button
onClick={() => onDelete(promotion)}
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/40 transition-colors"
>
<TrashIcon className="h-5 w-5" />
</button>
components/admin/referral/ReferralList.tsx
+17 -17
View File
@@ -20,12 +20,12 @@ export default function ReferralList({
}: ReferralListProps) {
if (users.length === 0) {
return (
<div className="text-center py-12 bg-white rounded-lg shadow">
<GiftIcon className="h-10 w-10 text-gray-300 mx-auto mb-3" />
<p className="text-gray-500">
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800">
<GiftIcon className="h-10 w-10 text-gray-300 dark:text-gray-600 mx-auto mb-3" />
<p className="text-gray-500 dark:text-gray-400">
در حال حاضر هیچ کاربری واجد شرایط دریافت پاداش معرفی نیست.
</p>
<p className="text-sm text-gray-400 mt-1">
<p className="text-sm text-gray-400 dark:text-gray-500 mt-1">
کاربران پس از {subscriptionTarget} دعوت موفق در این لیست نمایش داده می‌شوند.
</p>
</div>
@@ -33,41 +33,41 @@ export default function ReferralList({
}
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl">
<div className="px-4 py-5 sm:px-6 flex items-center justify-between">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
کاربران واجد شرایط پاداش
</h3>
<span className="px-3 py-1 text-xs font-medium rounded-full bg-indigo-100 text-indigo-800">
<span className="px-3 py-1 text-xs font-medium rounded-full bg-indigo-100 text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300">
هدف: {subscriptionTarget} دعوت موفق
</span>
</div>
<ul className="divide-y divide-gray-200 border-t border-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-800 border-t border-gray-200 dark:border-gray-800">
{users.map((user) => (
<li key={user.id} className="px-4 py-4 sm:px-6">
<li key={user.id} className="px-4 py-4 sm:px-6 hover:bg-gray-50 dark:hover:bg-gray-800/60 transition-colors">
<div className="flex items-center justify-between flex-wrap gap-3">
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2">
<UserIcon className="h-4 w-4 text-gray-400" />
<p className="text-sm font-medium text-gray-900 truncate">
<UserIcon className="h-4 w-4 text-gray-400 dark:text-gray-500" />
<p className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
{user.name || 'بدون نام'}
</p>
<span className="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800">
<span className="px-2 py-0.5 text-xs font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
{user.successful_invites} دعوت موفق
</span>
</div>
<div className="mt-2 flex flex-wrap gap-x-6 gap-y-1 text-sm text-gray-500">
<div className="mt-2 flex flex-wrap gap-x-6 gap-y-1 text-sm text-gray-500 dark:text-gray-400">
<span className="flex items-center">
<EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400" />
<EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{user.email || 'ایمیل ثبت نشده'}
</span>
<span className="flex items-center">
<PhoneIcon className="h-4 w-4 ml-1 text-gray-400" />
<PhoneIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{user.mobile || 'شماره ثبت نشده'}
</span>
{user.referral_code && (
<span className="flex items-center">
<TicketIcon className="h-4 w-4 ml-1 text-gray-400" />
<TicketIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
کد معرف: {user.referral_code}
</span>
)}
@@ -76,7 +76,7 @@ export default function ReferralList({
<button
onClick={() => onFulfill(user)}
disabled={isLoading}
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 disabled:opacity-50 disabled:cursor-not-allowed"
className="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
<GiftIcon className="h-5 w-5 ml-2" />
{fulfillingId === user.id ? 'در حال اعطا...' : 'اعطای اشتراک رایگان'}
components/admin/reminders/ReminderForm.tsx
+17 -17
View File
@@ -106,9 +106,9 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
};
return (
<form onSubmit={handleSubmit} className="space-y-6 bg-white p-6 rounded-lg shadow">
<form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-lg shadow transition-colors">
<div>
<h3 className="text-lg font-medium text-gray-900 mb-4">
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100 mb-4">
{reminder ? 'ویرایش یادآوری' : 'ایجاد یادآوری جدید'} برای پکیج {packageName}
</h3>
</div>
@@ -116,7 +116,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Title */}
<div className="md:col-span-2">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="title" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
عنوان <span className="text-red-500">*</span>
</label>
<input
@@ -126,14 +126,14 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
required
value={formData.title || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="مثال: یادآوری روزانه"
/>
</div>
{/* Type */}
<div>
<label htmlFor="type" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="type" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
نوع <span className="text-red-500">*</span>
</label>
<select
@@ -142,7 +142,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
required
value={formData.type || 'reminder'}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
>
{Object.entries(REMINDER_TYPES).map(([value, label]) => (
<option key={value} value={value}>
@@ -154,7 +154,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
{/* Time */}
<div>
<label htmlFor="time" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="time" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
زمان <span className="text-red-500">*</span>
</label>
<input
@@ -164,7 +164,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
required
value={formData.time || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
/>
</div>
@@ -177,9 +177,9 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
name="repeatable"
checked={formData.repeatable || false}
onChange={handleInputChange}
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded"
className="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 dark:border-gray-600 dark:bg-gray-800 rounded"
/>
<label htmlFor="repeatable" className="mr-2 block text-sm text-gray-900">
<label htmlFor="repeatable" className="mr-2 block text-sm text-gray-900 dark:text-gray-100">
قابل تکرار
</label>
</div>
@@ -188,7 +188,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
{/* Repeat Days */}
{formData.repeatable && (
<div>
<label htmlFor="repeat_days" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="repeat_days" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
فاصله تکرار (روز)
</label>
<input
@@ -198,7 +198,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
min="1"
value={formData.repeat_days || ''}
onChange={handleNumberChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="مثال: 7"
/>
</div>
@@ -207,7 +207,7 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
{/* Description */}
<div>
<label htmlFor="description" className="block text-sm font-medium text-gray-700 mb-1">
<label htmlFor="description" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
توضیحات
</label>
<textarea
@@ -216,24 +216,24 @@ export default function ReminderForm({ reminder, packageName, onSubmit, onCancel
rows={3}
value={formData.description || ''}
onChange={handleInputChange}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 border border-gray-300 dark:border-gray-600 dark:bg-gray-800 dark:placeholder-gray-500 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="توضیحات یادآوری را وارد کنید..."
/>
</div>
{/* Form Actions */}
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t">
<div className="flex justify-end space-x-3 space-x-reverse pt-4 border-t dark:border-gray-800">
<button
type="button"
onClick={onCancel}
className="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
>
انصراف
</button>
<button
type="submit"
disabled={isLoading}
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
>
{isLoading ? 'در حال ذخیره...' : reminder ? 'به‌روزرسانی' : 'ایجاد'}
</button>
components/admin/reminders/ReminderList.tsx
+15 -15
View File
@@ -24,8 +24,8 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
if (!reminders || reminders.length === 0) {
return (
<div className="text-center py-12 bg-white rounded-lg shadow">
<p className="text-gray-500">هیچ یادآوری برای این پکیج یافت نشد</p>
<div className="text-center py-12 bg-white dark:bg-gray-900 rounded-lg shadow transition-colors">
<p className="text-gray-500 dark:text-gray-400">هیچ یادآوری برای این پکیج یافت نشد</p>
</div>
);
}
@@ -36,15 +36,15 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
);
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<div className="bg-white dark:bg-gray-900 shadow overflow-hidden sm:rounded-lg transition-colors">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
یادآوری‌های پکیج {packageName}
</h3>
</div>
<ul className="divide-y divide-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{sortedReminders.map((reminder) => (
<li key={reminder.id} className="px-6 py-4 hover:bg-gray-50">
<li key={reminder.id} className="px-6 py-4 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
<div className="flex items-center justify-between">
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
@@ -54,38 +54,38 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
) : (
<BellIcon className="h-5 w-5 text-indigo-500" />
)}
<p className="text-sm font-medium text-gray-900">
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
{reminder.title}
</p>
</div>
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
{getReminderTypeLabel(reminder.type)}
</span>
</div>
{reminder.description && (
<p className="mt-1 text-sm text-gray-600">
<p className="mt-1 text-sm text-gray-600 dark:text-gray-400">
{reminder.description}
</p>
)}
<div className="mt-2 grid grid-cols-1 gap-2 sm:grid-cols-3">
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">زمان:</span> {formatDate(reminder.time)} {formatTime(reminder.time)}
</div>
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">تکرار:</span> {reminder.repeatable ? 'فعال' : 'غیرفعال'}
</div>
{reminder.repeatable && reminder.repeat_days && (
<div className="text-xs text-gray-500">
<div className="text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium">فاصله تکرار:</span> هر {reminder.repeat_days} روز
</div>
)}
</div>
<div className="mt-2 text-xs text-gray-400">
<div className="mt-2 text-xs text-gray-400 dark:text-gray-500">
آخرین به‌روزرسانی: {formatDate(reminder.updated_at)}
</div>
</div>
@@ -93,13 +93,13 @@ export default function ReminderList({ reminders, packageName, onEdit, onDelete,
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
<button
onClick={() => onEdit(reminder)}
className="text-indigo-600 hover:text-indigo-900 p-2 rounded-full hover:bg-indigo-50"
className="text-indigo-600 dark:text-indigo-400 hover:text-indigo-900 dark:hover:text-indigo-300 p-2 rounded-full hover:bg-indigo-50 dark:hover:bg-indigo-950/40 transition-colors"
>
<PencilIcon className="h-5 w-5" />
</button>
<button
onClick={() => onDelete(reminder)}
className="text-red-600 hover:text-red-900 p-2 rounded-full hover:bg-red-50"
className="text-red-600 dark:text-red-400 hover:text-red-900 dark:hover:text-red-300 p-2 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors"
>
<TrashIcon className="h-5 w-5" />
</button>
components/admin/users/PackageSelector.tsx
+3 -3
View File
@@ -41,8 +41,8 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
};
return (
<div className="bg-white p-4 rounded-lg shadow mb-6">
<label htmlFor="package-select" className="block text-sm font-medium text-gray-700 mb-2">
<div className="bg-white dark:bg-gray-900 p-4 rounded-xl shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 mb-6">
<label htmlFor="package-select" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
انتخاب پکیج
</label>
<select
@@ -50,7 +50,7 @@ export default function PackageSelector({ token, selectedPackage, onPackageChang
value={selectedPackage || ''}
onChange={handleChange}
disabled={loading || isLoading}
className="block w-full px-3 py-2 text-slate-900 border border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50"
className="block w-full px-3 py-2 text-slate-900 dark:text-gray-100 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm disabled:opacity-50 transition-colors"
>
{loading ? (
<option>در حال بارگذاری...</option>
components/admin/users/UserEditForm.tsx
+11 -11
View File
@@ -35,16 +35,16 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
};
const inputClass =
'block w-full px-3 py-2 border text-slate-900 border-gray-300 rounded-md leading-5 bg-white focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm';
'block w-full px-3 py-2 border text-slate-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-800 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors';
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4">
<div className="bg-white rounded-lg shadow-xl w-full max-w-lg" dir="rtl">
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
<h3 className="text-lg font-medium text-gray-900">ویرایش اطلاعات کاربر</h3>
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 dark:bg-black/60 p-4">
<div className="bg-white dark:bg-gray-900 rounded-xl shadow-xl ring-1 ring-gray-200 dark:ring-gray-800 w-full max-w-lg" dir="rtl">
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-800">
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">ویرایش اطلاعات کاربر</h3>
<button
onClick={onCancel}
className="text-gray-400 hover:text-gray-600"
className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors"
type="button"
>
<XMarkIcon className="h-5 w-5" />
@@ -54,7 +54,7 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
<form onSubmit={handleSubmit} className="px-6 py-4 space-y-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">نام</label>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نام</label>
<input
type="text"
className={inputClass}
@@ -63,7 +63,7 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">نام خانوادگی</label>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">نام خانوادگی</label>
<input
type="text"
className={inputClass}
@@ -101,7 +101,7 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
<input
type="file"
accept="image/*"
className="block w-full text-sm text-gray-700 file:ml-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100"
className="block w-full text-sm text-gray-700 dark:text-gray-300 file:ml-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-medium file:bg-indigo-50 file:text-indigo-700 hover:file:bg-indigo-100 dark:file:bg-indigo-950/40 dark:file:text-indigo-300 dark:hover:file:bg-indigo-900/40"
onChange={(e) =>
setFormData({ ...formData, avatar: e.target.files?.[0] || null })
}
@@ -113,14 +113,14 @@ export default function UserEditForm({ user, onSubmit, onCancel, isLoading }: Us
type="button"
onClick={onCancel}
disabled={isLoading}
className="px-4 py-2 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 disabled:opacity-50"
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-50 transition-colors"
>
انصراف
</button>
<button
type="submit"
disabled={isLoading}
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50"
className="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 transition-colors"
>
{isLoading ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
</button>
components/admin/users/UserInfo.tsx
+29 -29
View File
@@ -10,61 +10,61 @@ interface UserInfoProps {
export default function UserInfo({ user }: UserInfoProps) {
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg mb-6">
<div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl mb-6">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
اطلاعات کاربر
</h3>
</div>
<div className="border-t border-gray-200">
<div className="border-t border-gray-200 dark:border-gray-800">
<dl>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">نام کامل</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
<UserIcon className="h-4 w-4 ml-1 text-gray-400" />
<div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">نام کامل</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
<UserIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{getFullName(user)}
</dd>
</div>
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">ایمیل</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
<EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400" />
<div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">ایمیل</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
<EnvelopeIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{getEmail(user.email)}
</dd>
</div>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">شماره موبایل</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
<PhoneIcon className="h-4 w-4 ml-1 text-gray-400" />
<div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">شماره موبایل</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
<PhoneIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{getMobile(user.mobile)}
</dd>
</div>
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">کیف پول</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
<WalletIcon className="h-4 w-4 ml-1 text-gray-400" />
<div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">کیف پول</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
<WalletIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{formatPrice(user.wallet)} تومان
</dd>
</div>
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">تاریخ عضویت</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 flex items-center">
<CalendarIcon className="h-4 w-4 ml-1 text-gray-400" />
<div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ عضویت</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2 flex items-center">
<CalendarIcon className="h-4 w-4 ml-1 text-gray-400 dark:text-gray-500" />
{formatDate(user.created_at)}
</dd>
</div>
{user.birthday && (
<div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">تاریخ تولد</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div className="bg-white dark:bg-gray-900 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">تاریخ تولد</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
{formatDate(user.birthday)}
</dd>
</div>
)}
{user.gender && (
<div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500">جنسیت</dt>
<dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
<div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
<dt className="text-sm font-medium text-gray-500 dark:text-gray-400">جنسیت</dt>
<dd className="mt-1 text-sm text-gray-900 dark:text-gray-100 sm:mt-0 sm:col-span-2">
{user.gender === 'male' ? 'مرد' : user.gender === 'female' ? 'زن' : user.gender}
</dd>
</div>
components/admin/users/UserProducts.tsx
+23 -23
View File
@@ -67,24 +67,24 @@ export default function UserProducts({
};
return (
<div className="bg-white shadow overflow-hidden sm:rounded-lg">
<div className="bg-white dark:bg-gray-900 shadow-sm ring-1 ring-gray-200 dark:ring-gray-800 overflow-hidden sm:rounded-xl">
<div className="px-4 py-5 sm:px-6">
<h3 className="text-lg leading-6 font-medium text-gray-900">
<h3 className="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
اشتراک‌های کاربر
</h3>
</div>
{/* Current Subscriptions grouped by package */}
<div className="border-t border-gray-200">
<div className="border-t border-gray-200 dark:border-gray-800">
{Object.keys(productsByPackage).length > 0 ? (
Object.entries(productsByPackage).map(([packageName, packageProducts]) => (
<div key={packageName} className="border-b border-gray-200 last:border-b-0">
<div className="bg-gray-50 px-4 py-2">
<h4 className="text-sm font-medium text-gray-700">
<div key={packageName} className="border-b border-gray-200 dark:border-gray-800 last:border-b-0">
<div className="bg-gray-50 dark:bg-gray-800/60 px-4 py-2">
<h4 className="text-sm font-medium text-gray-700 dark:text-gray-300">
پکیج: {packageName}
</h4>
</div>
<ul className="divide-y divide-gray-200">
<ul className="divide-y divide-gray-200 dark:divide-gray-800">
{packageProducts.map((product) => {
const status = getSubscriptionStatus(product);
const StatusIcon = status.icon;
@@ -96,17 +96,17 @@ export default function UserProducts({
<div className="flex-1">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2 space-x-reverse">
<p className="text-sm font-medium text-indigo-600 truncate">
<p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate">
{product.title || 'محصول'}
</p>
{subscriptionCount > 1 && (
<span className="px-2 py-1 text-xs bg-gray-100 text-gray-600 rounded-full">
<span className="px-2 py-1 text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 rounded-full">
{subscriptionCount} اشتراک
</span>
)}
</div>
<div className="mr-2 flex-shrink-0 flex">
<p className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${status.isActive ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'}`}>
<p className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${status.isActive ? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300' : 'bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-300'}`}>
<StatusIcon className={`h-4 w-4 ml-1 ${status.color}`} />
{status.text}
</p>
@@ -114,23 +114,23 @@ export default function UserProducts({
</div>
<div className="mt-2 sm:flex sm:justify-between">
<div className="sm:flex">
<p className="flex items-center text-sm text-gray-500">
<p className="flex items-center text-sm text-gray-500 dark:text-gray-400">
قیمت: {formatPrice(product.price)} تومان
</p>
<p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:mr-6">
<p className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:mr-6">
نوع: {getProductTypeLabel(product.type)}
</p>
{product.pivot?.expire_at && (
<p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:mr-6">
<p className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0 sm:mr-6">
تاریخ انقضا: {formatDate(product.pivot.expire_at)}
</p>
)}
</div>
<div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
<div className="mt-2 flex items-center text-sm text-gray-500 dark:text-gray-400 sm:mt-0">
<button
onClick={() => onUnsubscribe(product.id)}
disabled={isLoading}
className="text-red-600 hover:text-red-900 disabled:opacity-50"
className="text-red-600 hover:text-red-900 dark:text-red-400 dark:hover:text-red-300 disabled:opacity-50 transition-colors"
>
لغو اشتراک
</button>
@@ -145,7 +145,7 @@ export default function UserProducts({
</div>
))
) : (
<div className="px-4 py-5 sm:px-6 text-center text-gray-500">
<div className="px-4 py-5 sm:px-6 text-center text-gray-500 dark:text-gray-400">
کاربر هیچ اشتراکی ندارد
</div>
)}
@@ -153,8 +153,8 @@ export default function UserProducts({
{/* Available Products for Subscription */}
{availableProducts && availableProducts.length > 0 && selectedPackage && (
<div className="border-t border-gray-200 px-4 py-5 sm:px-6">
<h4 className="text-md font-medium text-gray-900 mb-3">
<div className="border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
<h4 className="text-md font-medium text-gray-900 dark:text-gray-100 mb-3">
افزودن اشتراک جدید برای پکیج {selectedPackage}
</h4>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
@@ -166,22 +166,22 @@ export default function UserProducts({
key={product.id}
onClick={() => handleSubscribeClick(product.id)}
disabled={isLoading}
className="relative block w-full border-2 border-indigo-200 rounded-lg p-4 text-right hover:border-indigo-500 hover:bg-indigo-50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
className="relative block w-full border-2 border-indigo-200 dark:border-indigo-900/60 rounded-lg p-4 text-right hover:border-indigo-500 hover:bg-indigo-50 dark:hover:border-indigo-500 dark:hover:bg-indigo-950/40 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
>
<div className="flex items-start justify-between">
<div>
<p className="text-sm font-medium text-gray-900">
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">
{product.title || 'محصول'}
</p>
{subscriptionCount > 0 && (
<p className="mt-1 text-xs text-amber-600">
<p className="mt-1 text-xs text-amber-600 dark:text-amber-400">
{subscriptionCount} اشتراک فعال دارد
</p>
)}
</div>
<PlusCircleIcon className="h-5 w-5 text-indigo-600" />
<PlusCircleIcon className="h-5 w-5 text-indigo-600 dark:text-indigo-400" />
</div>
<p className="mt-2 text-xs text-gray-500">
<p className="mt-2 text-xs text-gray-500 dark:text-gray-400">
برای افزودن اشتراک جدید کلیک کنید
</p>
</button>
components/admin/users/UserSearch.tsx
+3 -3
View File
@@ -27,12 +27,12 @@ export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
</label>
<div className="relative">
<div className="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none">
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400 dark:text-gray-500" />
</div>
<input
type="text"
id="search"
className="block w-full pr-10 pl-3 py-2 border text-slate-900 border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
className="block w-full pr-10 pl-3 py-2 border text-slate-900 dark:text-gray-100 border-gray-300 dark:border-gray-600 rounded-md leading-5 bg-white dark:bg-gray-800 placeholder-gray-500 dark:placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm transition-colors"
placeholder="جستجو با ایمیل یا شماره موبایل..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
@@ -43,7 +43,7 @@ export default function UserSearch({ onSearch, isLoading }: UserSearchProps) {
<button
type="submit"
disabled={isLoading || !searchTerm.trim()}
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed"
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-gray-900 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
>
{isLoading ? 'در حال جستجو...' : 'جستجو'}
</button>