feat(admin): standardize Buttons and Modals in SmartAdvisorManager and UITexts
This commit is contained in:
parsa aghaei
parent
6de7d8be8a
commit
439df36fbe
@ -4,8 +4,11 @@ import { toast } from 'react-hot-toast';
|
||||
import api from '../services/api';
|
||||
import Spinner from '../components/ui/Spinner';
|
||||
import ConfirmModal from '../components/ui/ConfirmModal';
|
||||
import Button from '../components/ui/Button';
|
||||
import Modal from '../components/ui/Modal';
|
||||
import type { SmartAdvisorRule, Product } from '../types/admin';
|
||||
|
||||
|
||||
export default function SmartAdvisorManager() {
|
||||
const [rules, setRules] = useState<SmartAdvisorRule[]>([]);
|
||||
const [products, setProducts] = useState<Product[]>([]);
|
||||
@ -147,13 +150,14 @@ export default function SmartAdvisorManager() {
|
||||
</h2>
|
||||
<p className="text-gray-500 font-medium mt-1">تعریف قوانین تجویز محصولات پیشنهادی بر اساس عوارض و علائم پت</p>
|
||||
</div>
|
||||
<button
|
||||
<Button
|
||||
variant="primary"
|
||||
size="md"
|
||||
startIcon={Plus}
|
||||
onClick={() => openModal()}
|
||||
className="bg-purple-600 hover:bg-purple-700 text-white px-5 py-2.5 rounded-xl flex items-center gap-2 font-bold transition-all shadow-md shadow-purple-200"
|
||||
>
|
||||
<Plus className="w-5 h-5" />
|
||||
تعریف قانون جدید
|
||||
</button>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
@ -198,12 +202,20 @@ export default function SmartAdvisorManager() {
|
||||
</td>
|
||||
<td className="py-4 px-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={() => openModal(rule)} className="p-2 text-blue-600 hover:bg-blue-50 rounded-lg transition-colors">
|
||||
<Edit2 className="w-4 h-4" />
|
||||
</button>
|
||||
<button onClick={() => setDeleteTargetId(rule.id)} className="p-2 text-red-600 hover:bg-red-50 rounded-lg transition-colors">
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
startIcon={Edit2}
|
||||
onClick={() => openModal(rule)}
|
||||
className="text-blue-600 hover:bg-blue-50"
|
||||
/>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="xs"
|
||||
startIcon={Trash2}
|
||||
onClick={() => setDeleteTargetId(rule.id)}
|
||||
className="text-red-600 hover:bg-red-50"
|
||||
/>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@ -216,103 +228,100 @@ export default function SmartAdvisorManager() {
|
||||
|
||||
{/* Form Modal */}
|
||||
{isModalOpen && (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-gray-900/60 backdrop-blur-sm">
|
||||
<div className="bg-white rounded-2xl w-full max-w-lg shadow-2xl overflow-hidden animate-in zoom-in duration-200">
|
||||
<div className="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
|
||||
<h3 className="text-lg font-bold text-gray-900">
|
||||
{editingRule ? 'ویرایش قانون مشاور هوشمند' : 'تعریف قانون جدید'}
|
||||
</h3>
|
||||
<button onClick={() => setIsModalOpen(false)} className="text-gray-400 hover:text-red-500 transition-colors">
|
||||
<X className="w-6 h-6" />
|
||||
</button>
|
||||
<Modal
|
||||
isOpen={isModalOpen}
|
||||
onClose={() => setIsModalOpen(false)}
|
||||
title={editingRule ? 'ویرایش قانون مشاور هوشمند' : 'تعریف قانون جدید'}
|
||||
icon={Sparkles}
|
||||
maxWidth="lg"
|
||||
>
|
||||
<form onSubmit={handleSave} className="space-y-4 font-vazir">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-1">نام عارضه یا علامت بیماری (condition) *</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
value={formData.condition}
|
||||
onChange={(e) => setFormData({ ...formData, condition: e.target.value })}
|
||||
placeholder="مثال: مشکلات مفصلی و لنگش، ریزش مو شدید، حساسیت پوستی"
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-purple-500 outline-none text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSave} className="p-6 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-1">شرط / علائم عارضه (condition) *</label>
|
||||
<input
|
||||
required
|
||||
type="text"
|
||||
value={formData.condition}
|
||||
onChange={(e) => setFormData({ ...formData, condition: e.target.value })}
|
||||
placeholder="مثال: مشکلات مفصلی و لنگش"
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-purple-500 outline-none text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-1">گونه پت هدف (targetPetType)</label>
|
||||
<select
|
||||
value={formData.targetPetType}
|
||||
onChange={(e) => setFormData({ ...formData, targetPetType: e.target.value })}
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-purple-500 outline-none text-sm bg-white"
|
||||
>
|
||||
<option value="سگ">سگ (Dog)</option>
|
||||
<option value="گربه">گربه (Cat)</option>
|
||||
<option value="هر دو">هر دو (سگ و گربه)</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-1">گونه حیوان هدف (targetPetType)</label>
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-1">انتخاب محصول پیشنهادی کنینا (recommendedProduct) *</label>
|
||||
<div className="space-y-2">
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
value={productSearch}
|
||||
onChange={(e) => setProductSearch(e.target.value)}
|
||||
placeholder="جستجو در نام محصولات..."
|
||||
className="w-full pl-4 pr-10 py-2 rounded-xl border border-gray-200 focus:border-purple-500 outline-none text-xs"
|
||||
/>
|
||||
<Search className="w-4 h-4 text-gray-400 absolute right-3 top-2.5" />
|
||||
</div>
|
||||
<select
|
||||
value={formData.targetPetType}
|
||||
onChange={(e) => setFormData({ ...formData, targetPetType: e.target.value })}
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-purple-500 outline-none text-sm font-bold bg-white"
|
||||
required
|
||||
value={formData.recommendedProduct}
|
||||
onChange={(e) => setFormData({ ...formData, recommendedProduct: e.target.value })}
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-purple-500 outline-none text-sm bg-white"
|
||||
>
|
||||
<option value="سگ">سگ</option>
|
||||
<option value="گربه">گربه</option>
|
||||
<option value="هر دو">هر دو (سگ و گربه)</option>
|
||||
<option value="">-- یک محصول را انتخاب کنید --</option>
|
||||
{filteredProducts.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.nameFa} ({p.nameEn || p.id})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-1">محصول پیشنهادی *</label>
|
||||
<div className="space-y-2">
|
||||
<div className="relative">
|
||||
<Search className="w-4 h-4 absolute right-3 top-1/2 -translate-y-1/2 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="جستجوی سریع محصول..."
|
||||
value={productSearch}
|
||||
onChange={(e) => setProductSearch(e.target.value)}
|
||||
className="w-full pl-3 pr-9 py-2 rounded-lg border border-gray-200 text-xs outline-none"
|
||||
/>
|
||||
</div>
|
||||
<select
|
||||
required
|
||||
value={formData.recommendedProduct}
|
||||
onChange={(e) => setFormData({ ...formData, recommendedProduct: e.target.value })}
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-purple-500 outline-none text-sm font-bold bg-white"
|
||||
>
|
||||
{filteredProducts.map(p => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.nameFa || p.name} ({p.artNo})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-1">علت و توضیح علمی پیشنهاد (reason) *</label>
|
||||
<textarea
|
||||
required
|
||||
rows={4}
|
||||
value={formData.reason}
|
||||
onChange={(e) => setFormData({ ...formData, reason: e.target.value })}
|
||||
placeholder="مثال: حاوی ۱۰٪ پودر صدف لبسبز برای بازسازی غضروف مفاصل..."
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-purple-500 outline-none text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-bold text-gray-700 mb-1">علت و توضیح علمی پیشنهاد (reason) *</label>
|
||||
<textarea
|
||||
required
|
||||
rows={4}
|
||||
value={formData.reason}
|
||||
onChange={(e) => setFormData({ ...formData, reason: e.target.value })}
|
||||
placeholder="مثال: حاوی ۱۰٪ پودر صدف لبسبز برای بازسازی غضروف مفاصل..."
|
||||
className="w-full px-4 py-2.5 rounded-xl border border-gray-200 focus:border-purple-500 outline-none text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex justify-end gap-3 border-t border-gray-100">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
className="px-5 py-2.5 rounded-xl border border-gray-200 text-gray-600 font-bold hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
انصراف
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSaving}
|
||||
className="px-6 py-2.5 rounded-xl bg-purple-600 text-white font-bold hover:bg-purple-700 transition-colors shadow-md shadow-purple-200 flex items-center gap-2"
|
||||
>
|
||||
{isSaving && <Spinner size="sm" />}
|
||||
ذخیره قانون
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pt-4 flex justify-end gap-3 border-t border-gray-100">
|
||||
<Button
|
||||
type="button"
|
||||
variant="secondary"
|
||||
size="md"
|
||||
onClick={() => setIsModalOpen(false)}
|
||||
>
|
||||
انصراف
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
size="md"
|
||||
isLoading={isSaving}
|
||||
>
|
||||
ذخیره قانون
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
)}
|
||||
|
||||
{/* Delete Confirmation Modal */}
|
||||
@ -328,3 +337,4 @@ export default function SmartAdvisorManager() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
@ -47,6 +47,8 @@ import ImagePreviewModal from '../components/ui/ImagePreviewModal';
|
||||
import MediaSelector from '../components/ui/MediaSelector';
|
||||
import RichTextEditor from '../components/ui/RichTextEditor';
|
||||
import IconPickerModal, { ICON_REGISTRY } from '../components/ui/IconPickerModal';
|
||||
import Button from '../components/ui/Button';
|
||||
|
||||
|
||||
// Classic v1 Groupings (Backward Compatibility)
|
||||
const V1_PAGE_TABS = [
|
||||
@ -919,15 +921,16 @@ export default function UITexts() {
|
||||
)}
|
||||
|
||||
<div className="flex justify-end pt-1">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
size="xs"
|
||||
startIcon={Save}
|
||||
onClick={() => handleSave(field.key)}
|
||||
disabled={isSaving}
|
||||
className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-xl text-xs font-black transition-all flex items-center gap-1.5 shadow-sm cursor-pointer"
|
||||
isLoading={isSaving}
|
||||
>
|
||||
{isSaving ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Save className="w-3.5 h-3.5" />}
|
||||
<span>ذخیره این فیلد</span>
|
||||
</button>
|
||||
ذخیره این فیلد
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@ -948,22 +951,21 @@ export default function UITexts() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
size="sm"
|
||||
startIcon={Save}
|
||||
onClick={handleSaveAll}
|
||||
disabled={isSavingAll || !hasUnsavedChanges}
|
||||
className={`px-5 py-2.5 rounded-xl text-xs font-black flex items-center gap-2 transition-all shadow-sm ${
|
||||
hasUnsavedChanges
|
||||
? 'bg-purple-600 hover:bg-purple-700 text-white shadow-purple-200 cursor-pointer animate-pulse'
|
||||
: 'bg-gray-100 text-gray-400 cursor-not-allowed'
|
||||
}`}
|
||||
disabled={!hasUnsavedChanges}
|
||||
isLoading={isSavingAll}
|
||||
>
|
||||
{isSavingAll ? <Loader2 className="w-4 h-4 animate-spin" /> : <Save className="w-4 h-4" />}
|
||||
<span>ذخیره تمامی تغییرات {hasUnsavedChanges ? `(${Object.keys(edits).length})` : ''}</span>
|
||||
</button>
|
||||
ذخیره تمامی تغییرات {hasUnsavedChanges ? `(${Object.keys(edits).length})` : ''}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Main Version Switcher: v2 (New Structure) vs v1 (Legacy) */}
|
||||
<div className="flex items-center justify-between bg-white p-2 rounded-2xl border border-gray-200 shadow-xs">
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user