clinicpro/.claude/prompt/new-visit-modal-ux.md

بازطراحی UI/UX مودال «ثبت مراجعه جدید»

پروژه

clinicpro (admin frontend)

زمینه

مودال «ثبت مراجعه جدید» در صفحه‌ی پرونده بیمار، UX ضعیفی دارد: فیلدها بدون گروه‌بندی، label و input بدون فاصله‌ی منطقی، بخش خدمات و خلاصه‌ی قیمت بی‌سازمان، و ارتباط بین «قیمت ویزیت / تخفیف بیمه پایه / تخفیف مکمل» با بیمه‌ی واقعی بیمار مشخص نیست. (تصویر فعلی توسط کاربر ارائه شده.)

مشکل / هدف

بازطراحی مودال با اصول UI/UX حرفه‌ای:

• گروه‌بندی منطقی: «بیمه و مبلغ» / «خدمات» / «پرداخت و یادداشت» / «خلاصه»
• انتخاب بیمه‌ی پایه و مکمل به‌صورت select (از بیمه‌های entity)، و پرکردن خودکار قیمت ویزیت و تخفیف/سهم بر اساس قیمت‌گذاری بیمه‌ی پروفایل (خروجی پرامپت insurance-visit-pricing.md)
• نمایش زنده‌ی محاسبه: آزاد → با بیمه پایه → با بیمه مکمل → مبلغ نهایی
• واحد پول یکدست (تومان یا ریال — یکی، نه مخلوط؛ الان «ریال» در ورودی و «تومان» در خلاصه مخلوط است)
• فاصله‌گذاری، عنوان بخش‌ها، حالت‌های loading/disabled درست

فایل‌های مرتبط

فایل	نقش
assets/admin/pages/MyPatientsPage.tsx	مودال sessionModal (حدود خط ۸۰۹ به بعد) و handleSubmitSession
assets/admin/components/ui/Modal.tsx	کامپوننت مودال (props: size = sm/md/lg/xl)
assets/admin/components/ui/SearchableSelect.tsx	select قابل‌جستجو (برای بیمه/خدمات)
assets/admin/lib/utils.ts	formatRial, formatNumber
src/Patient/Controller/PatientController.php	endpoint POST /api/v1/patient/{uuid}/session
src/Patient/Service/PatientService.php	محاسبه‌ی نهایی سمت سرور

وضعیت فعلی

• اسکیمای فرم:

const sessionSchema = z.object({
    visit_price_rials: z.coerce.number().min(0),
    base_insurance_discount_percent: z.coerce.number().min(0).max(100),
    supplementary_discount_percent: z.coerce.number().min(0).max(100),
    payment_method: z.enum(["cash", "card", "insurance", "online", "pending"]),
    notes: z.string().optional(),
});

• محاسبه‌ی قیمت سمت کلاینت:

function calcFinalPrice(visitPrice, baseDiscount, suppDiscount, servicesTotal) {
    const afterBase = visitPrice * (1 - baseDiscount / 100);
    const afterSupp = afterBase * (1 - suppDiscount / 100);
    return Math.round(afterSupp) + servicesTotal;
}

• خلاصه‌ی پایین مودال «جمع خدمات» و «مبلغ نهایی» را با «تومان» نشان می‌دهد ولی ورودی‌ها «ریال» هستند — ناهماهنگ.
• backend (PatientService::createSession) همین فیلدها + insurance_base_id / insurance_supplementary_id را می‌پذیرد (موجودیت PatientSession این دو ستون را دارد) اما فرم فعلی آن‌ها را ارسال نمی‌کند.

وظایف

۱. ساختار بصری مودال

مودال را به بخش‌های واضح با عنوان تقسیم کن (می‌توانی size="lg" بدهی):

1. بیمه و مبلغ ویزیت: select بیمه‌ی پایه + select بیمه‌ی مکمل + قیمت ویزیت + تخفیف/سهم
2. خدمات: انتخاب بخش/سرویس + chipهای انتخاب‌شده (الگوی فعلی، فقط منظم‌تر)
3. پرداخت و یادداشت: روش پرداخت + یادداشت
4. خلاصه: آزاد / با بیمه پایه / با بیمه مکمل / جمع خدمات / مبلغ نهایی

۲. اتصال بیمه به قیمت‌گذاری پروفایل

• بیمه‌های entity و قیمت‌گذاری را از endpoint پرامپت insurance-visit-pricing.md (GET /api/v1/insurance-pricing) بگیر.
• با انتخاب بیمه‌ی پایه/مکمل، قیمت ویزیت آزاد و سهم بیمار خودکار پر شود (کاربر بتواند دستی override کند).
• insurance_base_id و insurance_supplementary_id را در body ارسال کن (backend از قبل پشتیبانی می‌کند).

۳. واحد پول یکدست

همه‌جا یک واحد. توصیه: نمایش به تومان با formatRial اگر این util تومان می‌دهد را بررسی کن؛ ورودی و خلاصه باید یکی باشند.

۴. تست

ddev exec npx tsc --noEmit و ddev exec yarn dev؛ بدون خطا.

نکات مهم

• وابسته به insurance-visit-pricing.md؛ اگر آن endpoint هنوز نیست، حداقل ساختار UI و select بیمه‌ها از GET /api/v1/insurances را پیاده کن و auto-fill را با TODO علامت بزن.
• فرم با React Hook Form + Zod؛ server state با TanStack Query.
• از کامپوننت‌های ui/ موجود استفاده کن؛ کتابخانه‌ی CSS جدید اضافه نکن؛ RTL.
• این تغییر صرفاً frontend است؛ تغییر API لازم نیست (مگر اینکه فیلد بیمه‌ی session در پاسخ کم باشد).