# همسان‌سازی کامل UI پنل ادمین clinicpro با فیگما (زبان طراحی clinic-pro-tauri) ## پروژه `clinicpro` — فقط لایه‌ی frontend پنل ادمین (`assets/admin/`). بدون تغییر backend/API. تسک صرفاً بصری است: توکن‌های طراحی + کامپوننت‌های مشترک + layout هر صفحه. ## هدف کلی **همه‌ی صفحات پنل ادمین clinicpro باید ظاهر و زبان طراحیِ این فیگما را داشته باشند** — همان رنگ‌ها، تایپوگرافی، کارت‌ها، جدول‌ها، فرم‌ها، badgeها، سایدبار/هدر، و الگوهای موبایل (bottom sheet، منوی پایین). clinic-pro-tauri پیاده‌سازی مرجعِ همین طراحی است؛ هرجا فیگما و tauri هم‌خوان بودند از همان مقادیر استفاده کن. **فیگما:** `https://www.figma.com/design/76Z5FkibRdsMRisqPTIXKU/nobat724?node-id=3598-18842` - `fileKey = 76Z5FkibRdsMRisqPTIXKU` — page: `Cover` — board: `3598:18842` (name «new version»، کل صفحات اینجاست) - ابزار: Figma MCP → `get_screenshot`, `get_variable_defs`, `get_metadata` روی **node-id هر فریم جداگانه** (بورد کامل ۴۹۸۳۳×۱۶۰۰۰ است، یک‌جا نگیر). ## معماری فعلی (مهم — قبل از شروع بخوان) پنل ادمین clinicpro **از قبل یک design-system سفارشی کامل دارد** و تا حدی به سمت tauri رفته (کامنت‌های `styles.css` صراحتاً «دقیقاً مطابق clinic-pro-tauri»): - استک: **Tailwind v4 + CSS variables**، نه MUI. **MUI را وارد نکن؛ معماری را عوض نکن.** فقط مقدار متغیرها و کلاس‌های موجود را به مقادیر فیگما/tauri برسان. - فایل توکن/کامپوننت: `assets/admin/styles.css` (۸۳۱ خط) — کلاس‌های `.cp-*` (کارت/input/button/stat/badge)، `.app/.sidebar/.topbar/.nav-item`، `.seg`, `.avatar`, `.modal`. - dark mode: کلاس `.dark` + `data-theme="dark"` روی `` (در `AdminLayout.tsx` خطوط ۱۶–۲۲). عیناً مثل tauri؛ نگه‌دار. - RTL + فونت Vazirmatn از قبل درست است؛ دست نزن. پس این تسک «بازنویسی از صفر» نیست؛ دو بخش است: **(الف)** یک‌بار توکن/کامپوننت‌های مشترک را دقیق مطابق فیگما کن، **(ب)** بعد تک‌تک صفحات را با فریم فیگمای متناظر مقایسه و اصلاح کن. --- ## بخش الف — سیستم طراحی مشترک (یک‌بار، پایه‌ی همه‌ی صفحات) فایل: `assets/admin/styles.css` + `stores/uiStore.ts` + `components/layout/*`. ### الف-۱. توکن‌های رنگ (light + dark) اختلاف فعلی با فیگما/tauri: | توکن | فعلی clinicpro | هدف (tauri/فیگما) | |------|----------------|-------------------| | primary | oklch پویا `~#5457dd` | بنفش ثابت **`#5559CE`** (hover `#494CB3`، dark selected `#6B6FD6`) | | bg light | `#eef2f8` | **`#fafafa`** | | bg dark (body) | `#080d16` | **`#1f1d2b`** | | surface dark (سایدبار/هدر/کارت) | `#111a29` | **`#222433`** | | border dark | `#243042` | **`#343645`** (اغلب فریم‌ها transparent) | | text dark | `#e9eef7` / `#9eb0c6` | **`#D7D8ED`** / **`#A1A1A1`** | ```css :root { --brand-h: 277; --brand-c: 0.14; /* تأیید با نمونه‌گیری #5559CE از get_variable_defs */ --primary: #5559CE; --primary-600: #494CB3; --primary-700: #3E41A0; --bg: #fafafa; --bg-2: #f2f2f5; --surface: #ffffff; } [data-theme="dark"] { --bg: #1f1d2b; --bg-2: #1a1826; --surface: #222433; --surface-2: #2a2c3d; --surface-3: #313349; --border: #343645; --text: #D7D8ED; --text-2: #A1A1A1; --primary: #6B6FD6; } ``` > بلوک `@supports (color: color-mix(in oklch …))` (خطوط ۱۱۳–۱۳۹) هم primary/dark را از نو می‌سازد؛ **هم sRGB و هم oklch را هماهنگ کن** وگرنه مرورگر مدرن رنگ متفاوت می‌دهد. رنگ‌های status/stat-card را با `get_variable_defs` فیگما تأیید کن (accent نارنجی `#F17732`، سبز `#009D79`، amber `#FFC051` از قبل کپی شده‌اند). ### الف-۲. سلکتور رنگ کاربر primary فعلاً «قابل‌تعویض» است (`brandHue` در `uiStore` + سلکتور در `Topbar.tsx`). فیگما این را ندارد. **پیش‌فرض `brandHue` را روی بنفش بگذار**؛ سلکتور رنگ بماند اما default بنفش (اگر کارفرما تک‌رنگ می‌خواهد، بلوک سلکتور رنگ در `Topbar.tsx` خطوط ۱۱۶–۱۳۶ را حذف کن). ### الف-۳. ابعاد و رفتار layout - عرض سایدبار: `--sidebar-w: 243px`، حالت جمع **`90px`** (بجای `252/76`). همه‌ی `76px` هاردکد‌شده (`styles.css` خطوط ۳۱۳، ۳۲۶، ۷۱۵) → `90px`. - **hover-expand** سایدبار مثل tauri: در `data-collapsed="true"` روی `:hover` عرض به `243px` و برچسب‌ها/`brand-text` دوباره ظاهر شوند (مرجع: `clinic-pro-tauri/src/components/layout/sidebar/index.jsx`، کلاس `hover-mode-sidebar`). - ارتفاع هدر ریسپانسیو مثل tauri (`56 → 67 → 79 → 90px`)؛ مقدار دقیق دسکتاپ را از فریم `header` فیگما بگیر. - border سایدبار/هدر در dark عملاً محو (`dark:border-transparent`). ### الف-۴. شعاع‌ها و input/button - input/select/textarea شعاع **8px** (tauri `mui.js`)؛ `--r-sm` را به `8px` ببر یا `--r-input: 8px` بساز و در `.cp-input/.cp-select/.cp-textarea` (خطوط ۲۰۱–۲۲۸) استفاده کن. focus بنفش (بعد از تغییر primary خودکار). - ارتفاع دکمه‌ها را با فریم button فیگما مقایسه کن (اگر tauri 40px است، `.cp-btn-*` از 42px به 40px). ### الف-۵. کامپوننت‌های مشترک مطابق فیگما این کلاس‌ها/کامپوننت‌ها پایه‌ی همه‌ی صفحات‌اند؛ هرکدام را با کامپوننت متناظر فیگما یک‌به‌یک تطبیق بده (شعاع، سایه، padding، رنگ، حالت hover/active): | کامپوننت clinicpro | فایل | فریم مرجع فیگما | |---|---|---| | کارت | `.cp-card` (styles.css) | کارت‌های `dashboard` (`4836:5435`) | | stat card | `components/ui/StatCard.tsx` + `.cp-stat` | کارت‌های بالای `dashboard` | | جدول | `components/ui/DataTable.tsx` | `appointments-table` (`4840:7773`)، `patients-grid` (`5265:8540`) | | صفحه‌بندی | `components/ui/Pagination.tsx` | پایین جدول‌ها | | مودال | `components/ui/Modal.tsx` + `.modal` | `appointments-info` (`5635:11700`) | | badge وضعیت | `components/ui/StatusBadge.tsx`, `AppointmentStatusDropdown.tsx` | ستون status جدول‌ها، `status` (`6070:35666`) | | هدر صفحه | `components/ui/PageHeader.tsx` | نوار عنوان فریم‌ها | | فرم/input | `.cp-input/.cp-label/...` + `MobileInput.tsx`, `PriceInput.tsx` | `add patients` (`5287:32314`)، `add services` | | تقویم/تاریخ شمسی | `PersianDatePicker/Calendar/DateInput.tsx` | `calendar-mobile` (`6070:36125`)، فریم‌های reserve | | آواتار | `.avatar` | آواتار هدر/کارت بیمار | | سایدبار ناوبری | `components/layout/Sidebar.tsx` | فریم `menu`/سایدبار | | هدر بالا | `components/layout/Topbar.tsx` | instance `header` (`7788:39703`) | --- ## بخش ب — تطبیق تک‌تک صفحات با فریم فیگما ### ایندکس فریم‌های فیگما (۴ section، node-id دسکتاپ) **section `edited-appointment` (نوبت‌ها) — `4836:5434`:** | فریم | node-id | |---|---| | dashboard | `4836:5435` | | appointments-table | `4840:7773` | | appointments-info | `5635:11700` | | appointments-replace | `5635:14347` | | appointments-change | `5126:7712` | | transfer | `6026:23601` / `6030:12460` | | reserve-table | `5484:10961` | | add reserve / add patients | `5760:34891` | | edit | `6026:23229` | **section `patients` (پرونده/بیماران) — `5265:8539`:** | فریم | node-id | | فریم | node-id | |---|---|---|---|---| | patients-grid | `5265:8540` | | detail | `6020:22415` | | patients-card | `5642:11515` | | invoice | `5892:15788` | | add patients | `5287:32314` | | wallet | `6046:13257` | | services | `5339:9489` | | call center | `6328:9693` | | add services | `5892:12711` | | document | `6419:10086` | | booked | `6214:9519` | | patients-filter | `5272:31373` | | payment / payment1–4 | `5892:13200` … `5892:14976` | | | | **section `inventory` (انبار) — `7492:16182`:** | inventory | `7492:15558` | inventory-package | `7501:15827` | **section `setting` (تنظیمات) — `6838:34246`:** ~۲۵ فریم `seetting` (تب‌های مختلف). شروع‌ها: `6923:34358`, `6945:14186`, `7043:24804`, `7091:14411`, `7291:33902`. هر تب را با `get_screenshot` جدا بگیر. > **موبایل:** هر فریم دسکتاپ نسخه‌ی `*-mobile` (عرض ۳۶۰) دارد + الگوهای مشترک: `menu` (نوار پایین، `360x56`)، `bottom sheet`، `filters-mobile`، `status`. این الگوها را در نسخه‌ی responsive صفحات clinicpro پیاده کن (بویژه bottom-sheet بجای مودال روی موبایل، و منوی پایین موبایل). ### mapping صفحات clinicpro → فریم فیگما پنل clinicpro علاوه بر صفحات پزشک/کلینیک، صفحات super-admin دارد که معادل مستقیم در فیگما ندارند. قانون: - **معادل مستقیم دارد** → دقیقاً از فریم فیگما پیروی کن (layout، اجزا، رنگ). - **معادل ندارد** (super-admin) → همان **کامپوننت‌لایبرری و استایل مشترک** (بخش الف) را اعمال کن تا هم‌خانواده‌ی فیگما به‌نظر برسد؛ ساختار جدول/فرم/کارت را از نزدیک‌ترین الگوی فیگما (جدول = `patients-grid`، فرم = `add patients`، تنظیمات = `seetting`) وام بگیر. | صفحه clinicpro | فریم فیگمای مرجع | نوع | |---|---|---| | `DashboardPage.tsx` | dashboard `4836:5435` | مستقیم | | `AppointmentsPage.tsx` | appointments-table `4840:7773` | مستقیم | | `AppointmentDetailPage.tsx` | appointments-info `5635:11700` | مستقیم | | `NewSessionPage.tsx` | add reserve `5760:34891` | مستقیم | | `MyPatientsPage.tsx` | patients-grid `5265:8540` | مستقیم | | `PaymentsPage.tsx` / `PaymentDetailPage.tsx` | payment `5892:13200`, invoice `5892:15788` | مستقیم | | `SettingsPage.tsx` / `MyClinicPage.tsx` / `DoctorProfilePage.tsx` | seetting `6923:34358`… | مستقیم | | `MyFinancialPage.tsx` / `FinancialReportPage.tsx` | wallet `6046:13257` | مستقیم | | `ClinicServicesPage.tsx` / `InsurancePricingPage.tsx` | services `5339:9489` | مستقیم | | `SmsPage.tsx` / `SmsWalletPage.tsx` | wallet `6046:13257` | نیمه‌مستقیم | | `MySecretariesPage.tsx` / `SecretariesPage.tsx` / `StaffPage.tsx` | patients-grid (جدول) + add patients (فرم) | الگو | | `DoctorsPage/ClinicsPage/UsersPage/RepresentationsPage/BlogsPage/CommentsPage/RatingsPage/ClaimsPage/PreRegistrationsPage/LogsPage/SettlementsPage/SubscriptionPage` و صفحات `*DetailPage`/`*FormPage` | جدول = `patients-grid` `5265:8540`، فرم = `add patients` `5287:32314`، جزئیات = `detail` `6020:22415` | الگو | | `CategoriesPage.tsx` | seetting (تب‌دار) | الگو | | `LoginPage.tsx` / `SelectContextPage.tsx` | — (اگر فریم auth در فیگما نبود، استایل مشترک) | الگو | > صفحات با تست (`BlogFormPage.test.tsx`, `BlogsPage.test.tsx`, `LoginPage.test.tsx`) — بعد از تغییر UI، تست‌ها را اجرا کن و اگر selectorها شکستند به‌روز کن. --- ## روش کار پیشنهادی (گام‌به‌گام و ایمن) 1. **بخش الف** را کامل کن (توکن + کامپوننت مشترک)، سپس با یک صفحه‌ی نمونه (Dashboard) صحت پایه را تأیید کن. 2. صفحات را **گروه‌به‌گروه** جلو ببر (اول «مستقیم»ها: dashboard → appointments → patients → payments → settings؛ بعد «الگو»ها). 3. برای هر صفحه: `get_screenshot` فریم فیگما → مقایسه با اجرای محلی → اصلاح. **رنگ/شعاع را در توکن‌های `styles.css` عوض کن، نه inline در کامپوننت** (مگر جایی که tauri هم inline دارد). 4. موبایل: bottom-sheet و منوی پایین را طبق فریم‌های `*-mobile` اضافه کن. ## نکات مهم - **فقط CSS/توکن/layout و JSX ظاهری؛ منطق داده/API/route را دست نزن.** هیچ فایل backend یا `docs/api/*` تغییر نمی‌کند. - MUI وارد نکن؛ Tailwind v4 + CSS variables را نگه‌دار. tauri فقط «مرجع ظاهری» است. - fallback مرورگر قدیمی (بلوک `@supports oklch`) را حفظ کن؛ sRGB و oklch را هماهنگ به‌روز کن. - بعد از هر گروه: `ddev exec yarn dev` (خطای native lightningcss داخل ddev بی‌ربط است؛ فقط JS/TS مهم) و `ddev exec npx tsc --noEmit`. تست‌ها: `ddev exec yarn test` یا vitest. - پایان کار: `graphify update .` در `clinicpro/`. - به‌خاطر بزرگی تسک، حتماً incremental commit بزن (هر گروه صفحه یک commit). ``` ## دستور اجرا ``` /run-prompt clinicpro/.claude/prompt/admin-ui-match-tauri.md ```