clinicpro/.claude/prompt/ui-darkmode-polish.md

بازبینی کامل UI/UX و رفع مشکلات دارک مود

زمینه

پنل ادمین ClinicPro دارای سیستم دارک مود بر اساس [data-theme="dark"] است که CSS variableهای --surface, --text, --border و غیره را تغییر می‌دهد. اما بسیاری از کامپوننت‌ها و صفحات با رنگ‌های hardcoded hex (#fef9c3, #eff6ff, #fee2e2, #f1f5f9 و ...) نوشته شده‌اند که در دارک مود کاملاً اشتباه نمایش می‌دهند — روشن و بی‌هماهنگ با بقیه UI. همچنین برخی UX مشکلات در چند صفحه وجود دارد.

مشکلات شناسایی‌شده

۱. دارک مود — رنگ‌های hardcoded (بحرانی)

فایل: assets/admin/pages/AppointmentsPage.tsx خطوط ۲۴-۳۴:

const STATUS_META = {
  pending:   { label: 'رزرو شده', color: '#3b82f6', bg: '#eff6ff' },  // ❌ hardcoded
  confirmed: { label: 'تأیید شده', color: '#22c55e', bg: '#f0fdf4' }, // ❌ hardcoded
  completed: { label: 'تکمیل شده', color: '#16a34a', bg: '#dcfce7' }, // ❌ hardcoded
  cancelled_by_doctor: { label: 'لغو پزشک', color: '#ef4444', bg: '#fef2f2' }, // ❌
  cancelled_by_user: { label: 'لغو بیمار', color: '#ef4444', bg: '#fef2f2' },  // ❌
  no_show: { label: 'غیبت', color: '#9ca3af', bg: '#f9fafb' },  // ❌
  expired:  { label: 'منقضی', color: '#9ca3af', bg: '#f9fafb' }, // ❌
};

باید به CSS variables تبدیل شوند:

const STATUS_META = {
  pending:   { label: 'رزرو شده',   color: 'var(--info)',    bg: 'var(--info-bg)' },
  confirmed: { label: 'تأیید شده',  color: 'var(--success)', bg: 'var(--success-bg)' },
  completed: { label: 'تکمیل شده',  color: 'var(--success)', bg: 'var(--success-bg)' },
  cancelled_by_doctor: { label: 'لغو پزشک', color: 'var(--danger)', bg: 'var(--danger-bg)' },
  cancelled_by_user:   { label: 'لغو بیمار', color: 'var(--danger)', bg: 'var(--danger-bg)' },
  no_show: { label: 'غیبت',   color: 'var(--text-3)', bg: 'var(--surface-2)' },
  expired:  { label: 'منقضی', color: 'var(--text-3)', bg: 'var(--surface-2)' },
};

همچنین خطوط ۲۷۸-۳۵۶ (slot‌های خالی و slot booking):

// ❌ فعلی:
border: '1px dashed #d1d5db', color: '#6b7280'
color: '#374151', color: '#9ca3af', background: '#f9fafb'
color: '#3b82f6', background: '#eff6ff'
// ✅ باید:
border: '1px dashed var(--border-2)', color: 'var(--text-3)'
color: 'var(--text)', color: 'var(--text-3)', background: 'var(--surface-2)'
color: 'var(--info)', background: 'var(--info-bg)'

خطوط ۷۵۱-۷۵۸ (بنر هوش مصنوعی):

// ❌ فعلی: background: '#eff6ff', border: '1px solid #bfdbfe', color: '#1d4ed8'
// ✅ باید: background: 'var(--info-bg)', border: '1px solid var(--info)', color: 'var(--info)'

فایل: assets/admin/pages/SubscriptionPage.tsx خطوط ۳۰-۴۳:

// ❌ PLAN_META hardcoded colors که در dark mode اشتباهند:
free:         { color: '#64748b', bg: '#f1f5f9', border: '#cbd5e1' }
basic:        { color: '#2563eb', bg: '#eff6ff', border: '#93c5fd' }
professional: { color: '#7c3aed', bg: '#f5f3ff', border: '#c4b5fd' }
// ✅ باید bg/border از CSS variables باشند:
free:         { color: 'var(--text-2)',  bg: 'var(--surface-2)',  border: 'var(--border)' }
basic:        { color: 'var(--info)',    bg: 'var(--info-bg)',    border: 'color-mix(in oklch, var(--info) 40%, transparent)' }
professional: { color: 'var(--violet)', bg: 'var(--violet-bg)',  border: 'color-mix(in oklch, var(--violet) 40%, transparent)' }

خطوط ۲۰۸-۲۱۱ (بنر تریال):

// ❌ background: 'linear-gradient(135deg, #eff6ff, #f5f3ff)', border: '1.5px dashed #93c5fd'
// ✅ background: 'linear-gradient(135deg, var(--info-bg), var(--violet-bg))', border: '1.5px dashed color-mix(in oklch, var(--info) 50%, transparent)'

خطوط ۳۰۸-۳۱۱ و ۵۲۱-۵۲۴ (بنر زرد test mode):

// ❌ background: '#fef9c3', border: '1px solid #fbbf24', color: '#92400e'
// ✅ background: 'var(--warning-bg)', border: '1px solid var(--warning)', color: 'var(--warning)'

فایل: assets/admin/pages/SettingsPage.tsx خطوط ۲۱۴, ۳۰۹, ۳۲۴, ۳۳۹, ۳۷۳, ۳۸۸:

// ❌ فعلی:
background: '#fef3c7', color: '#d97706'    // ico warning
background: '#fff'                          // toggle thumb — در dark mode نامرئی
background: '#6366f1'                       // dot بنفش
background: '#10b981'                       // dot سبز
background: '#ede9fe', color: '#7c3aed'    // ico violet
// ✅ باید:
background: 'var(--warning-bg)', color: 'var(--warning)'
background: 'var(--surface)'
background: 'var(--violet)'
background: 'var(--success)'
background: 'var(--violet-bg)', color: 'var(--violet)'

فایل: assets/admin/pages/LoginPage.tsx خط ۱۹۳-۱۹۵:

// ❌ background: '#fee2e2', border: '1px solid #fca5a5', color: '#dc2626'
// ✅ background: 'var(--danger-bg)', border: '1px solid var(--danger)', color: 'var(--danger)'

فایل: assets/admin/pages/SmsWalletPage.tsx — وضعیت‌های pending/approved/rejected:

// ❌ hardcoded: '#fef9c3', '#fbbf24', '#dcfce7', '#86efac', '#fee2e2', '#fca5a5'
// ✅ باید: var(--warning-bg)/var(--warning), var(--success-bg)/var(--success), var(--danger-bg)/var(--danger)

۲. UX مشکلات شناسایی‌شده

AppointmentsPage.tsx — نمای schedule:

• slot‌های خالی hover state وجود ندارد
• زمان slot در دارک مود ناخوانا است

SubscriptionPage.tsx — plan cards:

• در موبایل grid یک‌ستونه نمی‌شود (باید auto-fit, minmax(260px, 1fr) باشد)
• دکمه downgrade disabled ظاهر مناسب ندارد

SmsWalletPage.tsx — کارت‌های آمار بالا:

• در صفحه کوچک ۳ ستون خیلی تنگ می‌شود — باید responsive باشد

SettingsPage.tsx — toggle سوئیچ:

• در دارک مود thumb سفید روی پس‌زمینه تیره ناپدید می‌شود

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

فایل	مشکل
assets/admin/pages/AppointmentsPage.tsx	STATUS_META hardcoded + slot colors + AI banner
assets/admin/pages/SubscriptionPage.tsx	PLAN_META hardcoded + trial banner + test mode banner + downgrade banner
assets/admin/pages/SettingsPage.tsx	ico backgrounds + toggle thumb + indicator dots
assets/admin/pages/LoginPage.tsx	error box hardcoded red
assets/admin/pages/SmsWalletPage.tsx	status banners (pending/approved/rejected) + stats grid responsive
assets/admin/styles.css	بررسی --primary-subtle اگر وجود ندارد اضافه کن

CSS Variables موجود برای استفاده

/* از styles.css — همه در light و dark تعریف شده‌اند */
--surface, --surface-2, --surface-3
--border, --border-2
--text, --text-2, --text-3
--primary, --primary-600, --primary-700, --primary-soft, --primary-soft2
--success, --success-bg
--warning, --warning-bg
--danger, --danger-bg
--info, --info-bg
--violet, --violet-bg

وظایف

۱. رفع دارک مود — AppointmentsPage.tsx

• STATUS_META را به CSS variables تبدیل کن
• رنگ‌های slot (خالی و booking) را به CSS variables تبدیل کن
• بنر آبی AI را به var(--info-bg) / var(--info) تبدیل کن

۲. رفع دارک مود — SubscriptionPage.tsx

• PLAN_META رنگ‌های bg و border را به CSS variables تبدیل کن
• بنر تریال و بنر downgrade را با CSS variables بنویس
• بنر test mode (زرد) را با var(--warning-bg) / var(--warning) بنویس

۳. رفع دارک مود — SettingsPage.tsx

• ico ها را به var(--warning-bg)/var(--violet-bg) تبدیل کن
• toggle thumb را به var(--surface) تبدیل کن
• indicator dot‌ها را به var(--violet) / var(--success) تبدیل کن

۴. رفع دارک مود — LoginPage.tsx

• error box را به var(--danger-bg) / var(--danger) تبدیل کن

۵. رفع دارک مود — SmsWalletPage.tsx

• بنرهای وضعیت pending/approved/rejected را به CSS variables تبدیل کن
• stats grid را با grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) responsive کن

۶. بررسی و build

ddev exec yarn dev

نکات مهم

• هرگز رنگ‌های hex مستقیم در style={} ننویس — همیشه از CSS variables استفاده کن
• رنگ‌های برند plan (آبی basic، بنفش professional) می‌توانند hardcoded بمانند چون brand identity هستند — فقط bg و border باید از variables باشند
• var(--primary-subtle) اگر در styles.css وجود ندارد، از var(--primary-soft) یا color-mix(in oklch, var(--primary) 12%, var(--surface)) استفاده کن
• rgba(255,255,255,X) در gradient کارت موجودی کیف پول قابل قبول است چون روی gradient رنگی است
• بعد از هر فایل، build بگیر تا TypeScript error نداشته باشیم
• هیچ API یا backend تغییر نمی‌کند — فقط فایل‌های frontend