hamedandClaude Opus 4.8
0bd18d74b7
Add accent (orange) + pastel stat-card tokens (light/dark), button accent/outline/lg/block variants, and a pastel StatCard primitive, aligning the admin design system with the clinic-pro-tauri reference. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
116 lines
10 KiB
Markdown
116 lines
10 KiB
Markdown
# بازطراحی پنل ادمین بر اساس 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/` نیست.
|
||
- خروجی باید **یکدستی کامل** باشد: همهی دکمهها/فیلدها/مودالها/بَجها در همهی صفحات از کیت واحد بیایند.
|