Seyyed_arc/docs/WORKFLOW_UI_EXAMPLES.md

# نمونه‌های UI برای Workflow Filters

این فایل شامل نمونه‌های بصری و کدهای مثال برای استفاده از فیلترها و سلکتورهای جدید است.

---

## 🎨 مثال 1: Dropdown با Emoji و Label فارسی

### Backend Schema:
```python
"priority": {
    "type": "string",
    "description": "اولویت ارسال",
    "enum": ["low", "normal", "high"],
    "default": "normal",
    "ui_config": {
        "labels": {
            "low": "🔽 کم - Low",
            "normal": "➖ عادی - Normal",
            "high": "🔼 بالا - High"
        }
    },
    "required": False
}
```

### نمایش در UI:
```
┌─────────────────────────────────────┐
│ اولویت ارسال ▼                      │
├─────────────────────────────────────┤
│ 🔽 کم - Low                         │
│ ➖ عادی - Normal       ✓            │
│ 🔼 بالا - High                      │
└─────────────────────────────────────┘
```

---

## 🎨 مثال 2: Multi-Select با FilterChips

### Backend Schema:
```python
"status_filter": {
    "type": "array",
    "description": "فیلتر بر اساس وضعیت فاکتور",
    "items": {
        "type": "string",
        "enum": ["draft", "confirmed", "cancelled", "pending"]
    },
    "ui_type": "multi_select",
    "ui_config": {
        "labels": {
            "draft": "پیش‌نویس",
            "confirmed": "تایید شده",
            "cancelled": "لغو شده",
            "pending": "در انتظار"
        }
    },
    "required": False
}
```

### نمایش در UI:
```
وضعیت فاکتور:
┌──────────────┐ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐
│ پیش‌نویس   ✓ │ │ تایید شده  ✓ │ │ لغو شده      │ │ در انتظار    │
└──────────────┘ └──────────────┘ └──────────────┘ └──────────────┘
    (selected)      (selected)       (not selected)   (not selected)
```

---

## 🎨 مثال 3: Currency Selector

### Backend Schema:
```python
"currency_id": {
    "type": "integer",
    "description": "شناسه ارز",
    "ui_type": "currency_selector",
    "ui_config": {
        "business_scoped": True,
        "show_default": True
    },
    "required": False
}
```

### نمایش در UI:
```
┌────────────────────────────────────────┐
│ ارز ▼                                   │
├────────────────────────────────────────┤
│ ﷼ ریال (IRR)                  ✓        │
│ $ دلار آمریکا (USD)                    │
│ € یورو (EUR)                           │
│ د.إ درهم امارات (AED)                  │
└────────────────────────────────────────┘

[🔗 استفاده از نود قبلی]
```

---

## 🎨 مثال 4: Timezone Selector با پرچم

### Backend Schema:
```python
"timezone": {
    "type": "string",
    "description": "منطقه زمانی",
    "default": "Asia/Tehran",
    "enum": ["Asia/Tehran", "UTC", "Asia/Dubai", "Europe/London", "America/New_York"],
    "ui_config": {
        "labels": {
            "Asia/Tehran": "🇮🇷 تهران (ایران)",
            "UTC": "🌍 UTC (جهانی)",
            "Asia/Dubai": "🇦🇪 دبی",
            "Europe/London": "🇬🇧 لندن",
            "America/New_York": "🇺🇸 نیویورک"
        }
    },
    "required": False
}
```

### نمایش در UI:
```
┌─────────────────────────────────────┐
│ منطقه زمانی ▼                       │
├─────────────────────────────────────┤
│ 🇮🇷 تهران (ایران)          ✓       │
│ 🌍 UTC (جهانی)                      │
│ 🇦🇪 دبی                             │
│ 🇬🇧 لندن                            │
│ 🇺🇸 نیویورک                         │
└─────────────────────────────────────┘
```

---

## 🎨 مثال 5: Person Selector با Reference Support

### Backend Schema:
```python
"person_id": {
    "type": "integer",
    "description": "شناسه طرف حساب",
    "ui_type": "person_selector",
    "ui_config": {
        "business_scoped": True,
        "filter_by_invoice_type": True,
        "show_reference_button": True
    },
    "required": True
}
```

### حالت 1: ورود مستقیم
```
┌────────────────────────────────────────┐
│ طرف حساب                        ⭐      │
├────────────────────────────────────────┤
│ 123                    [🔗] [⭐]        │
└────────────────────────────────────────┘
💡 می‌توانید شناسه را وارد کنید یا از نود
   قبلی استفاده کنید: $node_id.person_id

[🔗 استفاده از نود قبلی]
```

### حالت 2: استفاده از Reference
```
┌────────────────────────────────────────┐
│ طرف حساب                        ⭐      │
├────────────────────────────────────────┤
│ 🔗 $trigger-1.person_id   [🔗] [⭐]    │
└────────────────────────────────────────┘
ℹ️ این مقدار از یک نود قبلی استفاده می‌کند

[🔗 استفاده از نود قبلی]
```

---

## 🎨 مثال 6: Invoice Type با Emoji

### Backend Schema:
```python
"invoice_type": {
    "type": "string",
    "description": "نوع فاکتور",
    "required": True,
    "enum": ["invoice_sales", "invoice_purchase", "invoice_return_sales", "invoice_return_purchase"],
    "ui_type": "select",
    "ui_config": {
        "labels": {
            "invoice_sales": "🛒 فاکتور فروش",
            "invoice_purchase": "🛍️ فاکتور خرید",
            "invoice_return_sales": "↩️ برگشت از فروش",
            "invoice_return_purchase": "↪️ برگشت از خرید"
        }
    }
}
```

### نمایش در UI:
```
┌─────────────────────────────────────┐
│ نوع فاکتور ▼                ⭐      │
├─────────────────────────────────────┤
│ 🛒 فاکتور فروش             ✓       │
│ 🛍️ فاکتور خرید                     │
│ ↩️ برگشت از فروش                    │
│ ↪️ برگشت از خرید                    │
└─────────────────────────────────────┘
```

---

## 🎨 مثال 7: HTTP Method Selector

### Backend Schema:
```python
"method": {
    "type": "string",
    "description": "روش HTTP",
    "default": "POST",
    "enum": ["GET", "POST", "PUT", "DELETE", "PATCH"],
    "ui_config": {
        "labels": {
            "GET": "GET - دریافت",
            "POST": "POST - ارسال",
            "PUT": "PUT - به‌روزرسانی کامل",
            "DELETE": "DELETE - حذف",
            "PATCH": "PATCH - به‌روزرسانی جزئی"
        }
    }
}
```

### نمایش در UI:
```
┌─────────────────────────────────────────────┐
│ روش HTTP ▼                                   │
├─────────────────────────────────────────────┤
│ GET - دریافت                                │
│ POST - ارسال                        ✓       │
│ PUT - به‌روزرسانی کامل                      │
│ DELETE - حذف                                │
│ PATCH - به‌روزرسانی جزئی                    │
└─────────────────────────────────────────────┘
```

---

## 🎨 مثال 8: Parse Mode با توضیح

### Backend Schema:
```python
"parse_mode": {
    "type": "string",
    "description": "حالت پارس متن",
    "enum": ["None", "HTML", "Markdown"],
    "default": "None",
    "ui_config": {
        "labels": {
            "None": "متن ساده",
            "HTML": "HTML - با فرمت HTML",
            "Markdown": "Markdown - با فرمت مارک‌داون"
        }
    }
}
```

### نمایش در UI:
```
┌─────────────────────────────────────────────┐
│ حالت پارس متن ▼                             │
├─────────────────────────────────────────────┤
│ متن ساده                            ✓       │
│ HTML - با فرمت HTML                         │
│ Markdown - با فرمت مارک‌داون                │
└─────────────────────────────────────────────┘
```

---

## 🎨 مثال 9: Person Type Filter

### Backend Schema:
```python
"person_type_filter": {
    "type": "string",
    "description": "فیلتر بر اساس نوع شخص",
    "enum": ["customer", "supplier", "employee", "other"],
    "ui_config": {
        "labels": {
            "customer": "مشتری",
            "supplier": "تامین‌کننده",
            "employee": "کارمند",
            "other": "سایر"
        }
    }
}
```

### نمایش در UI:
```
┌─────────────────────────────────────┐
│ نوع شخص ▼                           │
├─────────────────────────────────────┤
│ مشتری                               │
│ تامین‌کننده                 ✓       │
│ کارمند                              │
│ سایر                                │
└─────────────────────────────────────┘
```

---

## 🎯 الگوی کامل: ساخت یک Trigger با فیلترهای کامل

### Schema:
```python
class InvoiceCreatedTrigger(BaseTrigger):
    def get_metadata(self) -> Dict[str, Any]:
        return {
            "name": "ایجاد فاکتور",
            "description": "زمانی که یک فاکتور فروش یا خرید ایجاد می‌شود",
            "config_schema": {
                "enabled": {
                    "type": "boolean",
                    "description": "فعال/غیرفعال کردن trigger",
                    "default": True
                },
                "invoice_type": {
                    "type": "string",
                    "description": "نوع فاکتور",
                    "enum": ["invoice_sales", "invoice_purchase"],
                    "ui_config": {
                        "labels": {
                            "invoice_sales": "🛒 فاکتور فروش",
                            "invoice_purchase": "🛍️ فاکتور خرید"
                        }
                    }
                },
                "min_amount": {
                    "type": "number",
                    "description": "حداقل مبلغ فاکتور"
                },
                "max_amount": {
                    "type": "number",
                    "description": "حداکثر مبلغ فاکتور"
                },
                "status_filter": {
                    "type": "array",
                    "description": "فیلتر بر اساس وضعیت فاکتور",
                    "items": {
                        "type": "string",
                        "enum": ["draft", "confirmed", "cancelled"]
                    },
                    "ui_type": "multi_select",
                    "ui_config": {
                        "labels": {
                            "draft": "پیش‌نویس",
                            "confirmed": "تایید شده",
                            "cancelled": "لغو شده"
                        }
                    }
                },
                "currency_id": {
                    "type": "integer",
                    "description": "فیلتر بر اساس ارز",
                    "ui_type": "currency_selector"
                }
            }
        }
```

### نمایش کامل در UI:

```
╔═══════════════════════════════════════════════════════════╗
║  تنظیمات Trigger: ایجاد فاکتور                           ║
╠═══════════════════════════════════════════════════════════╣
║                                                            ║
║  ☑️ فعال/غیرفعال کردن trigger                             ║
║  ───────────────────────────────────────────────────────  ║
║                                                            ║
║  نوع فاکتور:                                              ║
║  ┌────────────────────────────────────┐                   ║
║  │ 🛒 فاکتور فروش             ✓      │                   ║
║  └────────────────────────────────────┘                   ║
║                                                            ║
║  حداقل مبلغ فاکتور:                                       ║
║  ┌────────────────────────────────────┐                   ║
║  │ 1000000                     [⭐]   │                   ║
║  └────────────────────────────────────┘                   ║
║                                                            ║
║  حداکثر مبلغ فاکتور:                                      ║
║  ┌────────────────────────────────────┐                   ║
║  │ 10000000                    [⭐]   │                   ║
║  └────────────────────────────────────┘                   ║
║                                                            ║
║  وضعیت فاکتور:                                            ║
║  ┌──────────┐ ┌──────────┐ ┌──────────┐                  ║
║  │پیش‌نویس✓│ │تایید شده│ │لغو شده ✓ │                  ║
║  └──────────┘ └──────────┘ └──────────┘                  ║
║                                                            ║
║  ارز:                                                      ║
║  ┌────────────────────────────────────┐                   ║
║  │ ﷼ ریال (IRR)               ✓      │                   ║
║  └────────────────────────────────────┘                   ║
║                                                            ║
╠═══════════════════════════════════════════════════════════╣
║                           [انصراف]  [💾 ذخیره]            ║
╚═══════════════════════════════════════════════════════════╝
```

---

## 💡 نکات طراحی UI

### 1. استفاده از Emoji:
- ✅ استفاده کنید: برای دسته‌بندی و تمایز بصری
- ❌ زیاده‌روی نکنید: حداکثر 1-2 emoji در هر label

### 2. ترتیب نمایش:
```
Priority Order:
1. فیلدهای required (با ⭐)
2. فیلدهای پرکاربرد
3. فیلترها
4. تنظیمات پیشرفته
```

### 3. Group Sections:
```
📋 اطلاعات پایه
    - نوع فاکتور
    - طرف حساب
    - تاریخ

🔍 فیلترها
    - وضعیت
    - مبلغ
    - ارز

⚙️ تنظیمات پیشرفته
    - سال مالی
    - انبار
    - پرداخت
```

### 4. Color Coding:
- 🔴 خطا / حذف
- 🟢 موفقیت / تایید
- 🟡 هشدار / در انتظار
- 🔵 اطلاعات / عادی
- ⚪ خنثی / پیش‌فرض

---

## 📱 Responsive Design

### Desktop (>768px):
```
┌─────────────┬─────────────┐
│ فیلد 1      │ فیلد 2      │
├─────────────┼─────────────┤
│ فیلد 3      │ فیلد 4      │
└─────────────┴─────────────┘
```

### Mobile (<768px):
```
┌─────────────────────────┐
│ فیلد 1                  │
├─────────────────────────┤
│ فیلد 2                  │
├─────────────────────────┤
│ فیلد 3                  │
├─────────────────────────┤
│ فیلد 4                  │
└─────────────────────────┘
```

---

**نکته پایانی**: تمام این UI patterns به صورت خودکار از schema تولید می‌شوند. فقط کافی است schema را درست تعریف کنید!