hamedandClaude Opus 4.8
9023ecc36f
Set primary to tauri purple, bg #fafafa/#1f1d2b, dark surface #222433, text #D7D8ED/#A1A1A1. Sync sRGB fallbacks and @supports oklch block. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
180 lines
14 KiB
Markdown
180 lines
14 KiB
Markdown
# همسانسازی کامل 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"` روی `<html>` (در `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
|
||
```
|