# ClinicPro Admin — UI Design Specification
> سبک بصری: Panelix Premium React Admin Dashboard

---

## 1. Design System پایه

### رنگ‌بندی (Color Palette)

```css
/* Primary — Purple (Panelix style) */
--color-primary-50:  #f5f3ff;
--color-primary-100: #ede9fe;
--color-primary-200: #ddd6fe;
--color-primary-300: #c4b5fd;
--color-primary-400: #a78bfa;
--color-primary-500: #8b5cf6;   /* main */
--color-primary-600: #7c3aed;
--color-primary-700: #6d28d9;
--color-primary-800: #5b21b6;
--color-primary-900: #4c1d95;

/* Neutrals */
--color-gray-50:  #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-200: #e5e7eb;
--color-gray-300: #d1d5db;
--color-gray-400: #9ca3af;
--color-gray-500: #6b7280;
--color-gray-600: #4b5563;
--color-gray-700: #374151;
--color-gray-800: #1f2937;
--color-gray-900: #111827;

/* Status Colors */
--color-success:  #10b981;
--color-warning:  #f59e0b;
--color-danger:   #ef4444;
--color-info:     #3b82f6;

/* Background */
--color-bg-body:    #f1f5f9;   /* light gray page bg */
--color-bg-card:    #ffffff;
--color-bg-sidebar: #0f172a;   /* dark navy sidebar */
--color-bg-sidebar-active: rgba(139, 92, 246, 0.15);
```

### تایپوگرافی

```
Font Family: "Vazirmatn", "Inter", sans-serif   ← فارسی + لاتین
Direction: RTL

Heading 1:  28px / font-bold   / gray-900
Heading 2:  22px / font-bold   / gray-900
Heading 3:  18px / font-semibold / gray-800
Heading 4:  16px / font-semibold / gray-700
Body:       14px / font-normal / gray-600
Caption:    12px / font-normal / gray-500
Label:      12px / font-medium / gray-700 / uppercase + tracking-wide
```

### Spacing & Border Radius

```
Spacing scale: 4px base (4, 8, 12, 16, 20, 24, 32, 40, 48, 64)
Border radius:
  sm:   6px   (badges, chips)
  md:   10px  (inputs, buttons)
  lg:   16px  (cards)
  xl:   24px  (modals)
  full: 9999px (avatars, toggles)
Box shadow:
  card:   0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06)
  modal:  0 20px 60px rgba(0,0,0,.15)
  dropdown: 0 4px 20px rgba(0,0,0,.10)
```

---

## 2. Layout Structure

```
┌─────────────────────────────────────────────────────────┐
│                      TOPBAR (64px)                       │
├────────────┬────────────────────────────────────────────┤
│            │                                            │
│  SIDEBAR   │              MAIN CONTENT                  │
│  (260px)   │                                            │
│            │  ┌──────────────────────────────────────┐  │
│  collapsed │  │  Page Header (title + breadcrumb)    │  │
│  → 72px    │  ├──────────────────────────────────────┤  │
│            │  │                                      │  │
│            │  │     Content Area (padding 24px)      │  │
│            │  │                                      │  │
│            │  └──────────────────────────────────────┘  │
└────────────┴────────────────────────────────────────────┘
```

---

## 3. Sidebar

### حالت باز (260px)

```
┌──────────────────────────────┐
│  ◉ ClinicPro   [← collapse]  │  ← logo + toggle button
├──────────────────────────────┤
│  🔍 جستجوی سریع...           │  ← search input
├──────────────────────────────┤
│  GENERAL                     │  ← section label (gray-500, 11px, uppercase)
│  ◉ داشبورد                   │  ← active item (purple bg + purple text + bold)
│  ○ کاربران                   │
│  ○ پزشکان                    │
│  ○ کلینیک‌ها                 │
├──────────────────────────────┤
│  MANAGEMENT                  │
│  ○ نوبت‌ها              [3]  │  ← badge count
│  ○ پرداخت‌ها                 │
│  ○ تسویه‌حساب          [5]  │
├──────────────────────────────┤
│  CONTENT                     │
│  ○ نظرات               [12] │
│  ○ امتیازها                  │
│  ○ بلاگ                      │
│  ○ پیامک                     │
├──────────────────────────────┤
│  SYSTEM                      │
│  ○ دسته‌بندی‌ها              │
│  ○ نمایندگان                 │
│  ○ منشی‌ها                   │
├──────────────────────────────┤
│  ┌────────────────────────┐  │
│  │ 👤 Admin               │  ← admin profile card at bottom
│  │ admin@clinicpro.ir     │  
│  │ [تنظیمات] [خروج]      │  
│  └────────────────────────┘  │
└──────────────────────────────┘
```

### حالت جمع‌شده (72px) — Flyout on hover
```
┌──────┐
│  ◉   │   ← logo icon
├──────┤
│  🔍  │   ← hover → flyout search
├──────┤
│  ⊞   │   ← icon only, hover → flyout label + submenu
│  👥  │
│  🩺  │
│  🏥  │
│  📅  │
│  💳  │
│  🏦  │   ← badge dot (نه عدد)
│  💬  │   ← badge dot
│  ⭐  │
│  📝  │
│  📱  │
│  🗂  │
│  🤝  │
│  🔐  │
└──────┘
```

**رفتار sidebar:**
- `transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1)`
- Overlay در موبایل (< 768px)
- Active item: `bg-primary-500/15` + right border `4px solid #8b5cf6`
- Hover item: `bg-gray-700/40`

---

## 4. Topbar

```
┌─────────────────────────────────────────────────────────────┐
│  ≡  [Breadcrumb: داشبورد / پزشکان]        🔔 5  👤 Admin ▾ │
└─────────────────────────────────────────────────────────────┘
```

- ارتفاع: 64px
- پس‌زمینه: سفید + `box-shadow: 0 1px 0 #e5e7eb`
- **Notification Bell:** dropdown با لیست آخرین رویدادها
- **User Menu:** تصویر آواتار + نام + dropdown (پروفایل / تنظیمات / خروج)

---

## 5. Cards

### Stat Card (آمار خلاصه)
```
┌──────────────────────────────────┐
│  ┌────┐                          │
│  │ 🩺 │   کل پزشکان              │  ← icon در مربع رنگی (purple-100)
│  └────┘   1,284                  │  ← عدد بزرگ (28px bold)
│           ↑ 12% نسبت به ماه قبل │  ← trend badge (سبز/قرمز)
└──────────────────────────────────┘
bg: white, radius: 16px, shadow: card, padding: 24px
```

### Data Card (محتوا / جداول)
```
┌────────────────────────────────────────────┐
│  عنوان کارت                    [اقدام ▾]  │  ← header
├────────────────────────────────────────────┤
│                                            │
│   محتوا (جدول / نمودار / فرم)             │
│                                            │
└────────────────────────────────────────────┘
```

---

## 6. DataTable (جدول داده)

```
┌─────────────────────────────────────────────────────────────────┐
│  [🔍 جستجو...]    [فیلتر ▾]    [ستون‌ها ▾]    [صادرکردن ↓]     │
├──────────┬────────────┬──────────┬────────┬─────────────────────┤
│  ☐  نام  │   موبایل   │  نقش     │ وضعیت  │      اقدامات        │
├──────────┼────────────┼──────────┼────────┼─────────────────────┤
│ ☐ علی م. │ 0912***    │ پزشک     │ ● فعال │ 👁 ✏️ 🗑            │
│ ☐ سارا ح │ 0935***    │ کلینیک   │ ○ غیر  │ 👁 ✏️ 🗑            │
├──────────┴────────────┴──────────┴────────┴─────────────────────┤
│  نمایش 1-10 از 284          [← قبلی]  1 2 3 ... 29  [بعدی →]   │
└─────────────────────────────────────────────────────────────────┘
```

**ویژگی‌ها:**
- Sortable columns (کلیک روی header → ↑↓)
- Row hover: `bg-gray-50`
- Sticky header هنگام scroll
- Loading state: skeleton rows (shimmer animation)
- Empty state: آیکون + پیام توصیفی + دکمه اقدام
- Bulk actions: با انتخاب checkbox ها → نوار بالا ظاهر می‌شود

---

## 7. Status Badges

```jsx
// وضعیت نوبت
<Badge variant="yellow">در انتظار پرداخت</Badge>     /* waiting_for_payment */
<Badge variant="blue">رزرو شده</Badge>               /* reserved */
<Badge variant="purple">ورود به مطب</Badge>           /* checked_in */
<Badge variant="orange">در صف انتظار</Badge>          /* waiting */
<Badge variant="indigo">در حال ویزیت</Badge>          /* in_progress */
<Badge variant="green">ویزیت شده</Badge>              /* visited / completed */
<Badge variant="red">لغو شده</Badge>                  /* cancelled_* */
<Badge variant="gray">لغو خودکار</Badge>              /* auto_cancel_unpaid */
<Badge variant="rose">غیبت</Badge>                    /* no_show */

// وضعیت پرداخت
<Badge variant="yellow">در انتظار</Badge>             /* pending */
<Badge variant="green">موفق</Badge>                   /* received */
<Badge variant="red">لغو شده</Badge>                  /* canceled */
<Badge variant="blue">استرداد</Badge>                 /* refund */

// وضعیت SMS Template
<Badge variant="gray">پیش‌نویس</Badge>               /* draft */
<Badge variant="yellow">در انتظار تأیید</Badge>       /* pending_approval */
<Badge variant="green">تأیید شده</Badge>              /* approved */
<Badge variant="red">رد شده</Badge>                   /* rejected */
```

**ساختار badge:**
```
padding: 2px 10px
border-radius: 9999px
font-size: 12px / font-medium
با dot رنگی (●) در ابتدا
```

---

## 8. فرم‌ها (Forms)

### Input
```
┌─────────────────────────────────┐
│ برچسب                           │
│ ┌─────────────────────────────┐ │
│ │ 🔍  placeholder...          │ │  ← icon اختیاری
│ └─────────────────────────────┘ │
│ پیام خطا (قرمز، 12px)           │
└─────────────────────────────────┘
```

- Border: `1px solid #d1d5db` → focus: `2px solid #8b5cf6`
- Height input: 44px
- Border-radius: 10px
- Error state: border قرمز + shake animation
- Disabled: opacity 50%

### Select / Dropdown
- کتابخانه: `react-select` با استایل custom (RTL support)
- Multi-select برای تخصص‌ها، بیمه‌ها، تگ‌ها

### Permission Matrix (منشی)
```
                    مشاهده   ایجاد   ویرایش   حذف
نوبت‌ها              ☑        ☑       ☐        ☐
آدرس‌ها             ☑        ☐       ☐        ☐
اطلاعات کلینیک      ☑        —       ☐        —
بیمه‌ها             ☑        ☐       ☐        ☐
```

---

## 9. نمودارها (Charts)

### داشبورد اصلی
```
Row 1: [Stat Card x4] ← کاربران / پزشکان / نوبت امروز / درآمد امروز

Row 2: [Area Chart — درآمد ماهانه (60%)] | [Donut Chart — نوبت‌ها بر اساس وضعیت (40%)]

Row 3: [Bar Chart — آمار ماهانه نمایندگان (60%)] | [لیست آخرین نوبت‌ها (40%)]
```

**کتابخانه:** `Recharts` یا `ApexCharts`
- رنگ اصلی نمودارها: shades of purple + secondary colors
- Tooltip: سفید با سایه، اعداد فارسی
- X-axis: نام ماه‌های شمسی (فروردین ... اسفند)
- Responsive: `<ResponsiveContainer width="100%" height={300}>`

---

## 10. Modal / Dialog

```
┌──────────────────────────────────────────────────┐
│                                                  │  ← backdrop: rgba(0,0,0,.4)
│  ┌────────────────────────────────────────────┐  │
│  │ عنوان Modal                           ✕   │  │  ← header: border-bottom
│  ├────────────────────────────────────────────┤  │
│  │                                            │  │
│  │  محتوا                                    │  │
│  │                                            │  │
│  ├────────────────────────────────────────────┤  │
│  │             [لغو]    [تأیید / ذخیره]      │  │  ← footer: border-top
│  └────────────────────────────────────────────┘  │
│                                                  │
└──────────────────────────────────────────────────┘
```

- انیمیشن ورود: `scale(0.95) → scale(1)` + `opacity 0 → 1` (200ms)
- Confirm Dialog برای حذف: دکمه «حذف» قرمز + آیکون هشدار
- Width: sm=400px / md=600px / lg=800px / xl=1000px

---

## 11. Toast Notifications

```
موقعیت: top-left (RTL)
┌─────────────────────────────────┐
│ ✓  پزشک با موفقیت ویرایش شد.   │  ← success (سبز)
└─────────────────────────────────┘
┌─────────────────────────────────┐
│ ✕  خطا در ذخیره اطلاعات.       │  ← error (قرمز)
└─────────────────────────────────┘
```

- Auto dismiss: 4 ثانیه
- Stack: حداکثر 3 نوتیفیکیشن همزمان
- کتابخانه: `react-hot-toast` یا `sonner`

---

## 12. Empty States & Loading

### Loading (Skeleton)
```
┌──────────────────────────────┐
│  ▓▓▓▓▓▓▓▓▓  ░░░░░░░░░░░     │  ← shimmer animation
│  ░░░░░░░░░░░░░░░░░░░░░░░░   │
│  ░░░░░░░░░░░  ▓▓▓▓▓▓▓▓▓▓   │
└──────────────────────────────┘
```
- `animate-pulse` با رنگ `gray-200`

### Empty State
```
┌──────────────────────────────────┐
│                                  │
│          [SVG Illustration]      │
│                                  │
│    هیچ موردی یافت نشد            │
│    توضیح کوتاه...                │
│                                  │
│         [افزودن اولین مورد]      │
│                                  │
└──────────────────────────────────┘
```

---

## 13. Page Header (هر صفحه)

```
┌─────────────────────────────────────────────────────────┐
│  پزشکان                             [+ افزودن پزشک]     │
│  داشبورد / پزشکان                                        │  ← breadcrumb
└─────────────────────────────────────────────────────────┘
```

---

## 14. تکنولوژی Stack

| لایه | کتابخانه |
|------|----------|
| Framework | React 19 + TypeScript |
| Routing | React Router v7 |
| Styling | Tailwind CSS v4 |
| State (server) | TanStack Query v5 |
| State (client) | Zustand |
| Forms | React Hook Form + Zod |
| Charts | Recharts |
| Table | TanStack Table v8 |
| Icons | Heroicons v2 |
| Date (Jalali) | `@date-io/date-fns-jalali` + `react-datepicker` |
| Numbers | `react-number-format` |
| Toast | `sonner` |
| Select | `react-select` |
| Rich Text | `@tiptap/react` |
| File Upload | `react-dropzone` |
| RTL | `dir="rtl"` + Tailwind `rtl:` variants |
| Font | Vazirmatn (از Google Fonts یا CDN) |

---

## 15. Responsive Breakpoints

| نام | عرض | رفتار |
|-----|-----|--------|
| mobile | < 768px | Sidebar → Drawer overlay |
| tablet | 768px–1024px | Sidebar collapsed (72px) |
| desktop | > 1024px | Sidebar باز (260px) |

---

## 16. Dark Mode (اختیاری — فاز دوم)

```css
/* با Tailwind dark: variant */
.dark {
  --color-bg-body: #0f172a;
  --color-bg-card: #1e293b;
  --color-bg-sidebar: #0a0f1e;
}
```
Toggle در topbar ← ذخیره در `localStorage`

---

## 17. نمونه رنگ‌بندی صفحه داشبورد

```
[صفحه]  bg: #f1f5f9
│
├── Sidebar (bg: #0f172a, text: gray-400, active: purple-500)
│
└── Main
    ├── Topbar (bg: white, border-bottom: gray-200)
    │
    └── Content (padding: 24px)
        ├── [Stat Card]  bg:white, icon-box: purple-100
        ├── [Stat Card]  bg:white, icon-box: green-100
        ├── [Stat Card]  bg:white, icon-box: blue-100
        └── [Stat Card]  bg:white, icon-box: orange-100
```

---

## منابع
- طراحی مرجع: [Panelix Premium React Admin Dashboard](https://themeforest.net/item/panelix-premium-react-admin-dashboard-template/63163276)
- فونت: [Vazirmatn](https://rastikerdar.github.io/vazirmatn/)
- آیکون: [Heroicons](https://heroicons.com/)
- رنگ‌بندی: [Tailwind CSS Colors](https://tailwindcss.com/docs/customizing-colors)
