# 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
// وضعیت نوبت
در انتظار پرداخت /* waiting_for_payment */
رزرو شده /* reserved */
ورود به مطب /* checked_in */
در صف انتظار /* waiting */
در حال ویزیت /* in_progress */
ویزیت شده /* visited / completed */
لغو شده /* cancelled_* */
لغو خودکار /* auto_cancel_unpaid */
غیبت /* no_show */
// وضعیت پرداخت
در انتظار /* pending */
موفق /* received */
لغو شده /* canceled */
استرداد /* refund */
// وضعیت SMS Template
پیشنویس /* draft */
در انتظار تأیید /* pending_approval */
تأیید شده /* approved */
رد شده /* 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: ``
---
## 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)