feat(settings): implement grouped menu structure and update related components

assets/admin/pages/PracticeDomainSettingsPage.test.tsx

@@ -0,0 +1,60 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { screen } from '@testing-library/react';
+import { renderWithProviders } from '../test/utils';
+import PracticeDomainSettingsPage from './PracticeDomainSettingsPage';
+import { useAuthStore } from '../stores/authStore';
+import { api } from '../lib/api';
+
+const DOMAINS = [
+  { uuid: 'd-1', name: 'دندانپزشکی', has_workflow: true },
+  { uuid: 'd-2', name: 'کلینیک زیبایی', has_workflow: false },
+];
+
+beforeEach(() => {
+  useAuthStore.setState({
+    primaryRole: 'clinic',
+    context: { scope: 'clinic', db_uuid: 'clinic-1' } as never,
+  });
+
+  vi.spyOn(api, 'get').mockImplementation(async (path: string) => {
+    if (path.startsWith('/api/v1/practice-domains')) return { data: DOMAINS } as never;
+    return { data: { data: { practice_domain: DOMAINS[1] } } } as never;
+  });
+});
+
+describe('PracticeDomainSettingsPage', () => {
+  /**
+   * این صفحه تنها عضو منوی تنظیمات بود که پوستهٔ تنظیمات را نداشت: کاربر برای رفتن
+   * به بخش بعدی مجبور بود «بازگشت» بزند.
+   */
+  it('داخل پوستهٔ تنظیمات رندر می‌شود و منوی تنظیمات را نشان می‌دهد', async () => {
+    renderWithProviders(<PracticeDomainSettingsPage />);
+
+    expect(await screen.findByLabelText('منوی تنظیمات')).toBeInTheDocument();
+  });
+
+  it('همین آیتم در منو فعال است', async () => {
+    renderWithProviders(<PracticeDomainSettingsPage />);
+
+    // عنوان صفحه هم همین متن را دارد، پس آیتم منو با نقش link گرفته می‌شود.
+    const active = await screen.findByRole('link', { name: 'حوزهٔ فعالیت' });
+
+    expect(active).toHaveAttribute('aria-current', 'page');
+    expect(active).toHaveAttribute('href', '/admin/settings/practice-domain');
+  });
+
+  it('عنوان صفحه یک بار می‌آید، نه هم در هدر هم در کارت', async () => {
+    renderWithProviders(<PracticeDomainSettingsPage />);
+
+    expect(await screen.findByRole('heading', { name: 'حوزهٔ فعالیت' })).toBeInTheDocument();
+    expect(screen.getAllByRole('heading', { name: 'حوزهٔ فعالیت' })).toHaveLength(1);
+  });
+
+  it('حوزهٔ بدون فرآیند، هشدارش را نشان می‌دهد', async () => {
+    renderWithProviders(<PracticeDomainSettingsPage />);
+
+    expect(
+      await screen.findByText(/برای این حوزه هنوز فرآیند اختصاصی تعریف نشده است/),
+    ).toBeInTheDocument();
+  });
+});

assets/admin/pages/PracticeDomainSettingsPage.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { toast } from 'sonner';
 import { api, ApiError, type ApiResponse } from '../lib/api';
-import PageHeader from '../components/ui/PageHeader';
+import SettingsLayout from '../components/layout/SettingsLayout';
 import SearchableSelect from '../components/ui/SearchableSelect';
 import { useAuthStore } from '../stores/authStore';
 import type { PracticeDomain } from '../types';
@@ -55,10 +55,12 @@ export default function PracticeDomainSettingsPage() {
   const chosen  = domains.find((d) => d.uuid === selected) ?? null;
 
   return (
-    <>
-      <PageHeader title="حوزهٔ فعالیت" backTo="/admin/settings" />
-
+    // پوستهٔ تنظیمات، مثل بقیهٔ صفحات همین منو. بدون آن، این صفحه تنها صفحه‌ای بود که
+    // منوی تنظیمات را نشان نمی‌داد و کاربر برای رفتن به بخش بعدی باید «بازگشت» می‌زد.
+    <SettingsLayout active="practice-domain">
       <div className="card card-pad" style={{ display: 'grid', gap: 14, maxWidth: 560 }}>
+        <h1 className="section-title" style={{ margin: 0 }}>حوزهٔ فعالیت</h1>
+
         <p style={{ margin: 0, fontSize: 12.5, color: 'var(--text-3)', lineHeight: 1.9 }}>
           حوزهٔ فعالیت تعیین می‌کند سیستم چه فرآیند درمانی برای کلینیک شما اجرا کند. این با
           «تخصص» فرق دارد: تخصص برچسبی است که در سایت عمومی دیده می‌شود، این یک تنظیم است.
@@ -96,6 +98,6 @@ export default function PracticeDomainSettingsPage() {
           </>
         )}
       </div>
-    </>
+    </SettingsLayout>
   );
 }

assets/admin/pages/SettingsMenuPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router';
 import { ChevronLeftIcon } from '@heroicons/react/24/outline';
-import { menuForRole } from '../components/layout/SettingsLayout';
+import { groupedMenuForRole } from '../components/layout/settingsMenu';
 import { useAuthStore } from '../stores/authStore';
 import { usePermissions } from '../hooks/usePermissions';
 
@@ -10,58 +10,72 @@ import { usePermissions } from '../hooks/usePermissions';
  * A full-width tappable list of the settings sections available to the current
  * role (mobile-first, matches the Figma mobile design). Each section links to
  * its route; on desktop the same sections render the shell via SettingsLayout.
+ *
+ * روی موبایل کل این فهرست بالای محتوا می‌نشیند، پس ۱۶ ردیفِ یکدست یعنی اسکرول
+ * طولانیِ بی‌نشانه. دسته‌ها همان دسته‌های سایدبار دسکتاپ‌اند (`settingsMenu.ts`).
  */
 export default function SettingsMenuPage() {
   const primaryRole = useAuthStore((s) => s.primaryRole);
   const scope = useAuthStore((s) => s.context?.scope);
   const { can } = usePermissions();
-  const items = menuForRole(primaryRole, can, scope);
+  const groups = groupedMenuForRole(primaryRole, can, scope);
 
   return (
     <div className="fade-in" style={{ maxWidth: 720, margin: '0 auto' }}>
       <h1 className="section-title" style={{ marginBottom: 16 }}>تنظیمات</h1>
 
-      <div style={{
-        background: 'var(--surface)', border: '1px solid var(--border)',
-        borderRadius: 'var(--r-lg)', overflow: 'hidden',
-      }}>
-        {items.map((item, idx) => {
-          const Icon = item.icon;
-          const disabled = !item.to;
-          const rowStyle: React.CSSProperties = {
-            display: 'flex', alignItems: 'center', gap: 12,
-            padding: '16px 18px', fontSize: 15, fontFamily: 'inherit',
-            borderTop: idx === 0 ? 'none' : '1px solid var(--border)',
-            color: disabled ? 'var(--text-3)' : 'var(--text)',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            background: 'transparent', width: '100%', textAlign: 'right',
-          };
-          const inner = (
-            <>
-              <Icon style={{ width: 20, height: 20, flexShrink: 0, color: disabled ? 'var(--text-3)' : 'var(--primary)' }} />
-              <span style={{ flex: 1, fontWeight: 600 }}>{item.label}</span>
-              {disabled
-                ? <span style={{ fontSize: 11, color: 'var(--text-3)' }}>به‌زودی</span>
-                : <ChevronLeftIcon style={{ width: 18, color: 'var(--text-3)', flexShrink: 0 }} />}
-            </>
-          );
-          return disabled ? (
-            <button key={item.key} type="button" disabled style={{ ...rowStyle, border: 'none', borderTop: rowStyle.borderTop }}>
-              {inner}
-            </button>
-          ) : (
-            <Link
-              key={item.key}
-              to={item.to!}
-              style={rowStyle}
-              onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
-              onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
-            >
-              {inner}
-            </Link>
-          );
-        })}
-      </div>
+      {groups.map((group) => (
+        <section key={group.key} aria-label={group.label} style={{ marginBottom: 20 }}>
+          <h2 style={{
+            fontSize: 13, fontWeight: 700, color: 'var(--text-3)',
+            marginBottom: 8, paddingInlineStart: 4,
+          }}>
+            {group.label}
+          </h2>
+
+          <div style={{
+            background: 'var(--surface)', border: '1px solid var(--border)',
+            borderRadius: 'var(--r-lg)', overflow: 'hidden',
+          }}>
+            {group.items.map((item, idx) => {
+              const Icon = item.icon;
+              const disabled = !item.to;
+              const rowStyle: React.CSSProperties = {
+                display: 'flex', alignItems: 'center', gap: 12,
+                padding: '16px 18px', fontSize: 15, fontFamily: 'inherit',
+                borderTop: idx === 0 ? 'none' : '1px solid var(--border)',
+                color: disabled ? 'var(--text-3)' : 'var(--text)',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                background: 'transparent', width: '100%', textAlign: 'right',
+              };
+              const inner = (
+                <>
+                  <Icon style={{ width: 20, height: 20, flexShrink: 0, color: disabled ? 'var(--text-3)' : 'var(--primary)' }} />
+                  <span style={{ flex: 1, fontWeight: 600 }}>{item.label}</span>
+                  {disabled
+                    ? <span style={{ fontSize: 11, color: 'var(--text-3)' }}>به‌زودی</span>
+                    : <ChevronLeftIcon style={{ width: 18, color: 'var(--text-3)', flexShrink: 0 }} />}
+                </>
+              );
+              return disabled ? (
+                <button key={item.key} type="button" disabled style={{ ...rowStyle, border: 'none', borderTop: rowStyle.borderTop }}>
+                  {inner}
+                </button>
+              ) : (
+                <Link
+                  key={item.key}
+                  to={item.to!}
+                  style={rowStyle}
+                  onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
+                  onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
+                >
+                  {inner}
+                </Link>
+              );
+            })}
+          </div>
+        </section>
+      ))}
     </div>
   );
 }