feat(settings): render doctor/clinic settings pages inside the settings shell

Wrap the existing settings-area pages — doctor profile (مدیریت پزشک),
insurance pricing (بیمه), payment report (پرداخت), SMS wallet (پیامک‌ها),
secretaries (منشی) and clinic info (مطب) — in SettingsLayout so they appear
under the settings sub-navigation like the Figma design, with the matching
menu item highlighted. Wire the doctor/clinic menu entries to their routes.

The نوبت‌دهی / برچسب‌ها / حساب کاربری entries stay as disabled placeholders
until they have their own pages/designs.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

assets/admin/components/layout/SettingsLayout.tsx

@@ -19,9 +19,9 @@ export type SettingsMenuItem = {
 
 export const SETTINGS_MENU: SettingsMenuItem[] = [
   { key: 'subscription', label: 'خرید اشتراک',       icon: CreditCardIcon,           to: '/admin/subscription' },
-  { key: 'doctor',       label: 'مدیریت پزشک',        icon: UserIcon },
+  { key: 'doctor',       label: 'مدیریت پزشک',        icon: UserIcon,                 to: '/admin/profile' },
   { key: 'appointment',  label: 'مدیریت نوبت دهی',    icon: CalendarDaysIcon },
-  { key: 'clinic',       label: 'مدیریت مطب',         icon: BuildingOffice2Icon },
+  { key: 'clinic',       label: 'مدیریت مطب',         icon: BuildingOffice2Icon,      to: '/admin/my-clinic' },
   { key: 'services',     label: 'خدمات',              icon: WrenchScrewdriverIcon,    to: '/admin/clinic-services' },
   { key: 'payment',      label: 'مدیریت پرداخت',      icon: BanknotesIcon,            to: '/admin/my-financial' },
   { key: 'secretary',    label: 'مدیریت منشی',        icon: UsersIcon,                to: '/admin/my-secretaries' },

assets/admin/pages/DoctorProfilePage.tsx

@@ -1,5 +1,11 @@
 import DoctorDetailPage from './DoctorDetailPage';
+import SettingsLayout from '../components/layout/SettingsLayout';
 
+/** Doctor's own profile — the "مدیریت پزشک" section of the settings shell. */
 export default function DoctorProfilePage() {
-  return <DoctorDetailPage isOwnProfile />;
+  return (
+    <SettingsLayout active="doctor">
+      <DoctorDetailPage isOwnProfile />
+    </SettingsLayout>
+  );
 }

assets/admin/pages/InsurancePricingPage.tsx

@@ -2,9 +2,11 @@ import PageHeader from '../components/ui/PageHeader';
 import TenantInsuranceContracts from '../components/TenantInsuranceContracts';
 import FreeVisitPrice from '../components/FreeVisitPrice';
 import FeatureGate from '../components/ui/FeatureGate';
+import SettingsLayout from '../components/layout/SettingsLayout';
 
 export default function InsurancePricingPage() {
   return (
+    <SettingsLayout active="insurance">
     <FeatureGate feature="insurance">
       <div className="fade-in">
         <PageHeader
@@ -15,5 +17,6 @@ export default function InsurancePricingPage() {
         <TenantInsuranceContracts />
       </div>
     </FeatureGate>
+    </SettingsLayout>
   );
 }

assets/admin/pages/MyClinicPage.tsx

@@ -1,8 +1,9 @@
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useAuthStore } from '../stores/authStore';
+import SettingsLayout from '../components/layout/SettingsLayout';
 
-export default function MyClinicPage() {
+function MyClinicPageContent() {
   const { dbUuid, fetchMe } = useAuthStore();
   const navigate = useNavigate();
 
@@ -23,3 +24,11 @@ export default function MyClinicPage() {
     </div>
   );
 }
+
+export default function MyClinicPage() {
+  return (
+    <SettingsLayout active="clinic">
+      <MyClinicPageContent />
+    </SettingsLayout>
+  );
+}

assets/admin/pages/MyFinancialPage.test.tsx

@@ -0,0 +1,32 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { screen } from '@testing-library/react';
+import { renderWithProviders } from '../test/utils';
+
+vi.mock('sonner', () => ({ toast: { success: vi.fn(), error: vi.fn() } }));
+vi.mock('../lib/api', () => ({
+  api: { get: vi.fn(), post: vi.fn(), patch: vi.fn(), put: vi.fn(), delete: vi.fn() },
+  ApiError: class extends Error {},
+}));
+
+import { api } from '../lib/api';
+import MyFinancialPage from './MyFinancialPage';
+
+const get = api.get as ReturnType<typeof vi.fn>;
+
+beforeEach(() => {
+  get.mockReset();
+  get.mockResolvedValue({ success: true, data: {
+    total_paid: 0, total_pending: 0, monthly_chart: [],
+  } });
+});
+
+describe('MyFinancialPage inside the settings shell', () => {
+  it('renders the settings sub-nav around the page content', async () => {
+    renderWithProviders(<MyFinancialPage />, { route: '/admin/my-financial' });
+    // settings shell menu
+    expect(await screen.findByText('خرید اشتراک')).toBeInTheDocument();
+    expect(screen.getByText('خدمات')).toBeInTheDocument();
+    // page's own content
+    expect(screen.getByText('گزارش مالی')).toBeInTheDocument();
+  });
+});

assets/admin/pages/MyFinancialPage.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import SettingsLayout from '../components/layout/SettingsLayout';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
@@ -30,7 +31,7 @@ function KpiCard({ label, value, color }: { label: string; value: string; color:
 
 const BAR_MAX_HEIGHT = 120;
 
-export default function MyFinancialPage() {
+function MyFinancialPageContent() {
   const { data, isLoading } = useQuery<ApiResponse<FinancialSummary>>({
     queryKey: ['my-financial-summary'],
     queryFn: () => api.get('/api/v1/my/financial-summary'),
@@ -81,3 +82,11 @@ export default function MyFinancialPage() {
     </div>
   );
 }
+
+export default function MyFinancialPage() {
+  return (
+    <SettingsLayout active="payment">
+      <MyFinancialPageContent />
+    </SettingsLayout>
+  );
+}

assets/admin/pages/MySecretariesPage.tsx

@@ -9,6 +9,7 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { useState } from "react";
+import SettingsLayout from "../components/layout/SettingsLayout";
 import { useForm } from "react-hook-form";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
@@ -257,7 +258,7 @@ interface ClinicDoctor {
 
 // ── Main component ─────────────────────────────────────────────────────────
 
-export default function MySecretariesPage() {
+function MySecretariesPageContent() {
     const qc = useQueryClient();
     const { doctorUuid, dbUuid, primaryRole } = useAuthStore();
 
@@ -785,3 +786,11 @@ export default function MySecretariesPage() {
         </>
     );
 }
+
+export default function MySecretariesPage() {
+    return (
+        <SettingsLayout active="secretary">
+            <MySecretariesPageContent />
+        </SettingsLayout>
+    );
+}

assets/admin/pages/SettingsMenuPage.test.tsx

@@ -17,6 +17,6 @@ describe('SettingsMenuPage', () => {
     // implemented → anchor with href
     expect(screen.getByText('خرید اشتراک').closest('a')).toHaveAttribute('href', '/admin/subscription');
     // not implemented → disabled button
-    expect(screen.getByText('مدیریت پزشک').closest('button')).toBeDisabled();
+    expect(screen.getByText('مدیریت نوبت دهی').closest('button')).toBeDisabled();
   });
 });

assets/admin/pages/SmsWalletPage.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
+import SettingsLayout from '../components/layout/SettingsLayout';
 import { z } from 'zod';
 import { toast } from 'sonner';
 import {
@@ -565,8 +566,10 @@ function SmsWalletPageInner() {
 
 export default function SmsWalletPage() {
   return (
-    <FeatureGate feature="sms_panel">
+    <SettingsLayout active="sms">
-      <SmsWalletPageInner />
+      <FeatureGate feature="sms_panel">
-    </FeatureGate>
+        <SmsWalletPageInner />
+      </FeatureGate>
+    </SettingsLayout>
   );
 }