feat: update UI components to use CSS variables for dark mode compatibility

2026-06-15 14:50:45 +03:30
parent df7a784701
commit e95c5c12d1
8 changed files with 260 additions and 73 deletions
@@ -0,0 +1,186 @@
+# بازبینی کامل 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`** خطوط ۲۴-۳۴:
+```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 تبدیل شوند:
+```tsx
+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):
+```tsx
+// ❌ فعلی:
+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)'
+```
+خطوط ۷۵۱-۷۵۸ (بنر هوش مصنوعی):
+```tsx
+// ❌ فعلی: 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`** خطوط ۳۰-۴۳:
+```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)' }
+```
+خطوط ۲۰۸-۲۱۱ (بنر تریال):
+```tsx
+// ❌ 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):
+```tsx
+// ❌ 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`** خطوط ۲۱۴, ۳۰۹, ۳۲۴, ۳۳۹, ۳۷۳, ۳۸۸:
+```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`** خط ۱۹۳-۱۹۵:
+```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:
+```tsx
+// ❌ 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 موجود برای استفاده
+
+```css
+/* از 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
+
+```bash
+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