refactor(settings): unify settings sidebar across all pages

SettingsLayout rendered its own role-gated aside while the subscription page
rendered PurchaseSubscriptionSidebar, so /admin/subscription and other settings
pages (sms-wallet, ...) showed two different settings menus. Make SettingsLayout
render the shared PurchaseSubscriptionSidebar and have SubscriptionPage use
SettingsLayout too, so every settings page shows one identical menu. menuForRole
/ SETTINGS_MENU are kept for the mobile settings list (SettingsMenuPage).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

assets/admin/components/layout/SettingsLayout.test.tsx

@@ -9,15 +9,13 @@ beforeEach(() => {
 });
 
 describe('SettingsLayout', () => {
-  it('renders every menu item available to the role, plus the content', () => {
+  it('renders the shared settings sidebar and the content', () => {
     renderWithProviders(
       <SettingsLayout active="subscription">
         <div>محتوای اشتراک</div>
       </SettingsLayout>,
     );
-    for (const item of menuForRole('doctor')) {
+    expect(screen.getByText('خرید اشتراک')).toBeInTheDocument();
-      expect(screen.getByText(item.label)).toBeInTheDocument();
-    }
     expect(screen.getByText('محتوای اشتراک')).toBeInTheDocument();
   });
 
@@ -28,23 +26,18 @@ describe('SettingsLayout', () => {
     expect(active).toHaveAttribute('href', '/admin/subscription');
   });
 
-  it('renders every visible item as a navigable link', () => {
+  it('renders the tauri-sourced items as navigable links', () => {
     renderWithProviders(<SettingsLayout active="subscription"><div /></SettingsLayout>);
     expect(screen.getByText('مدیریت نوبت دهی').closest('a')).toHaveAttribute('href', '/admin/appointment-settings');
-    expect(screen.getByText('برچسب‌ها').closest('a')).toHaveAttribute('href', '/admin/tags-settings');
+    expect(screen.getByText('تگ ها').closest('a')).toHaveAttribute('href', '/admin/tags-settings');
-    expect(screen.queryByText('به‌زودی')).not.toBeInTheDocument();
+    // 'مدیریت پزشک' lives in the main nav, not the settings menu
+    expect(screen.queryByText('مدیریت پزشک')).not.toBeInTheDocument();
   });
 
-  it('hides role-specific items from other roles', () => {
+  it('shows the same menu to every role (ungated, mirroring tauri)', () => {
-    // doctor sees مدیریت پزشک but not مدیریت مطب (clinic-only)
+    // the desktop sidebar is not role-gated: مدیریت مطب shows even for a doctor
     renderWithProviders(<SettingsLayout active="subscription"><div /></SettingsLayout>);
-    expect(screen.getByText('مدیریت پزشک')).toBeInTheDocument();
+    expect(screen.getByText('مدیریت مطب')).toBeInTheDocument();
-    expect(screen.queryByText('مدیریت مطب')).not.toBeInTheDocument();
-
-    // clinic sees مدیریت مطب but not مدیریت پزشک / نوبت دهی
-    expect(menuForRole('clinic').map((i) => i.key)).toContain('clinic');
-    expect(menuForRole('clinic').map((i) => i.key)).not.toContain('doctor');
-    expect(menuForRole('clinic').map((i) => i.key)).not.toContain('appointment');
   });
 
   it('filters the menu by the search query', () => {
@@ -53,4 +46,11 @@ describe('SettingsLayout', () => {
     expect(screen.getByText('خرید اشتراک')).toBeInTheDocument();
     expect(screen.queryByText('خدمات')).not.toBeInTheDocument();
   });
+
+  it('menuForRole still role-gates the mobile settings list', () => {
+    // SettingsMenuPage (mobile) keeps using menuForRole / SETTINGS_MENU
+    expect(menuForRole('clinic').map((i) => i.key)).toContain('clinic');
+    expect(menuForRole('clinic').map((i) => i.key)).not.toContain('doctor');
+    expect(menuForRole('clinic').map((i) => i.key)).not.toContain('appointment');
+  });
 });

assets/admin/components/layout/SettingsLayout.tsx

@@ -1,16 +1,15 @@
-import React, { useMemo, useState } from 'react';
+import React from 'react';
-import { Link } from 'react-router-dom';
-import { useAuthStore } from '../../stores/authStore';
 import {
   CreditCardIcon, UserIcon, CalendarDaysIcon, BuildingOffice2Icon,
   WrenchScrewdriverIcon, BanknotesIcon, UsersIcon, ShieldCheckIcon,
-  TagIcon, ChatBubbleLeftRightIcon, UserCircleIcon, MagnifyingGlassIcon,
+  TagIcon, ChatBubbleLeftRightIcon, UserCircleIcon,
 } from '@heroicons/react/24/outline';
+import PurchaseSubscriptionSidebar from './PurchaseSubscriptionSidebar';
 
 // ── Settings menu configuration ─────────────────────────────────────────────
-// Single source of truth for the settings sub-navigation (desktop shell +
+// Source of truth for the *mobile* settings list (SettingsMenuPage). The desktop
-// mobile list). `to` = an existing admin route; items without `to` are not yet
+// shell renders the shared PurchaseSubscriptionSidebar instead, so there is a
-// implemented and render as disabled placeholders ("به‌زودی").
+// single settings sidebar across all settings pages (no duplicate menu).
 export type SettingsMenuItem = {
   key: string;
   label: string;
@@ -39,109 +38,20 @@ export function menuForRole(role: string | null | undefined): SettingsMenuItem[]
   return SETTINGS_MENU.filter((i) => !i.roles || (role != null && i.roles.includes(role)));
 }
 
-// ── Shared item styling ──────────────────────────────────────────────────────
-function itemStyle(active: boolean, disabled: boolean): React.CSSProperties {
-  return {
-    display: 'flex', alignItems: 'center', gap: 10,
-    width: '100%', padding: '11px 14px', borderRadius: 'var(--r-sm)',
-    fontSize: 14, fontWeight: active ? 700 : 500, textAlign: 'right',
-    fontFamily: 'inherit', border: 'none', cursor: disabled ? 'not-allowed' : 'pointer',
-    background: active ? 'var(--accent)' : 'transparent',
-    color: active ? '#fff' : disabled ? 'var(--text-3)' : 'var(--text-2)',
-    transition: 'background .14s, color .14s',
-  };
-}
-
-function MenuRow({ item, active }: { item: SettingsMenuItem; active: boolean }) {
-  const Icon = item.icon;
-  const disabled = !item.to;
-  const inner = (
-    <>
-      <Icon style={{ width: 18, height: 18, flexShrink: 0, opacity: disabled ? 0.6 : 1 }} />
-      <span style={{ flex: 1 }}>{item.label}</span>
-      {disabled && <span style={{ fontSize: 10.5, color: 'var(--text-3)' }}>به‌زودی</span>}
-    </>
-  );
-
-  if (disabled) {
-    return <button type="button" disabled style={itemStyle(false, true)}>{inner}</button>;
-  }
-  return (
-    <Link
-      to={item.to!}
-      aria-current={active ? 'page' : undefined}
-      style={itemStyle(active, false)}
-      onMouseEnter={(e) => { if (!active) (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
-      onMouseLeave={(e) => { if (!active) (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
-    >
-      {inner}
-    </Link>
-  );
-}
-
 /**
  * SettingsLayout — presentational shell for the doctor/clinic settings area.
- * Renders a right-hand settings sub-navigation menu (desktop) beside the page
+ * Renders the shared settings sidebar (PurchaseSubscriptionSidebar) beside the
- * content. On mobile the menu is hidden (the standalone settings list page owns
+ * page content, so every settings page shows the exact same menu as the
- * navigation) and the content spans full width.
+ * subscription page. Full-width so the sidebar sits flush against the main nav.
  *
- * @param active  key of the currently-open settings section (highlighted)
+ * @param active   key of the currently-open settings section (highlighted)
- * @param children  the section content (e.g. subscription plans)
+ * @param children the section content (e.g. subscription plans)
  */
 export default function SettingsLayout({ active, children }: { active: string; children: React.ReactNode }) {
-  const [query, setQuery] = useState('');
-  const primaryRole = useAuthStore((s) => s.primaryRole);
-  const items = useMemo(
-    () => menuForRole(primaryRole).filter((i) => i.label.includes(query.trim())),
-    [query, primaryRole],
-  );
-
   return (
-    <div className="fade-in" style={{ maxWidth: 1180, margin: '0 auto' }}>
+    <div className="fade-in" dir="rtl" style={{ width: '100%' }}>
-      <div className="grid grid-cols-1 lg:grid-cols-[260px_minmax(0,1fr)] gap-5">
+      <div className="grid grid-cols-1 lg:grid-cols-[248px_minmax(0,1fr)] gap-5">
-        {/* Settings sub-nav — desktop only */}
+        <PurchaseSubscriptionSidebar active={active} />
-        <aside
-          className="hidden lg:block"
-          aria-label="منوی تنظیمات"
-          style={{
-            background: 'var(--surface)', border: '1px solid var(--border)',
-            borderRadius: 'var(--r-lg)', padding: 14, alignSelf: 'start',
-            position: 'sticky', top: 'calc(var(--topbar-h) + 16px)',
-          }}
-        >
-          <h2 className="section-title" style={{ fontSize: 16, marginBottom: 12 }}>تنظیمات</h2>
-
-          <div style={{
-            display: 'flex', alignItems: 'center', gap: 8,
-            background: 'var(--surface-2)', border: '1px solid var(--border)',
-            borderRadius: 'var(--r-sm)', padding: '8px 12px', marginBottom: 12,
-          }}>
-            <MagnifyingGlassIcon style={{ width: 16, color: 'var(--text-3)', flexShrink: 0 }} />
-            <input
-              value={query}
-              onChange={(e) => setQuery(e.target.value)}
-              placeholder="جستجو در تنظیمات"
-              aria-label="جستجو در تنظیمات"
-              style={{
-                border: 'none', outline: 'none', background: 'transparent',
-                fontFamily: 'inherit', fontSize: 13, color: 'var(--text)', width: '100%',
-              }}
-            />
-          </div>
-
-          <nav style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
-            {items.map((item) => (
-              <MenuRow key={item.key} item={item} active={item.key === active} />
-            ))}
-            {items.length === 0 && (
-              <div style={{ padding: '12px 4px', fontSize: 13, color: 'var(--text-3)', textAlign: 'center' }}>
-                موردی یافت نشد
-              </div>
-            )}
-          </nav>
-        </aside>
-
-        {/* Section content */}
         <div style={{ minWidth: 0 }}>{children}</div>
       </div>
     </div>

assets/admin/pages/SubscriptionPage.tsx

@@ -9,7 +9,7 @@ import type { SubscriptionPlan, MySubscriptionData, SubscriptionPeriod } from '.
 import { usePaymentConfig } from '../hooks/usePaymentConfig';
 import { formatRial, formatNumber } from '../lib/utils';
 import Modal from '../components/ui/Modal';
-import PurchaseSubscriptionSidebar from '../components/layout/PurchaseSubscriptionSidebar';
+import SettingsLayout from '../components/layout/SettingsLayout';
 import {
   SparkleIcon, PlanCardPerson, CloseCircleFilled, GiftIcon, InfoCircleRedFilled,
 } from './subscriptionIcons';
@@ -116,10 +116,8 @@ export default function SubscriptionPage() {
   };
 
   return (
-    <div className="fade-in" dir="rtl" style={{ width: '100%' }}>
+    <>
-      <div className="grid grid-cols-1 lg:grid-cols-[248px_minmax(0,1fr)] gap-5">
+      <SettingsLayout active="subscription">
-        <PurchaseSubscriptionSidebar active="subscription" />
-
         <div
           style={{ background: 'var(--surface)', minWidth: 0 }}
           className="px-4 py-4 md:px-6 md:py-6 rounded-[var(--r-lg)]"
@@ -166,7 +164,7 @@ export default function SubscriptionPage() {
             )}
           </div>
         </div>
-      </div>
+      </SettingsLayout>
 
       {/* ── Payment modal (gateway selection) ── */}
       <Modal
@@ -264,7 +262,7 @@ export default function SubscriptionPage() {
           </div>
         )}
       </Modal>
-    </div>
+    </>
   );
 }