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

fix: redesign

Browse Source
This commit is contained in:
Amirmahdi
2026-07-10 16:01:27 +03:30
parent 05262b7636
commit a447222201
31 changed files with 1426 additions and 1738 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/admin/products/ProductForm.tsx
+42 -167
View File
@@ -16,7 +16,7 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
const [formData, setFormData] = useState<CreateProductData | UpdateProductData>({
title: '',
price: 0,
type: 4, // Default to monthly
type: 4,
discounted_price: '',
daily_price: '',
discount: '',
@@ -69,206 +69,90 @@ export default function ProductForm({ product, packageName, onSubmit, onCancel,
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
const submitData = {
...formData,
...(descriptions.length > 0 && { descriptions }),
};
await onSubmit(submitData);
};
const inputClass = 'block w-full px-4 py-2.5 text-sm text-gray-900 dark:text-gray-100 border border-gray-200 dark:border-gray-700 rounded-xl bg-gray-50 dark:bg-gray-800/60 placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-indigo-500/20 focus:border-indigo-500 dark:focus:border-indigo-400 transition-colors';
const labelClass = 'block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1.5';
return (
<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 dark:text-gray-100 mb-4">
<form onSubmit={handleSubmit} className="space-y-6 bg-white dark:bg-gray-900 p-6 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
<div className="pb-4 border-b border-gray-100 dark:border-gray-800">
<h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
{product ? 'ویرایش محصول' : 'ایجاد محصول جدید'} برای پکیج {packageName}
</h3>
</div>
<div className="grid grid-cols-1 gap-6 md:grid-cols-2">
{/* Title */}
<div className="grid grid-cols-1 gap-5 md:grid-cols-2">
<div>
<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
type="text"
id="title"
name="title"
required
value={formData.title || ''}
onChange={handleInputChange}
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="مثال: اشتراک ماهانه"
/>
<label htmlFor="title" className={labelClass}>عنوان <span className="text-red-500">*</span></label>
<input type="text" id="title" name="title" required value={formData.title || ''} onChange={handleInputChange} className={inputClass} placeholder="مثال: اشتراک ماهانه" />
</div>
{/* Price */}
<div>
<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
type="number"
id="price"
name="price"
required
min="0"
value={formData.price || ''}
onChange={handleInputChange}
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"
/>
<label htmlFor="price" className={labelClass}>قیمت (تومان) <span className="text-red-500">*</span></label>
<input type="number" id="price" name="price" required min="0" value={formData.price || ''} onChange={handleInputChange} className={inputClass} placeholder="مثال: 60000" />
</div>
{/* Type */}
<div>
<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
id="type"
name="type"
required
value={formData.type || 4}
onChange={handleInputChange}
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"
>
<label htmlFor="type" className={labelClass}>نوع اشتراک <span className="text-red-500">*</span></label>
<select id="type" name="type" required value={formData.type || 4} onChange={handleInputChange} className={inputClass}>
{Object.entries(PRODUCT_TYPES).map(([value, label]) => (
<option key={value} value={value}>
{label}
</option>
<option key={value} value={value}>{label}</option>
))}
</select>
</div>
{/* Discounted price (display only) */}
<div>
<label htmlFor="discounted_price" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
قیمت کلی تخفیف خورده <span className="text-xs text-gray-400">(فقط نمایشی)</span>
</label>
<input
type="text"
id="discounted_price"
name="discounted_price"
value={formData.discounted_price || ''}
onChange={handleInputChange}
dir="rtl"
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="مثال: ۱٬۴۶۰٬۰۰۰"
/>
<label htmlFor="discounted_price" className={labelClass}>قیمت کلی تخفیف خورده <span className="text-xs text-gray-400">(فقط نمایشی)</span></label>
<input type="text" id="discounted_price" name="discounted_price" value={formData.discounted_price || ''} onChange={handleInputChange} dir="rtl" className={inputClass} placeholder="مثال: ۱٬۴۶۰٬۰۰۰" />
</div>
{/* Daily price (display only) */}
<div>
<label htmlFor="daily_price" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
قیمت روزانه <span className="text-xs text-gray-400">(فقط نمایشی)</span>
</label>
<input
type="text"
id="daily_price"
name="daily_price"
value={formData.daily_price || ''}
onChange={handleInputChange}
dir="rtl"
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="مثال: معادل روزانه ۴٬۰۰۰ تومان"
/>
<label htmlFor="daily_price" className={labelClass}>قیمت روزانه <span className="text-xs text-gray-400">(فقط نمایشی)</span></label>
<input type="text" id="daily_price" name="daily_price" value={formData.daily_price || ''} onChange={handleInputChange} dir="rtl" className={inputClass} placeholder="مثال: معادل روزانه ۴٬۰۰۰ تومان" />
</div>
{/* Discount (display only) */}
<div>
<label htmlFor="discount" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
تخفیف <span className="text-xs text-gray-400">(فقط نمایشی)</span>
</label>
<input
type="text"
id="discount"
name="discount"
value={formData.discount || ''}
onChange={handleInputChange}
dir="rtl"
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="مثال: ۵۵٪ تخفیف"
/>
<label htmlFor="discount" className={labelClass}>تخفیف <span className="text-xs text-gray-400">(فقط نمایشی)</span></label>
<input type="text" id="discount" name="discount" value={formData.discount || ''} onChange={handleInputChange} dir="rtl" className={inputClass} placeholder="مثال: ۵۵٪ تخفیف" />
</div>
{/* Sort order */}
<div>
<label htmlFor="sort_order" className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
ترتیب نمایش <span className="text-xs text-gray-400">(۰ بالاترین)</span>
</label>
<input
type="number"
id="sort_order"
name="sort_order"
min="0"
value={formData.sort_order ?? 0}
onChange={handleInputChange}
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="0"
/>
<label htmlFor="sort_order" className={labelClass}>ترتیب نمایش <span className="text-xs text-gray-400">(۰ بالاترین)</span></label>
<input type="number" id="sort_order" name="sort_order" min="0" value={formData.sort_order ?? 0} onChange={handleInputChange} className={inputClass} placeholder="0" />
</div>
{/* Best seller */}
<div className="md:col-span-2">
<label className="flex items-center gap-2 cursor-pointer">
<input
type="checkbox"
name="is_best_seller"
checked={!!formData.is_best_seller}
onChange={handleInputChange}
className="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded focus:ring-indigo-500 dark:bg-gray-800"
/>
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">
پرفروش‌ترین اشتراک
</span>
<span className="text-xs text-gray-400">(فقط برای یک محصول فعال می‌شود)</span>
<label className="flex items-center gap-3 cursor-pointer p-3 rounded-xl bg-gray-50 dark:bg-gray-800/60 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
<input type="checkbox" name="is_best_seller" checked={!!formData.is_best_seller} onChange={handleInputChange} className="h-4 w-4 text-indigo-600 border-gray-300 dark:border-gray-600 rounded-lg focus:ring-indigo-500 dark:bg-gray-800" />
<div>
<span className="text-sm font-medium text-gray-700 dark:text-gray-300">پرفروش‌ترین اشتراک</span>
<span className="text-xs text-gray-400 mr-2">(فقط برای یک محصول فعال می‌شود)</span>
</div>
</label>
</div>
</div>
{/* Descriptions */}
<div>
<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">
<div className="pt-4 border-t border-gray-100 dark:border-gray-800">
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">ویژگی‌ها</label>
<div className="flex gap-2">
<input
type="text"
value={newDescription}
onChange={(e) => setNewDescription(e.target.value)}
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"
className={`flex-1 ${inputClass}`}
placeholder="ویژگی جدید را وارد کنید"
onKeyPress={(e) => {
if (e.key === 'Enter') {
e.preventDefault();
handleAddDescription();
}
}}
onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); handleAddDescription(); } }}
/>
<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 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 transition-colors"
>
<button type="button" onClick={handleAddDescription} className="inline-flex items-center px-4 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/30 transition-colors shadow-sm shadow-indigo-500/20">
<PlusIcon className="h-5 w-5" />
</button>
</div>
{/* Descriptions List */}
{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 dark:bg-gray-800/60 px-3 py-2 rounded-md">
<li key={index} className="flex items-center justify-between px-4 py-2.5 rounded-xl bg-gray-50 dark:bg-gray-800/60 ring-1 ring-gray-100 dark:ring-gray-800">
<span className="text-sm text-gray-700 dark:text-gray-300">{desc}</span>
<button
type="button"
onClick={() => handleRemoveDescription(index)}
className="text-red-600 dark:text-red-400 hover:text-red-900 transition-colors"
>
<XMarkIcon className="h-5 w-5" />
<button type="button" onClick={() => handleRemoveDescription(index)} className="text-red-500 hover:text-red-700 dark:text-red-400 transition-colors">
<XMarkIcon className="h-4 w-4" />
</button>
</li>
))}
@@ -276,23 +160,14 @@ 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 dark:border-gray-800">
<button
type="button"
onClick={onCancel}
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"
>
<div className="flex justify-end gap-3 pt-4 border-t border-gray-100 dark:border-gray-800">
<button type="button" onClick={onCancel} className="px-5 py-2.5 rounded-xl border border-gray-200 dark:border-gray-700 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">
انصراف
</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 dark:focus:ring-offset-gray-900 focus:ring-indigo-500 disabled:opacity-50 transition-colors"
>
<button type="submit" disabled={isLoading} className="px-5 py-2.5 rounded-xl bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500/30 disabled:opacity-50 transition-colors shadow-sm shadow-indigo-500/20">
{isLoading ? 'در حال ذخیره...' : product ? 'به‌روزرسانی' : 'ایجاد'}
</button>
</div>
</form>
);
}
}
components/admin/products/ProductList.tsx
+50 -62
View File
@@ -16,96 +16,84 @@ interface ProductListProps {
export default function ProductList({ products, packageName, onEdit, onDelete, isLoading }: ProductListProps) {
if (isLoading) {
return (
<div className="flex justify-center items-center py-12">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
<div className="flex justify-center items-center py-16">
<div className="h-10 w-10 border-4 border-indigo-200 dark:border-indigo-800 border-t-indigo-600 rounded-full animate-spin" />
</div>
);
}
if (!products || products.length === 0) {
return (
<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 className="text-center py-16 bg-white dark:bg-gray-900 rounded-2xl ring-1 ring-gray-200 dark:ring-gray-800 shadow-sm">
<div className="mx-auto h-12 w-12 rounded-xl bg-gray-100 dark:bg-gray-800 flex items-center justify-center mb-3">
<svg className="h-6 w-6 text-gray-400" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
</svg>
</div>
<p className="text-gray-500 dark:text-gray-400 text-sm">هیچ محصولی برای پکیج {packageName} یافت نشد</p>
</div>
);
}
return (
<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 dark:text-gray-100">
<div className="bg-white dark:bg-gray-900 ring-1 ring-gray-200 dark:ring-gray-800 rounded-2xl overflow-hidden shadow-sm">
<div className="px-5 py-4 border-b border-gray-200 dark:border-gray-800">
<h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
محصولات پکیج {packageName}
</h3>
</div>
<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 dark:hover:bg-gray-800 transition-colors">
<div className="flex items-center justify-between">
<li key={product.id} className="px-5 py-4 hover:bg-gray-50 dark:hover:bg-gray-800/40 transition-colors">
<div className="flex items-start justify-between gap-4">
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2 min-w-0">
<p className="text-sm font-medium text-indigo-600 dark:text-indigo-400 truncate">
{product.title || 'بدون عنوان'}
</p>
{product.is_best_seller && (
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300 whitespace-nowrap">
پرفروش‌ترین
</span>
)}
</div>
<div className="flex items-center gap-2 flex-shrink-0">
<span className="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-gray-100 text-gray-700 dark:bg-gray-800 dark:text-gray-300">
ترتیب: {product.sort_order ?? 0}
</span>
<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>
<div className="mt-2">
<p className="text-sm text-gray-900 dark:text-gray-100">
قیمت: {formatPrice(product.price)} تومان
<div className="flex items-center gap-2 flex-wrap">
<p className="text-sm font-semibold text-indigo-600 dark:text-indigo-400">
{product.title || 'بدون عنوان'}
</p>
{(product.discounted_price || product.daily_price || product.discount) && (
<div className="mt-1 flex flex-wrap gap-x-4 gap-y-1 text-xs text-gray-600 dark:text-gray-400">
{product.discounted_price && (
<span>قیمت تخفیف‌خورده: {product.discounted_price}</span>
)}
{product.daily_price && (
<span>قیمت روزانه: {product.daily_price}</span>
)}
{product.discount && (
<span>تخفیف: {product.discount}</span>
)}
</div>
)}
{product.descriptions && product.descriptions.length > 0 && (
<div className="mt-2">
<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>
))}
</ul>
</div>
{product.is_best_seller && (
<span className="px-2 py-0.5 text-xs font-semibold rounded-lg bg-amber-100 text-amber-800 dark:bg-amber-900/30 dark:text-amber-300">
پرفروش
</span>
)}
<span className="px-2 py-0.5 text-xs font-semibold rounded-lg bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-300">
{getProductTypeLabel(product.type)}
</span>
<span className="px-2 py-0.5 text-xs font-medium rounded-lg bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400">
#{product.sort_order ?? 0}
</span>
</div>
<div className="mt-2 text-xs text-gray-500 dark:text-gray-400">
آخرین به‌روزرسانی: {formatDate(product.updated_at)}
<div className="mt-2 flex flex-wrap gap-x-5 gap-y-1 text-xs text-gray-500 dark:text-gray-400">
<span className="font-medium text-gray-900 dark:text-gray-100">{formatPrice(product.price)} تومان</span>
{product.discounted_price && <span>تخفیف: {product.discounted_price}</span>}
{product.daily_price && <span>روزانه: {product.daily_price}</span>}
{product.discount && <span>{product.discount}</span>}
</div>
{product.descriptions && product.descriptions.length > 0 && (
<div className="mt-2 flex flex-wrap gap-1.5">
{product.descriptions.map((desc, index) => (
<span key={index} className="px-2 py-0.5 text-xs bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 rounded-md">
{desc}
</span>
))}
</div>
)}
<p className="mt-2 text-xs text-gray-400 dark:text-gray-500">
{formatDate(product.updated_at)}
</p>
</div>
<div className="mr-4 flex-shrink-0 flex space-x-2 space-x-reverse">
<div className="flex items-center gap-1 flex-shrink-0">
<button
onClick={() => onEdit(product)}
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"
className="p-2 rounded-lg text-indigo-600 dark:text-indigo-400 hover:bg-indigo-50 dark:hover:bg-indigo-500/10 transition-colors"
>
<PencilIcon className="h-5 w-5" />
<PencilIcon className="h-4 w-4" />
</button>
<button
onClick={() => onDelete(product)}
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"
className="p-2 rounded-lg text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
>
<TrashIcon className="h-5 w-5" />
<TrashIcon className="h-4 w-4" />
</button>
</div>
</div>
@@ -114,4 +102,4 @@ export default function ProductList({ products, packageName, onEdit, onDelete, i
</ul>
</div>
);
}
}