# بازطراحی پنل ادمین بر اساس UI Kit الهام‌گرفته از clinic-pro-tauri

## پروژه

`clinicpro` (admin frontend — `assets/admin/`)

## زمینه

ظاهر هدف، اپ دسکتاپ `clinic-pro-tauri` است (اسکرین‌شات‌ها توسط کاربر ارائه شده). می‌خواهیم کل پنل ادمین `https://clinic-pro.ddev.site/admin/*` — داشبورد و همه‌ی صفحات، مودال‌ها، دکمه‌ها، فیلدها و همه‌ی المان‌ها — ظاهری یکدست و مشابه آن داشته باشند.

**اختلاف مهم استک (نباید نادیده گرفته شود):**
- `clinic-pro-tauri`: React 18 + Vite + **MUI v6** + `styled-components` + `@mui/x-charts` + Tailwind (config خالی، ظاهر از MUI theme می‌آید).
- `clinicpro` admin: React 19 + **Webpack Encore** + **Tailwind v4** + CSS variables دست‌ساز (`assets/admin/styles.css`) + TanStack Query + heroicons. **MUI ندارد و نباید اضافه شود.**

بنابراین کامپوننت‌های tauri قابل کپی ۱:۱ نیستند. کار = استخراج **design tokens + الگوهای بصری** از اسکرین‌شات‌ها/tauri و **بازسازی به‌صورت native در استک فعلی clinicpro** (Tailwind v4 + CSS vars + کامپوننت‌های React موجود). کتابخانه‌ی CSS/UI جدید (MUI، styled-components، …) اضافه نشود.

## مشکل / هدف

۱. یک **UI Kit** (کتابخانه‌ی کامپوننت‌های پایه + توکن‌ها) در `assets/admin/components/ui/` بساز/تکمیل کن که دقیقاً مطابق ظاهر tauri باشد.
۲. سپس صفحات admin را روی این UI Kit بازطراحی کن تا همه یکدست شوند.
۳. کل کار روی یک **برنچ جدا** انجام شود.

## وضعیت فعلی

`clinicpro` از قبل یک design system مبتنی بر CSS variable دارد (`assets/admin/styles.css`) — رنگ primary با hue ۲۵۶ (بنفش/indigo) که **به ظاهر tauri نزدیک است**:

```css
:root {
  --brand-h: 256; --brand-c: 0.15;
  --bg: #eef2f8; --surface: #ffffff; --surface-2: #f6f8fc;
  --border: #e4e9f1; --text: #0f1b2e; --text-2: #56657c; --text-3: #8a98ad;
  --primary: oklch(0.55 var(--brand-c) var(--brand-h));
  --success:#15a35a; --warning:#d98a09; --danger:#e0394a; --info:#2b86d8; --violet:#7c5cf0;
  --success-bg:#e6f6ed; --warning-bg:#fcf2df; --danger-bg:#fdebed; --info-bg:#e7f1fb;
  --shadow-sm; --shadow; --shadow-lg;
  --r-xs:7px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
  --sidebar-w:252px; --topbar-h:64px;
}
```

کامپوننت‌های UI موجود: `assets/admin/components/ui/` شامل `DataTable`, `Modal`, `ConfirmDialog`, `PageHeader`, `StatusBadge`, `Pagination`, `SearchableSelect`, `PersianDateInput`, `PersianCalendar`, `MobileInput`, `PriceInput`, `NotificationMobileCard`, `FeatureGate`.

صفحات: `assets/admin/pages/*.tsx` (Dashboard، MyPatientsPage، ClinicServicesPage، AppointmentsPage، …) — اکثراً ترکیبی از کلاس‌های CSS (`.card`, `.btn`, `.field`, `.badge`) و inline-style هستند؛ ناهماهنگی بصری دارند.

نمودارها: داشبورد tauri از نمودار خطی (درآمد) و میله‌ای (تعداد بیماران) استفاده می‌کند. در clinicpro کتابخانه‌ی چارت فعلی را شناسایی کن (اگر نبود، یک گزینه‌ی سبک سازگار با React 19 پیشنهاد بده — مثل `recharts`؛ فقط در صورت تأیید لازم).

## ویژگی‌های بصری هدف (از اسکرین‌شات‌های tauri)

- **Layout:** سایدبار سمت **راست** (RTL)، لوگو `clinicPro +`، آیتم فعال با پس‌زمینه‌ی primary-soft و متن primary؛ topbar با جستجوی full-width، آیکون‌های نوتیفیکیشن/تنظیمات/تم تیره، پروفایل کاربر (آواتار + نام + نقش).
- **Stat cards:** کارت‌های آماری با پس‌زمینه‌ی **پاستلی ملایم** (نارنجی/بنفش/سبز/صورتی)، آیکون رنگی گرد گوشه، عدد بزرگ + برچسب.
- **Cards:** گوشه‌گرد (`--r`)، سایه‌ی ملایم، بوردر `--border`.
- **Buttons:** primary پر (بنفش)، secondary outline، دکمه‌ی نارنجی برای CTA ثانویه (مثل «خرید اشتراک»، «یادداشت»)؛ گوشه‌گرد، حالت‌های hover/disabled/loading.
- **Fields:** ورودی با label بالا، گوشه‌گرد، آیکون داخل (در صورت لزوم)، حالت focus با ring؛ select با chevron؛ textarea؛ date-picker شمسی.
- **Status pills:** سبز («ویزیت شده/پرداخت شده/انجام شد»)، نارنجی/زرد («در حال پیگیری/در انتظار/تسویه نشده»)، قرمز («لغو شده»)، آبی («نوبت جدید»). هم به‌صورت badge و هم dropdown.
- **Tabs:** نوار تب افقی با زیرخط primary برای تب فعال (صفحه‌ی پرونده: سرویس‌ها/اطلاعات پرونده/نوبت‌ها/پرداخت‌ها/کیف پول/کال سنتر/پرونده پزشکی/ضمیمه/پیام‌ها).
- **Tables:** سربرگ خاکستری ملایم، ردیف‌های راه‌راه، ستون عملیات با dropdown «عملیات».
- **Patient cards (پرونده‌ها):** کارت با آواتار نارنجی گرد، نام، شماره پرونده، موبایل، chips برچسب رنگی (`+۲`)، حالت grid/list toggle.
- **Timeline نوبت‌ها:** نمای زمانی با نقاط رنگی و کارت‌های رنگ‌بندی‌شده بر اساس وضعیت.

## وظایف

### ۱. استخراج و یکسان‌سازی توکن‌ها

- اسکرین‌شات‌های tauri + (در صورت نیاز) `clinic-pro-tauri/src/theme/` و کامپوننت‌های `clinic-pro-tauri/src/element/`, `src/components/shared|common|layout` را مرور کن و مقادیر دقیق رنگ primary/accent، شعاع‌ها، سایه‌ها، رنگ‌های پاستلی stat-cards را دربیاور.
- `assets/admin/styles.css` (`:root` و `.dark`) را طوری تنظیم کن که primary/accent/پاستل‌ها **دقیقاً** با tauri هم‌خوان شوند (رنگ نارنجی accent را به‌عنوان توکن جدید اضافه کن، مثلاً `--accent` / `--accent-bg`).
- توکن‌های تیره (dark mode) را هم هماهنگ کن (دکمه‌ی تم تیره در topbar وجود دارد).

### ۲. ساخت/تکمیل UI Kit در `assets/admin/components/ui/`

برای هر primitive یک کامپوننت TSX با propهای تایپ‌شده بساز یا کامپوننت موجود را به ظاهر tauri برسان. حداقل:

- `Button` (variants: `primary | secondary | outline | accent | ghost | danger`، sizes، `loading`, `disabled`, آیکون چپ/راست)
- `Card` / `StatCard` (پاستلی + آیکون رنگی)
- `Modal` (موجود — هم‌تراز با ظاهر tauri)
- `Field` wrapper + `Input` + `Textarea` + `Select` (label بالا، ring focus)
- `Tabs` (زیرخط primary)
- `StatusPill` / `StatusDropdown` (نگاشت وضعیت → رنگ، فارسی)
- `Table` (سربرگ، راه‌راه، ستون عملیات) — یا ارتقای `DataTable` موجود
- `Avatar`, `Chip/Tag` (برچسب رنگی + `+N`)
- `SectionHeader`, `Breadcrumb` (صفحه‌ی پرونده)

> همه با CSS variables موجود؛ کلاس‌های مشترک را در `styles.css` تعریف کن، نه inline تکراری. RTL، فونت Vazirmatn.

اگر مفید بود، یک صفحه‌ی نمایشِ کیت (`assets/admin/pages/UiKitPage.tsx` تحت روت dev مثل `/admin/ui-kit`) بساز که همه‌ی primitiveها را رندر کند تا بصری چک شوند (اختیاری ولی توصیه‌شده).

### ۳. بازطراحی صفحات روی UI Kit

ترتیب پیشنهادی (هر صفحه یک commit جدا روی همان برنچ):

1. **Layout** (Sidebar راست + Topbar) — مبنای همه.
2. **Dashboard** (`DashboardPage`) — stat cards پاستلی + دو چارت + جدول «لیست نوبت‌های جدید».
3. **پرونده‌ها** (`MyPatientsPage` لیست کارتی + toggle grid/list).
4. **جزئیات پرونده** — تب‌ها (سرویس‌ها/اطلاعات/نوبت‌ها/پرداخت‌ها/…)، کارت سرویس، فرم اطلاعات، لیست پرداخت‌های آکاردئونی.
5. **نوبت‌ها** (`AppointmentsPage`) — stat cards + نمای جدولی/زمانی + تب پزشکان.
6. **پرداخت‌ها، بیماران، خدمات، تنظیمات (پلن‌های اشتراک)، پیام‌ها، انبارداری** — یکی‌یکی هم‌تراز با کیت.

هر صفحه: inlineهای پراکنده با primitiveهای کیت جایگزین شوند؛ رفتار/داده (TanStack Query، APIها) تغییر نکند — فقط ظاهر.

### ۴. تست هر مرحله

```bash
ddev exec npx tsc --noEmit --project tsconfig.json
ddev exec yarn dev
```
بدون خطای TS و build سبز. بعد از هر صفحه بصری چک شود.

## نکات مهم

- **برنچ جدا:** کل کار روی برنچ `feat/admin-ui-kit` (از `main`). در پایان merge نشود مگر با تأیید کاربر.
- **بدون تغییر رفتار/داده:** فقط لایه‌ی presentation. APIها، query keys، منطق فرم‌ها (React Hook Form + Zod) دست‌نخورده.
- **MUI/styled-components اضافه نشود** — استک فعلی (Tailwind v4 + CSS vars + heroicons) حفظ شود. tauri صرفاً مرجع بصری است.
- RTL، فونت Vazirmatn، تاریخ شمسی با `formatDate()`.
- چارت‌ها: اگر کتابخانه‌ای در clinicpro نیست، قبل از افزودن `recharts` (یا مشابه) از کاربر تأیید بگیر؛ در غیر این صورت با SVG/CSS سبک بساز.
- این تغییر frontend-only است؛ نیازی به migration یا تغییر `docs/api/` نیست.
- خروجی باید **یکدستی کامل** باشد: همه‌ی دکمه‌ها/فیلدها/مودال‌ها/بَج‌ها در همه‌ی صفحات از کیت واحد بیایند.