Add tests and implementation for ServiceDetailPage and PriceInput components

- Implement PriceInput component tests to validate Persian and Arabic numeral handling, input formatting, and controlled behavior.
- Create ServiceDetailPage component with detailed service information, including pricing, insurance coverage, and editing capabilities.
- Add API tests for service item detail retrieval and coverage synchronization with insurance contracts.
- Ensure proper error handling and user feedback for service item retrieval and coverage management.

assets/admin/pages/ClinicAppointmentSettingsPage.tsx

@@ -38,6 +38,7 @@ function ClinicAppointmentSettingsContent() {
   }, [doctorsQ.data]);
 
   const selected = activeUuid ?? doctorList[0]?.uuid ?? null;
+  const selectedDoctor = doctorList.find(d => d.uuid === selected) ?? null;
 
   if (!clinicUuid) {
     return (
@@ -54,7 +55,9 @@ function ClinicAppointmentSettingsContent() {
       <div className="card-title-row">
         <div>
           <h1 className="section-title">مدیریت نوبت دهی</h1>
-          <div className="muted">تنظیمات نوبت‌دهی پزشکان کلینیک</div>
+          <div className="muted">
+            {selectedDoctor ? `تنظیمات نوبت‌دهی ${selectedDoctor.name}` : 'تنظیمات نوبت‌دهی پزشکان کلینیک'}
+          </div>
         </div>
       </div>
 
@@ -88,6 +91,14 @@ function ClinicAppointmentSettingsContent() {
           {/* key اجباری است: بدون آن state ویرایشِ برنامه بین پزشکان نشت می‌کند */}
           {selected && (
             <div key={selected}>
+              {/* نام پزشک انتخاب‌شده، تا هنگام اسکرول هم مشخص باشد تنظیمات مربوط به کیست */}
+              <div
+                className="card card-pad"
+                style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 'var(--gap)' }}
+              >
+                <UserGroupIcon style={{ width: 18, height: 18, color: 'var(--primary)' }} />
+                <span style={{ fontWeight: 600 }}>{selectedDoctor?.name}</span>
+              </div>
               <FreeVisitPrice doctorUuid={selected} />
               <ScheduleSection doctorUuid={selected} />
             </div>

assets/admin/pages/ClinicServicesPage.test.tsx

@@ -68,4 +68,54 @@ describe('ClinicServicesPage (خدمات)', () => {
     expect(screen.getByText('تعرفه‌های سالانه')).toBeInTheDocument();
     expect(screen.getByText('پوشش بیمه')).toBeInTheDocument();
   });
+
+  it('فرم ویرایش سرویس دیگر سوییچ بیمه ندارد و به بخش پوشش بیمه ارجاع می‌دهد', async () => {
+    renderWithProviders(<ClinicServicesPage />, { route: '/admin/clinic-services' });
+    fireEvent.click(await screen.findByText('کندلا ۲۰۲۱'));
+    fireEvent.click(await screen.findByTitle('عملیات'));
+    fireEvent.click(await screen.findByText('ویرایش'));
+
+    expect(await screen.findByText('ویرایش سرویس')).toBeInTheDocument();
+    expect(screen.queryByText('این خدمت شامل بیمه می‌شود')).not.toBeInTheDocument();
+    expect(screen.queryByText('قیمت تقریبی با بیمه (تومان)')).not.toBeInTheDocument();
+    expect(screen.getByText(/در بخش «پوشش بیمه» تنظیم می‌شود/)).toBeInTheDocument();
+  });
+
+  it('ذخیره‌ی سرویس فیلدهای بیمه را نمی‌فرستد', async () => {
+    const patch = api.patch as ReturnType<typeof vi.fn>;
+    patch.mockResolvedValue({ success: true, data: {} });
+
+    renderWithProviders(<ClinicServicesPage />, { route: '/admin/clinic-services' });
+    fireEvent.click(await screen.findByText('کندلا ۲۰۲۱'));
+    fireEvent.click(await screen.findByTitle('عملیات'));
+    fireEvent.click(await screen.findByText('ویرایش'));
+    fireEvent.click(await screen.findByText('ذخیره سرویس'));
+
+    await vi.waitFor(() => expect(patch).toHaveBeenCalled());
+    const body = patch.mock.calls[0][1];
+    expect(body).not.toHaveProperty('insurance_covered');
+    expect(body).not.toHaveProperty('insurance_price_rials');
+  });
+
+  it('کارت سرویسِ تحت پوشش، نشان «تحت پوشش» را نمایش می‌دهد', async () => {
+    get.mockImplementation((url: string) => {
+      if (url.includes('/subscription/my')) return Promise.resolve({ success: true, data: {
+        subscription: null, used_trial: false,
+        effective_plan: { name: 'professional', level: 2, max_secretaries: 10, features: { services: true } },
+      } });
+      if (url.includes('/payment/config')) return Promise.resolve({ success: true, data: { test_mode: true, gateways: [] } });
+      if (url.includes('/service-sections')) return Promise.resolve({ success: true, data: [
+        { uuid: 'sec1', name: 'کندلا ۲۰۲۱', active: true, items_count: 1 },
+      ] });
+      if (url.includes('/service-items/sec1')) return Promise.resolve({ success: true, data: [
+        { uuid: 'it1', name: 'فول بادی', price_rials: 35_000_000, active: true, insurance_covered: true },
+      ] });
+      return Promise.resolve({ success: true, data: [] });
+    });
+
+    renderWithProviders(<ClinicServicesPage />, { route: '/admin/clinic-services' });
+    fireEvent.click(await screen.findByText('کندلا ۲۰۲۱'));
+
+    expect(await screen.findByText('تحت پوشش')).toBeInTheDocument();
+  });
 });

assets/admin/pages/ClinicServicesPage.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import {
   PlusIcon, PencilIcon, TrashIcon, WrenchScrewdriverIcon, BanknotesIcon,
@@ -12,29 +13,17 @@ import { z } from 'zod';
 import { toast } from 'sonner';
 import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
-import type { ServiceSection, ServiceItem, ClinicStaff } from '../types';
-import { formatRial, formatNumber, rialToToman, tomanToRial } from '../lib/utils';
+import type { ServiceSection, ServiceItem } from '../types';
+import { formatRial, formatNumber } from '../lib/utils';
 import Modal from '../components/ui/Modal';
-import PriceInput from '../components/ui/PriceInput';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 import ServiceTariffModal from '../components/ServiceTariffModal';
 import ServiceInsuranceModal from '../components/ServiceInsuranceModal';
-import SearchableSelect from '../components/ui/SearchableSelect';
+import ServiceItemFormModal from '../components/ServiceItemFormModal';
 import FeatureGate from '../components/ui/FeatureGate';
-import { numericField } from '../lib/forms';
 
 const sectionSchema = z.object({ name: z.string().min(1, 'نام بخش الزامی است') });
-const itemSchema = z.object({
-  name:                  z.string().min(1, 'نام سرویس الزامی است'),
-  price_rials:           z.coerce.number().min(0, 'مبلغ نمی‌تواند منفی باشد'),
-  staff_uuids:           z.array(z.string()).optional(),
-  insurance_covered:     z.boolean().optional(),
-  insurance_price_rials: z.coerce.number().min(0).optional(),
-  duration_minutes:      z.coerce.number().min(0).optional(),
-  bookable:              z.boolean().optional(),
-});
 type SectionForm = z.infer<typeof sectionSchema>;
-type ItemForm    = z.infer<typeof itemSchema>;
 
 const EMPTY_SECTIONS: ServiceSection[] = [];
 const EMPTY_ITEMS: ServiceItem[] = [];
@@ -52,26 +41,9 @@ function Avatar({ name }: { name: string }) {
   );
 }
 
-function SrvRow({ label, value, strong, danger }: { label: string; value: string; strong?: boolean; danger?: boolean }) {
-  return (
-    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 8, padding: '3px 0' }}>
-      <span style={{ fontSize: 12, color: 'var(--text-3)', flexShrink: 0 }}>{label}:</span>
-      <span
-        style={{
-          fontSize: 14,
-          fontWeight: strong ? 800 : 500,
-          color: danger ? 'var(--danger)' : strong ? 'var(--primary)' : 'var(--text-2)',
-          textAlign: 'left',
-        }}
-      >
-        {value}
-      </span>
-    </div>
-  );
-}
-
 function ClinicServicesPageInner() {
   const qc = useQueryClient();
+  const navigate = useNavigate();
 
   const [selectedSection, setSelectedSection] = useState<ServiceSection | null>(null);
   const [sectionModal, setSectionModal] = useState<'create' | ServiceSection | null>(null);
@@ -95,33 +67,10 @@ function ClinicServicesPageInner() {
     enabled: !!selectedSection,
   });
 
-  const { data: staffData } = useQuery<ApiResponse<ClinicStaff[]>>({
-    queryKey: ['staff'],
-    queryFn: () => api.get('/api/v1/staff'),
-  });
-
   const sections = sectionsData?.data ?? EMPTY_SECTIONS;
   const allItems = itemsData?.data ?? EMPTY_ITEMS;
-  const allStaff = staffData?.data ?? [];
 
   const sectionForm = useForm<SectionForm>({ resolver: zodResolver(sectionSchema) });
-  const itemForm    = useForm<ItemForm>({ resolver: zodResolver(itemSchema) });
-
-  const selectedStaffUuids = itemForm.watch('staff_uuids') ?? [];
-  const editingMembers = itemModal && typeof itemModal === 'object'
-    ? (itemModal.staff_members ?? (itemModal.staff ? [itemModal.staff] : []))
-    : [];
-  const staffOptions = allStaff
-    .filter((s) => s.active || editingMembers.some((m) => m.uuid === s.uuid))
-    .filter((s) => !selectedStaffUuids.includes(s.uuid))
-    .map((s) => ({
-      value: s.uuid,
-      label: s.active ? s.full_name : `${s.full_name} (غیرفعال)`,
-    }));
-  const staffNameOf = (uuid: string) =>
-    allStaff.find((s) => s.uuid === uuid)?.full_name
-    ?? editingMembers.find((m) => m.uuid === uuid)?.full_name
-    ?? uuid;
 
   const items = allItems.filter((it) => {
     if (!showInactive && !it.active) return false;
@@ -164,27 +113,6 @@ function ClinicServicesPageInner() {
     onError: (e: any) => toast.error(e.message),
   });
 
-  const createItem = useMutation({
-    mutationFn: (body: ItemForm & { section_uuid: string }) => api.post('/api/v1/service-item', {
-      ...body,
-      price_rials: tomanToRial(body.price_rials),
-      insurance_price_rials: tomanToRial(body.insurance_price_rials ?? 0),
-    }),
-    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setItemModal(null); itemForm.reset(); toast.success('سرویس ایجاد شد'); },
-    onError: (e: any) => toast.error(e.message),
-  });
-
-  const editItem = useMutation({
-    mutationFn: ({ uuid, body }: { uuid: string; body: ItemForm }) =>
-      api.patch(`/api/v1/service-item/${uuid}`, {
-        ...body,
-        price_rials: tomanToRial(body.price_rials),
-        insurance_price_rials: tomanToRial(body.insurance_price_rials ?? 0),
-      }),
-    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setItemModal(null); toast.success('سرویس ویرایش شد'); },
-    onError: (e: any) => toast.error(e.message),
-  });
-
   const toggleActive = useMutation({
     mutationFn: ({ uuid, active }: { uuid: string; active: boolean }) =>
       api.patch(`/api/v1/service-item/${uuid}`, { active }),
@@ -201,23 +129,7 @@ function ClinicServicesPageInner() {
     setSectionModal(s);
   };
 
-  const openEditItem = (item: ServiceItem) => {
-    itemForm.reset({
-      name: item.name,
-      price_rials: rialToToman(item.price_rials),
-      staff_uuids: (item.staff_members ?? (item.staff ? [item.staff] : [])).map((s) => s.uuid),
-      insurance_covered: item.insurance_covered ?? false,
-      insurance_price_rials: rialToToman(item.insurance_price_rials ?? 0),
-      duration_minutes: item.duration_minutes ?? undefined,
-      bookable: item.bookable ?? false,
-    });
-    setItemModal(item);
-  };
-
-  const openCreateItem = () => {
-    itemForm.reset({ name: '', price_rials: 0, staff_uuids: [], insurance_covered: false, insurance_price_rials: 0, duration_minutes: undefined, bookable: false });
-    setItemModal('create');
-  };
+  const openCreateItem = () => setItemModal('create');
 
   return (
     <>
@@ -337,16 +249,20 @@ function ClinicServicesPageInner() {
                 return (
                   <div
                     key={item.uuid}
+                    role="link"
+                    tabIndex={0}
+                    onClick={() => navigate(`/admin/clinic-services/${item.uuid}`)}
+                    onKeyDown={(e) => { if (e.key === 'Enter') navigate(`/admin/clinic-services/${item.uuid}`); }}
                     style={{
                       position: 'relative', background: 'var(--surface)', borderRadius: 8,
                       boxShadow: '0 1px 24.8px rgba(204,204,204,0.18)',
-                      border: '1px solid var(--border)', padding: 14,
+                      border: '1px solid var(--border)', padding: 14, cursor: 'pointer',
                       opacity: item.active ? 1 : 0.7,
                     }}
                   >
                     {/* نوار بالا: ⋮ (چپ) + وضعیت و نام (راست) */}
                     <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 8, marginBottom: 14 }}>
-                      <button className="btn sm ghost" style={{ padding: 4 }} onClick={() => setMenuOpen(menuOpen === item.uuid ? null : item.uuid)} title="عملیات">
+                      <button className="btn sm ghost" style={{ padding: 4 }} onClick={(e) => { e.stopPropagation(); setMenuOpen(menuOpen === item.uuid ? null : item.uuid); }} title="عملیات">
                         <EllipsisHorizontalIcon style={{ width: 20 }} />
                       </button>
                       <div style={{ display: 'flex', alignItems: 'center', gap: 8, minWidth: 0 }}>
@@ -358,9 +274,9 @@ function ClinicServicesPageInner() {
                     </div>
                     {menuOpen === item.uuid && (
                       <>
-                        <div style={{ position: 'fixed', inset: 0, zIndex: 40 }} onClick={() => setMenuOpen(null)} />
-                        <div style={{ position: 'absolute', top: 40, insetInlineStart: 8, zIndex: 41, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', boxShadow: 'var(--shadow)', padding: 6, minWidth: 176, display: 'flex', flexDirection: 'column', gap: 2 }}>
-                          <button style={menuItemStyle} onClick={() => { setMenuOpen(null); openEditItem(item); }}><PencilIcon style={{ width: 15 }} /> ویرایش</button>
+                        <div style={{ position: 'fixed', inset: 0, zIndex: 40 }} onClick={(e) => { e.stopPropagation(); setMenuOpen(null); }} />
+                        <div onClick={(e) => e.stopPropagation()} style={{ position: 'absolute', top: 40, insetInlineStart: 8, zIndex: 41, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--r-sm)', boxShadow: 'var(--shadow)', padding: 6, minWidth: 176, display: 'flex', flexDirection: 'column', gap: 2 }}>
+                          <button style={menuItemStyle} onClick={() => { setMenuOpen(null); setItemModal(item); }}><PencilIcon style={{ width: 15 }} /> ویرایش</button>
                           <button style={menuItemStyle} onClick={() => { setMenuOpen(null); setTariffItem(item); }}><BanknotesIcon style={{ width: 15 }} /> تعرفه‌های سالانه</button>
                           <button style={menuItemStyle} onClick={() => { setMenuOpen(null); setInsuranceItem(item); }}><ShieldCheckIcon style={{ width: 15 }} /> پوشش بیمه</button>
                           <button style={menuItemStyle} onClick={() => { setMenuOpen(null); setToggleItem(item); }}>{item.active ? <EyeSlashIcon style={{ width: 15 }} /> : <EyeIcon style={{ width: 15 }} />}{item.active ? ' غیرفعال‌کردن' : ' فعال‌کردن'}</button>
@@ -387,9 +303,14 @@ function ClinicServicesPageInner() {
                       </span>
                     </div>
 
-                    {item.insurance_covered && item.insurance_price_rials != null && (
-                      <SrvRow label="سهم بیمار (بیمه)" value={formatRial(item.insurance_price_rials)} />
-                    )}
+                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8, padding: '3px 0' }}>
+                      <span style={{ fontSize: 12, color: 'var(--text-3)', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
+                        <ShieldCheckIcon style={{ width: 14, color: 'var(--text-3)' }} /> بیمه:
+                      </span>
+                      {item.insurance_covered
+                        ? <span className="badge green" style={{ fontSize: 11 }}>تحت پوشش</span>
+                        : <span style={{ fontSize: 12, color: 'var(--text-3)' }}>—</span>}
+                    </div>
 
                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8, padding: '3px 0' }}>
                       <span style={{ fontSize: 12, color: 'var(--text-3)', flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 5 }}>
@@ -436,162 +357,12 @@ function ClinicServicesPageInner() {
       </Modal>
 
       {/* ───────── Modal سرویس ───────── */}
-      <Modal
-        open={itemModal !== null}
+      <ServiceItemFormModal
+        item={itemModal}
+        sectionUuid={selectedSection?.uuid ?? null}
         onClose={() => setItemModal(null)}
-        title={itemModal === 'create' ? 'سرویس جدید' : 'ویرایش سرویس'}
-        size="md"
-        footer={
-          <>
-            <button type="button" className="btn" onClick={() => setItemModal(null)}>انصراف</button>
-            <button type="submit" form="service-item-form" className="btn primary" disabled={createItem.isPending || editItem.isPending}>
-              {createItem.isPending || editItem.isPending ? 'در حال ذخیره...' : 'ذخیره سرویس'}
-            </button>
-          </>
-        }
-      >
-        <form
-          id="service-item-form"
-          onSubmit={itemForm.handleSubmit((d) => {
-            if (itemModal === 'create' && selectedSection) {
-              createItem.mutate({ ...d, section_uuid: selectedSection.uuid });
-            } else if (itemModal !== null && typeof itemModal === 'object') {
-              editItem.mutate({ uuid: itemModal.uuid, body: d });
-            }
-          })}
-          style={{ display: 'flex', flexDirection: 'column', gap: 20 }}
-        >
-          {/* اطلاعات پایه */}
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
-            <div>
-              <label className="field-label">نام سرویس *</label>
-              <div className="field" style={itemForm.formState.errors.name ? { borderColor: 'var(--danger)' } : undefined}>
-                <input {...itemForm.register('name')} placeholder="مثلاً: سرم ۵۰۰cc" autoFocus />
-              </div>
-              {itemForm.formState.errors.name && (
-                <span className="field-error">{itemForm.formState.errors.name.message}</span>
-              )}
-            </div>
-
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
-              <div>
-                <label className="field-label">قیمت پایه (تومان) *</label>
-                <div className="field">
-                  <PriceInput
-                    value={itemForm.watch('price_rials') ?? 0}
-                    onChange={(v) => itemForm.setValue('price_rials', v)}
-                    placeholder="۸۵,۰۰۰"
-                    min={0}
-                  />
-                </div>
-                {itemForm.formState.errors.price_rials && (
-                  <span className="field-error">{itemForm.formState.errors.price_rials.message}</span>
-                )}
-              </div>
-              <div>
-                <label className="field-label">پرسنل مسئول</label>
-                <SearchableSelect
-                  options={staffOptions}
-                  value={''}
-                  onChange={(v) => {
-                    if (v != null) itemForm.setValue('staff_uuids', [...selectedStaffUuids, String(v)]);
-                  }}
-                  placeholder="افزودن پرسنل (اختیاری)"
-                  noOptionsMessage="پرسنلی باقی نمانده"
-                  height={42}
-                />
-                {selectedStaffUuids.length > 0 && (
-                  <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6, marginTop: 8 }}>
-                    {selectedStaffUuids.map((uuid) => (
-                      <span key={uuid} style={{
-                        display: 'inline-flex', alignItems: 'center', gap: 6,
-                        fontSize: 12.5, color: 'var(--text-2)', background: 'var(--surface-2)',
-                        border: '1px solid var(--border)', borderRadius: 999, padding: '4px 6px 4px 10px',
-                      }}>
-                        {staffNameOf(uuid)}
-                        <button
-                          type="button" aria-label={`حذف ${staffNameOf(uuid)}`}
-                          onClick={() => itemForm.setValue('staff_uuids', selectedStaffUuids.filter((u) => u !== uuid))}
-                          style={{ display: 'grid', placeItems: 'center', width: 16, height: 16, border: 'none', cursor: 'pointer', borderRadius: '50%', background: 'var(--surface-3)', color: 'var(--text-3)' }}
-                        >
-                          <XMarkIcon style={{ width: 11 }} />
-                        </button>
-                      </span>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </div>
-
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, alignItems: 'end' }}>
-              <div>
-                <label className="field-label">زمان متوسط (دقیقه)</label>
-                <div className="field">
-                  <input {...numericField(itemForm.register('duration_minutes'))} placeholder="مثلاً: 50" />
-                </div>
-              </div>
-              <label style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', padding: '9px 0' }}>
-                <span className="switch">
-                  <input
-                    type="checkbox"
-                    checked={itemForm.watch('bookable') ?? false}
-                    onChange={(e) => itemForm.setValue('bookable', e.target.checked)}
-                  />
-                  <span className="switch-track"><span className="switch-thumb" /></span>
-                </span>
-                <span style={{ fontSize: 13 }}>نمایش در نوبت‌دهی</span>
-              </label>
-            </div>
-          </div>
-
-          {/* بیمه */}
-          <div style={{
-            border: '1px solid var(--border)', borderRadius: 'var(--r)',
-            background: 'var(--surface-2)', overflow: 'hidden',
-          }}>
-            <label style={{
-              display: 'flex', alignItems: 'center', gap: 11, cursor: 'pointer',
-              padding: '13px 16px',
-            }}>
-              <ShieldCheckIcon style={{ width: 18, color: 'var(--primary)', flexShrink: 0 }} />
-              <div style={{ flex: 1, minWidth: 0 }}>
-                <div style={{ fontSize: 13.5, fontWeight: 600 }}>این خدمت شامل بیمه می‌شود</div>
-                <div style={{ fontSize: 11.5, color: 'var(--text-3)', marginTop: 2 }}>نشانه‌ی سریع برای فهرست سرویس‌ها</div>
-              </div>
-              <span className="switch">
-                <input
-                  type="checkbox"
-                  checked={itemForm.watch('insurance_covered') ?? false}
-                  onChange={(e) => itemForm.setValue('insurance_covered', e.target.checked)}
-                />
-                <span className="switch-track"><span className="switch-thumb" /></span>
-              </span>
-            </label>
-
-            {itemForm.watch('insurance_covered') && (
-              <div style={{ padding: '0 16px 16px', borderTop: '1px solid var(--border)', paddingTop: 14 }}>
-                <label className="field-label">قیمت تقریبی با بیمه (تومان)</label>
-                <div className="field" style={{ background: 'var(--surface)' }}>
-                  <PriceInput
-                    value={itemForm.watch('insurance_price_rials') ?? 0}
-                    onChange={(v) => itemForm.setValue('insurance_price_rials', v)}
-                    placeholder="سهم تقریبی بیمار"
-                    min={0}
-                  />
-                </div>
-                <div style={{
-                  fontSize: 11.5, color: 'var(--text-3)', lineHeight: 1.75, marginTop: 10,
-                  display: 'flex', gap: 6,
-                }}>
-                  <ShieldCheckIcon style={{ width: 14, flexShrink: 0, marginTop: 2, color: 'var(--text-3)' }} />
-                  <span>برای محاسبه‌ی دقیق سهم بیمار و ساخت مطالبات، پوشش هر بیمه‌گر را از دکمه‌ی «پوشش بیمه» در فهرست سرویس‌ها تنظیم کنید.</span>
-                </div>
-              </div>
-            )}
-          </div>
-        </form>
-      </Modal>
-
+        onManageInsurance={setInsuranceItem}
+      />
       <ServiceTariffModal item={tariffItem} onClose={() => setTariffItem(null)} />
 
       <ServiceInsuranceModal item={insuranceItem} onClose={() => setInsuranceItem(null)} />

assets/admin/pages/ServiceDetailPage.test.tsx

@@ -0,0 +1,135 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { screen, fireEvent } from '@testing-library/react';
+import { Routes, Route } from 'react-router-dom';
+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 { useAuthStore } from '../stores/authStore';
+import ServiceDetailPage from './ServiceDetailPage';
+
+const get = api.get as ReturnType<typeof vi.fn>;
+
+const ITEM = {
+  uuid: 'it1',
+  name: 'سرم ۵۰۰cc',
+  section_uuid: 'sec1',
+  section_name: 'تزریقات',
+  price_rials: 8_500_000,
+  active: true,
+  bookable: true,
+  duration_minutes: 30,
+  insurance_covered: true,
+  staff: { uuid: 'st1', full_name: 'مریم امینی' },
+  staff_members: [{ uuid: 'st1', full_name: 'مریم امینی' }],
+  created_at: 1_700_000_000,
+  updated_at: 1_800_000_000,
+};
+
+const mockApi = (item: unknown = ITEM, notFound = false) => {
+  get.mockImplementation((url: string) => {
+    if (url.includes('/subscription/my')) return Promise.resolve({ success: true, data: {
+      subscription: null, used_trial: false,
+      effective_plan: { name: 'professional', level: 2, max_secretaries: 10, features: { services: true } },
+    } });
+    if (url.includes('/payment/config')) return Promise.resolve({ success: true, data: { test_mode: true, gateways: [] } });
+    if (url.includes('/service-item/')) {
+      return notFound ? Promise.reject(new Error('یافت نشد')) : Promise.resolve({ success: true, data: item });
+    }
+    if (url.includes('/tariffs')) return Promise.resolve({ success: true, data: {
+      current_year: 1404, default_price_rials: 8_500_000,
+      data: [
+        { uuid: 't1', year: 1404, price_rials: 8_500_000, is_active: true },
+        { uuid: 't2', year: 1403, price_rials: 7_000_000, is_active: false },
+      ],
+    } });
+    if (url.includes('/tenant-insurances')) return Promise.resolve({ data: { data: [
+      { uuid: 'ins1', insurance_name: 'بیمه ایران', insurance_kind: 'basic', coverage_percent: 70 },
+    ] } });
+    return Promise.resolve({ success: true, data: [] });
+  });
+};
+
+beforeEach(() => {
+  useAuthStore.setState({ primaryRole: 'doctor' });
+  get.mockReset();
+  mockApi();
+});
+
+// صفحه uuid را از useParams می‌گیرد، پس به یک Route واقعی نیاز دارد.
+const render = () =>
+  renderWithProviders(
+    <Routes>
+      <Route path="/admin/clinic-services/:uuid" element={<ServiceDetailPage />} />
+    </Routes>,
+    { route: '/admin/clinic-services/it1' },
+  );
+
+describe('ServiceDetailPage (جزئیات سرویس)', () => {
+  it('اطلاعات پایه سرویس را با breadcrumb نمایش می‌دهد', async () => {
+    render();
+
+    expect(await screen.findByRole('heading', { name: 'سرم ۵۰۰cc' })).toBeInTheDocument();
+    expect(screen.getByText('سرویس‌ها')).toBeInTheDocument();
+    expect(screen.getAllByText('تزریقات').length).toBeGreaterThan(0);
+    expect(screen.getByText('مریم امینی')).toBeInTheDocument();
+    expect(screen.getByText('۳۰ دقیقه')).toBeInTheDocument();
+    expect(screen.getByText('تحت پوشش')).toBeInTheDocument();
+  });
+
+  it('تاریخ ایجاد و آخرین ویرایش را شمسی نشان می‌دهد', async () => {
+    render();
+
+    expect(await screen.findByText('تاریخ ایجاد')).toBeInTheDocument();
+    expect(screen.getByText('آخرین ویرایش')).toBeInTheDocument();
+    // سال شمسی معادل ۱۷۰۰۰۰۰۰۰۰ ⇒ ۱۴۰۲
+    expect(screen.getByText(/۱۴۰۲/)).toBeInTheDocument();
+  });
+
+  it('تب تعرفه‌ها فهرست سال‌ها را با نشان «سال جاری» می‌آورد', async () => {
+    render();
+    fireEvent.click(await screen.findByText('تعرفه‌ها'));
+
+    expect(await screen.findByText('سال جاری')).toBeInTheDocument();
+    expect(screen.getByText('۱۴۰۴')).toBeInTheDocument();
+    expect(screen.getByText('۱۴۰۳')).toBeInTheDocument();
+  });
+
+  it('تب بیمه‌ها قراردادها و درصد پوشش را می‌آورد', async () => {
+    render();
+    fireEvent.click(await screen.findByText('بیمه‌ها'));
+
+    expect(await screen.findByText('بیمه ایران')).toBeInTheDocument();
+    expect(screen.getByText(/پوشش ۷۰٪/)).toBeInTheDocument();
+  });
+
+  it('سرویس ناموجود → پیام خطا و دکمه بازگشت', async () => {
+    mockApi(null, true);
+    render();
+
+    expect(await screen.findByText('سرویس یافت نشد')).toBeInTheDocument();
+    expect(screen.getByText('بازگشت به سرویس‌ها')).toBeInTheDocument();
+  });
+
+  it('دکمه ویرایش، فرم مشترک سرویس را باز می‌کند', async () => {
+    render();
+    fireEvent.click(await screen.findByText('ویرایش'));
+
+    expect(await screen.findByText('ویرایش سرویس')).toBeInTheDocument();
+    // تنظیمات بیمه نباید در فرم باشد
+    expect(screen.queryByText('این خدمت شامل بیمه می‌شود')).not.toBeInTheDocument();
+  });
+
+  it('سرویس غیرفعال نشان «غیرفعال» و دکمه فعال‌کردن دارد', async () => {
+    mockApi({ ...ITEM, active: false });
+    render();
+
+    expect(await screen.findByText('غیرفعال')).toBeInTheDocument();
+    expect(screen.getByText('فعال‌کردن')).toBeInTheDocument();
+  });
+});

assets/admin/pages/ServiceDetailPage.tsx

@@ -0,0 +1,375 @@
+import { useState } from 'react';
+import { useParams, useNavigate } from 'react-router-dom';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import {
+  BanknotesIcon, ShieldCheckIcon, ClockIcon, UsersIcon, PencilIcon,
+  CalendarDaysIcon, WrenchScrewdriverIcon, CubeIcon,
+} from '@heroicons/react/24/outline';
+import { toast } from 'sonner';
+import { api } from '../lib/api';
+import type { ApiResponse } from '../lib/api';
+import type { ServiceItem } from '../types';
+import { formatRial, formatNumber, formatYear, formatDateTime } from '../lib/utils';
+import PageHeader from '../components/ui/PageHeader';
+import FeatureGate from '../components/ui/FeatureGate';
+import ConfirmDialog from '../components/ui/ConfirmDialog';
+import ServiceTariffModal from '../components/ServiceTariffModal';
+import ServiceInsuranceModal from '../components/ServiceInsuranceModal';
+import ServiceItemFormModal from '../components/ServiceItemFormModal';
+
+interface Tariff {
+  uuid: string;
+  year: number;
+  price_rials: number;
+  is_active: boolean;
+}
+
+interface TariffList {
+  current_year: number;
+  default_price_rials: number;
+  data: Tariff[];
+}
+
+interface TenantInsurance {
+  uuid: string;
+  insurance_name: string | null;
+  insurance_kind: 'basic' | 'supplementary' | null;
+  coverage_percent: number;
+}
+
+interface CoverageRow {
+  service_item_uuid: string | null;
+  covered: boolean;
+  coverage_percent: number | null;
+  franchise_rials: number | null;
+  ceiling_rials: number | null;
+}
+
+const TABS = [
+  { id: 'info',      label: 'اطلاعات سرویس' },
+  { id: 'tariffs',   label: 'تعرفه‌ها' },
+  { id: 'insurance', label: 'بیمه‌ها' },
+] as const;
+type TabId = typeof TABS[number]['id'];
+
+const KIND = {
+  basic:         { label: 'پایه',   cls: 'blue' },
+  supplementary: { label: 'تکمیلی', cls: 'violet' },
+} as const;
+
+function Row({ icon, label, children }: { icon: React.ReactNode; label: string; children: React.ReactNode }) {
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+      gap: 12, padding: '11px 0', borderBottom: '1px solid var(--border)',
+    }}>
+      <span style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+        {icon} {label}
+      </span>
+      <span style={{ fontSize: 13.5, color: 'var(--text-2)', textAlign: 'left', minWidth: 0 }}>{children}</span>
+    </div>
+  );
+}
+
+function InfoTab({ item }: { item: ServiceItem }) {
+  const members = item.staff_members ?? (item.staff ? [item.staff] : []);
+
+  return (
+    <div className="card card-pad">
+      <Row icon={<BanknotesIcon style={{ width: 15 }} />} label="قیمت پایه">
+        <b style={{ color: 'var(--primary)', fontSize: 14 }}>{formatRial(item.price_rials)}</b>
+      </Row>
+      <Row icon={<WrenchScrewdriverIcon style={{ width: 15 }} />} label="بخش">
+        {item.section_name ?? '—'}
+      </Row>
+      <Row icon={<ClockIcon style={{ width: 15 }} />} label="زمان متوسط">
+        {item.duration_minutes
+          ? <span className="badge blue" style={{ fontSize: 11 }}>{formatNumber(Number(item.duration_minutes))} دقیقه</span>
+          : '—'}
+      </Row>
+      <Row icon={<CalendarDaysIcon style={{ width: 15 }} />} label="نمایش در نوبت‌دهی">
+        {item.bookable
+          ? <span className="badge green" style={{ fontSize: 11 }}>فعال</span>
+          : <span className="badge gray" style={{ fontSize: 11 }}>غیرفعال</span>}
+      </Row>
+      <Row icon={<ShieldCheckIcon style={{ width: 15 }} />} label="پوشش بیمه">
+        {item.insurance_covered
+          ? <span className="badge green" style={{ fontSize: 11 }}>تحت پوشش</span>
+          : '—'}
+      </Row>
+      <Row icon={<UsersIcon style={{ width: 15 }} />} label="پرسنل مسئول">
+        {members.length > 0 ? (
+          <span style={{ display: 'flex', flexWrap: 'wrap', gap: 4, justifyContent: 'flex-end' }}>
+            {members.map((m) => (
+              <span key={m.uuid} style={{
+                fontSize: 12, color: 'var(--text-2)', background: 'var(--surface-2)',
+                border: '1px solid var(--border)', borderRadius: 999, padding: '3px 10px', whiteSpace: 'nowrap',
+              }}>{m.full_name}</span>
+            ))}
+          </span>
+        ) : '—'}
+      </Row>
+      <Row icon={<CalendarDaysIcon style={{ width: 15 }} />} label="تاریخ ایجاد">
+        {item.created_at ? formatDateTime(item.created_at) : '—'}
+      </Row>
+      <div style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, padding: '11px 0',
+      }}>
+        <span style={{ fontSize: 12.5, color: 'var(--text-3)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+          <CalendarDaysIcon style={{ width: 15 }} /> آخرین ویرایش
+        </span>
+        <span style={{ fontSize: 13.5, color: 'var(--text-2)' }}>
+          {item.updated_at ? formatDateTime(item.updated_at) : '—'}
+        </span>
+      </div>
+    </div>
+  );
+}
+
+function TariffsTab({ item, onManage }: { item: ServiceItem; onManage: () => void }) {
+  const { data, isLoading } = useQuery<ApiResponse<TariffList>>({
+    queryKey: ['service-tariffs', item.uuid],
+    queryFn: () => api.get(`/api/v1/service-items/${item.uuid}/tariffs`),
+  });
+
+  const list = data?.data;
+  const tariffs = list?.data ?? [];
+
+  return (
+    <div className="card card-pad">
+      <div className="card-title-row">
+        <div>
+          <b style={{ fontSize: 14 }}>تعرفه‌های سالانه</b>
+          <div className="muted" style={{ fontSize: 12 }}>
+            قیمت هر سال شمسی؛ قیمت سال جاری مبنای صورتحساب است.
+          </div>
+        </div>
+        <button className="btn primary sm" onClick={onManage}>مدیریت تعرفه‌ها</button>
+      </div>
+
+      {isLoading ? (
+        <div className="muted" style={{ fontSize: 13, padding: '12px 0' }}>در حال بارگذاری...</div>
+      ) : tariffs.length === 0 ? (
+        <div className="empty" style={{ padding: '28px 0' }}>
+          <BanknotesIcon style={{ width: 30, height: 30 }} />
+          <p className="muted">تعرفه‌ای ثبت نشده است</p>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
+          {tariffs.map((t) => (
+            <div key={t.uuid} style={{
+              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
+              padding: '10px 12px', borderRadius: 'var(--r-sm)',
+              border: '1px solid var(--border)',
+              background: t.year === list?.current_year ? 'var(--primary-soft)' : 'var(--surface)',
+            }}>
+              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13 }}>
+                <b>{formatYear(t.year)}</b>
+                {t.year === list?.current_year && <span className="badge green" style={{ fontSize: 10 }}>سال جاری</span>}
+                {!t.is_active && <span className="badge gray" style={{ fontSize: 10 }}>غیرفعال</span>}
+              </span>
+              <b style={{ fontSize: 13.5, color: 'var(--primary)' }}>{formatRial(t.price_rials)}</b>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function InsuranceTab({ item, onManage }: { item: ServiceItem; onManage: () => void }) {
+  const { data: contractsData, isLoading } = useQuery<{ data: { data: TenantInsurance[] } }>({
+    queryKey: ['tenant-insurances'],
+    queryFn: () => api.get('/api/v1/billing/tenant-insurances'),
+  });
+
+  const contracts = (contractsData as any)?.data?.data as TenantInsurance[] | undefined ?? [];
+
+  return (
+    <div className="card card-pad">
+      <div className="card-title-row">
+        <div>
+          <b style={{ fontSize: 14 }}>بیمه‌های مرتبط</b>
+          <div className="muted" style={{ fontSize: 12 }}>
+            درصد پوشش، فرانشیز و سقف هر بیمه‌گر برای این خدمت.
+          </div>
+        </div>
+        <button className="btn primary sm" onClick={onManage}>مدیریت پوشش</button>
+      </div>
+
+      {isLoading ? (
+        <div className="muted" style={{ fontSize: 13, padding: '12px 0' }}>در حال بارگذاری...</div>
+      ) : contracts.length === 0 ? (
+        <div className="empty" style={{ padding: '28px 0' }}>
+          <ShieldCheckIcon style={{ width: 30, height: 30 }} />
+          <p className="muted">قرارداد بیمه‌ی فعالی ندارید</p>
+        </div>
+      ) : (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
+          {contracts.map((c) => (
+            <ContractCoverageRow key={c.uuid} contract={c} itemUuid={item.uuid} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ContractCoverageRow({ contract, itemUuid }: { contract: TenantInsurance; itemUuid: string }) {
+  const { data } = useQuery<{ data: { data: CoverageRow[] } }>({
+    queryKey: ['service-coverage', contract.uuid],
+    queryFn: () => api.get(`/api/v1/billing/tenant-insurances/${contract.uuid}/service-coverage`),
+  });
+
+  const row = ((data as any)?.data?.data as CoverageRow[] | undefined)
+    ?.find((r) => r.service_item_uuid === itemUuid);
+  const kind = contract.insurance_kind ? KIND[contract.insurance_kind] : null;
+  const percent = row?.coverage_percent ?? contract.coverage_percent;
+
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 10,
+      padding: '10px 12px', borderRadius: 'var(--r-sm)', border: '1px solid var(--border)',
+    }}>
+      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, minWidth: 0 }}>
+        <ShieldCheckIcon style={{ width: 15, color: 'var(--primary)', flexShrink: 0 }} />
+        <b style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+          {contract.insurance_name ?? 'بیمه'}
+        </b>
+        {kind && <span className={`badge ${kind.cls}`} style={{ fontSize: 10 }}>{kind.label}</span>}
+      </span>
+      {row && !row.covered ? (
+        <span style={{ fontSize: 12, color: 'var(--text-3)' }}>بدون پوشش</span>
+      ) : (
+        <span style={{ fontSize: 12.5, color: 'var(--text-2)', display: 'inline-flex', gap: 10, whiteSpace: 'nowrap' }}>
+          <span>پوشش {formatNumber(percent)}٪</span>
+          {row?.franchise_rials ? <span>فرانشیز {formatRial(row.franchise_rials)}</span> : null}
+          {row?.ceiling_rials ? <span>سقف {formatRial(row.ceiling_rials)}</span> : null}
+          {!row && <span className="muted">(ارث از قرارداد)</span>}
+        </span>
+      )}
+    </div>
+  );
+}
+
+function ServiceDetailPageInner() {
+  const { uuid } = useParams<{ uuid: string }>();
+  const navigate = useNavigate();
+  const qc = useQueryClient();
+
+  const [tab, setTab] = useState<TabId>('info');
+  const [editOpen, setEditOpen] = useState(false);
+  const [tariffOpen, setTariffOpen] = useState(false);
+  const [insuranceOpen, setInsuranceOpen] = useState(false);
+  const [toggleOpen, setToggleOpen] = useState(false);
+
+  const { data, isLoading, isError } = useQuery<ApiResponse<ServiceItem>>({
+    queryKey: ['service-item', uuid],
+    queryFn: () => api.get(`/api/v1/service-item/${uuid}`),
+    enabled: !!uuid,
+  });
+
+  const item = data?.data;
+
+  const toggleActive = useMutation({
+    mutationFn: () => api.patch(`/api/v1/service-item/${uuid}`, { active: !item!.active }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: ['service-item', uuid] });
+      qc.invalidateQueries({ queryKey: ['service-items'] });
+      setToggleOpen(false);
+      toast.success(item!.active ? 'سرویس غیرفعال شد' : 'سرویس فعال شد');
+    },
+    onError: (e: Error) => { toast.error(e.message); setToggleOpen(false); },
+  });
+
+  if (isLoading) {
+    return <div style={{ color: 'var(--text-3)', fontSize: 13, padding: 16 }}>در حال بارگذاری...</div>;
+  }
+
+  if (isError || !item) {
+    return (
+      <div className="card" style={{ padding: '52px 0', textAlign: 'center' }}>
+        <CubeIcon style={{ width: 34, margin: '0 auto 12px', display: 'block', opacity: 0.35 }} />
+        <div style={{ fontWeight: 600, color: 'var(--text-2)', marginBottom: 12 }}>سرویس یافت نشد</div>
+        <button className="btn primary sm" onClick={() => navigate('/admin/clinic-services')}>بازگشت به سرویس‌ها</button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fade-in">
+      <PageHeader
+        title={item.name}
+        breadcrumbs={[
+          { label: 'سرویس‌ها', to: '/admin/clinic-services' },
+          ...(item.section_name ? [{ label: item.section_name }] : []),
+          { label: item.name },
+        ]}
+        action={
+          <div style={{ display: 'flex', gap: 8 }}>
+            <button className="btn sm" onClick={() => setToggleOpen(true)}>
+              {item.active ? 'غیرفعال‌کردن' : 'فعال‌کردن'}
+            </button>
+            <button className="btn primary sm" onClick={() => setEditOpen(true)}>
+              <PencilIcon style={{ width: 15 }} /> ویرایش
+            </button>
+          </div>
+        }
+      />
+
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 'var(--gap)' }}>
+        <span className={`badge ${item.active ? 'green' : 'gray'}`} style={{ fontSize: 11 }}>
+          <span className="bdot" />{item.active ? 'فعال' : 'غیرفعال'}
+        </span>
+      </div>
+
+      <div className="seg" style={{ marginBottom: 'var(--gap)', overflowX: 'auto', flexWrap: 'nowrap' }}>
+        {TABS.map((t) => (
+          <button
+            key={t.id}
+            className={tab === t.id ? 'active' : ''}
+            style={{ whiteSpace: 'nowrap' }}
+            onClick={() => setTab(t.id)}
+          >
+            {t.label}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'info'      && <InfoTab item={item} />}
+      {tab === 'tariffs'   && <TariffsTab item={item} onManage={() => setTariffOpen(true)} />}
+      {tab === 'insurance' && <InsuranceTab item={item} onManage={() => setInsuranceOpen(true)} />}
+
+      <ServiceItemFormModal
+        item={editOpen ? item : null}
+        sectionUuid={item.section_uuid ?? null}
+        onClose={() => setEditOpen(false)}
+        onManageInsurance={() => setInsuranceOpen(true)}
+      />
+      <ServiceTariffModal item={tariffOpen ? item : null} onClose={() => setTariffOpen(false)} />
+      <ServiceInsuranceModal item={insuranceOpen ? item : null} onClose={() => setInsuranceOpen(false)} />
+
+      <ConfirmDialog
+        open={toggleOpen}
+        title={item.active ? 'غیرفعال‌کردن سرویس' : 'فعال‌کردن سرویس'}
+        message={
+          item.active
+            ? `سرویس «${item.name}» غیرفعال می‌شود و در پذیرش جدید نمایش داده نمی‌شود. سوابق قبلی حفظ می‌مانند.`
+            : `سرویس «${item.name}» دوباره فعال و قابل انتخاب می‌شود.`
+        }
+        confirmLabel={item.active ? 'غیرفعال کن' : 'فعال کن'}
+        onConfirm={() => toggleActive.mutate()}
+        onCancel={() => setToggleOpen(false)}
+        loading={toggleActive.isPending}
+      />
+    </div>
+  );
+}
+
+export default function ServiceDetailPage() {
+  return (
+    <FeatureGate feature="services">
+      <ServiceDetailPageInner />
+    </FeatureGate>
+  );
+}