feat: integrate insurance coverage management for clinic services

- Updated NewSessionPage to calculate patient share based on insurance coverage rules.
- Refactored billing calculations to utilize new patientShareOf function for service items.
- Enhanced API documentation to reflect changes in service coverage structure.
- Implemented ServiceInsuranceModal for managing insurance coverage per service.
- Added UI components for displaying and editing insurance coverage details.
- Removed obsolete toggle switch styles and adjusted CSS for new components.
- Ensured backend endpoints support both service_item_id and service_item_uuid for flexibility.

assets/admin/pages/ClinicServicesPage.tsx

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
-import { PlusIcon, PencilIcon, TrashIcon, WrenchScrewdriverIcon, BanknotesIcon } from '@heroicons/react/24/outline';
+import {
+  PlusIcon, PencilIcon, TrashIcon, WrenchScrewdriverIcon, BanknotesIcon,
+  ShieldCheckIcon, MagnifyingGlassIcon, EyeIcon, EyeSlashIcon,
+} from '@heroicons/react/24/outline';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { z } from 'zod';
@@ -14,6 +17,7 @@ import PriceInput from '../components/ui/PriceInput';
 import ConfirmDialog from '../components/ui/ConfirmDialog';
 import PageHeader from '../components/ui/PageHeader';
 import ServiceTariffModal from '../components/ServiceTariffModal';
+import ServiceInsuranceModal from '../components/ServiceInsuranceModal';
 import SearchableSelect from '../components/ui/SearchableSelect';
 import FeatureGate from '../components/ui/FeatureGate';
 
@@ -31,6 +35,19 @@ type ItemForm    = z.infer<typeof itemSchema>;
 const EMPTY_SECTIONS: ServiceSection[] = [];
 const EMPTY_ITEMS: ServiceItem[] = [];
 
+function Avatar({ name }: { name: string }) {
+  return (
+    <div style={{
+      width: 26, height: 26, borderRadius: '50%',
+      background: 'linear-gradient(145deg, oklch(0.62 0.15 162), oklch(0.48 0.16 162))',
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      fontSize: 11, fontWeight: 700, color: '#fff', flexShrink: 0,
+    }}>
+      {name.charAt(0)}
+    </div>
+  );
+}
+
 function ClinicServicesPageInner() {
   const qc = useQueryClient();
 
@@ -38,8 +55,11 @@ function ClinicServicesPageInner() {
   const [sectionModal, setSectionModal] = useState<'create' | ServiceSection | null>(null);
   const [deleteSection, setDeleteSection] = useState<ServiceSection | null>(null);
   const [itemModal, setItemModal] = useState<'create' | ServiceItem | null>(null);
-  const [deleteItem, setDeleteItem] = useState<ServiceItem | null>(null);
+  const [toggleItem, setToggleItem] = useState<ServiceItem | null>(null);
   const [tariffItem, setTariffItem] = useState<ServiceItem | null>(null);
+  const [insuranceItem, setInsuranceItem] = useState<ServiceItem | null>(null);
+  const [search, setSearch] = useState('');
+  const [showInactive, setShowInactive] = useState(true);
 
   const { data: sectionsData, isLoading: sectionsLoading } = useQuery<ApiResponse<ServiceSection[]>>({
     queryKey: ['service-sections'],
@@ -58,11 +78,23 @@ function ClinicServicesPageInner() {
   });
 
   const sections = sectionsData?.data ?? EMPTY_SECTIONS;
-  const items    = itemsData?.data ?? EMPTY_ITEMS;
-  const staffOptions = (staffData?.data ?? []).filter((s) => s.active).map((s) => ({
-    value: s.uuid,
-    label: s.full_name,
-  }));
+  const allItems = itemsData?.data ?? EMPTY_ITEMS;
+  const allStaff = staffData?.data ?? [];
+
+  const editingStaff = itemModal && typeof itemModal === 'object' ? itemModal.staff : null;
+  const staffOptions = allStaff
+    .filter((s) => s.active || s.uuid === editingStaff?.uuid)
+    .map((s) => ({
+      value: s.uuid,
+      label: s.active ? s.full_name : `${s.full_name} (غیرفعال)`,
+    }));
+
+  const items = allItems.filter((it) => {
+    if (!showInactive && !it.active) return false;
+    if (search.trim() && !it.name.includes(search.trim())) return false;
+    return true;
+  });
+  const activeCount = allItems.filter((i) => i.active).length;
 
   const sectionForm = useForm<SectionForm>({ resolver: zodResolver(sectionSchema) });
   const itemForm    = useForm<ItemForm>({ resolver: zodResolver(itemSchema) });
@@ -104,17 +136,15 @@ function ClinicServicesPageInner() {
     onError: (e: any) => toast.error(e.message),
   });
 
-  const delItem = useMutation({
-    mutationFn: (uuid: string) => api.delete(`/api/v1/service-item/${uuid}`),
-    onSuccess: () => { qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] }); setDeleteItem(null); toast.success('سرویس حذف شد'); },
-    onError: (e: any) => {
-      if (e.code === 'ERR_SERVICE_ITEM_IN_USE') {
-        toast.error('این سرویس در پرونده بیمار استفاده شده و قابل حذف نیست');
-      } else {
-        toast.error(e.message);
-      }
-      setDeleteItem(null);
+  const toggleActive = useMutation({
+    mutationFn: ({ uuid, active }: { uuid: string; active: boolean }) =>
+      api.patch(`/api/v1/service-item/${uuid}`, { active }),
+    onSuccess: (_d, v) => {
+      qc.invalidateQueries({ queryKey: ['service-items', selectedSection?.uuid] });
+      setToggleItem(null);
+      toast.success(v.active ? 'سرویس فعال شد' : 'سرویس غیرفعال شد');
     },
+    onError: (e: any) => { toast.error(e.message); setToggleItem(null); },
   });
 
   const openEditSection = (s: ServiceSection) => {
@@ -133,13 +163,18 @@ function ClinicServicesPageInner() {
     setItemModal(item);
   };
 
+  const openCreateItem = () => {
+    itemForm.reset({ name: '', price_rials: 0, staff_uuid: '', insurance_covered: false, insurance_price_rials: 0 });
+    setItemModal('create');
+  };
+
   return (
     <>
-      <PageHeader title="سرویس‌های کلینیک" description="مدیریت بخش‌ها و سرویس‌های کلینیک" />
+      <PageHeader title="سرویس‌های کلینیک" description="بخش‌ها، سرویس‌ها، تعرفه و پوشش بیمه را مدیریت کنید" />
 
-      <div style={{ display: 'grid', gridTemplateColumns: '300px 1fr', gap: 16, alignItems: 'start' }}>
-        {/* ستون بخش‌ها */}
-        <div className="card">
+      <div style={{ display: 'grid', gridTemplateColumns: '288px 1fr', gap: 18, alignItems: 'start' }}>
+        {/* ───────── ستون بخش‌ها ───────── */}
+        <div className="card" style={{ overflow: 'hidden' }}>
           <div style={{
             display: 'flex', alignItems: 'center', justifyContent: 'space-between',
             padding: '14px 16px', borderBottom: '1px solid var(--border)',
@@ -148,189 +183,194 @@ function ClinicServicesPageInner() {
             <button
               className="btn primary sm"
               style={{ display: 'flex', alignItems: 'center', gap: 4 }}
-              onClick={() => { sectionForm.reset(); setSectionModal('create'); }}
+              onClick={() => { sectionForm.reset({ name: '' }); setSectionModal('create'); }}
             >
-              <PlusIcon style={{ width: 14 }} /> بخش جدید
+              <PlusIcon style={{ width: 14 }} /> جدید
             </button>
           </div>
 
-          <div style={{ padding: '8px 0' }}>
+          <div style={{ padding: 8, display: 'flex', flexDirection: 'column', gap: 4 }}>
             {sectionsLoading ? (
-              <div style={{ color: 'var(--text-3)', fontSize: 13, padding: '12px 16px' }}>در حال بارگذاری...</div>
+              <div style={{ color: 'var(--text-3)', fontSize: 13, padding: '12px 8px' }}>در حال بارگذاری...</div>
             ) : sections.length === 0 ? (
               <div style={{ padding: '32px 16px', textAlign: 'center', color: 'var(--text-3)' }}>
-                <WrenchScrewdriverIcon style={{ width: 32, margin: '0 auto 10px', display: 'block', opacity: 0.4 }} />
+                <WrenchScrewdriverIcon style={{ width: 30, margin: '0 auto 10px', display: 'block', opacity: 0.4 }} />
                 <div style={{ fontSize: 13 }}>بخشی ثبت نشده است</div>
               </div>
             ) : (
-              sections.map((s) => (
-                <div
-                  key={s.uuid}
-                  style={{
-                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                    padding: '10px 14px', cursor: 'pointer',
-                    background: selectedSection?.uuid === s.uuid ? 'var(--primary-subtle)' : 'transparent',
-                    borderRight: selectedSection?.uuid === s.uuid ? '3px solid var(--primary)' : '3px solid transparent',
-                    transition: 'all 0.15s',
-                  }}
-                  onClick={() => setSelectedSection(s)}
-                >
-                  <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                    <WrenchScrewdriverIcon style={{
-                      width: 16,
-                      color: selectedSection?.uuid === s.uuid ? 'var(--primary)' : 'var(--text-3)',
-                      transition: 'color 0.15s',
-                    }} />
-                    <span style={{
-                      fontSize: 13.5, fontWeight: selectedSection?.uuid === s.uuid ? 600 : 400,
-                      color: selectedSection?.uuid === s.uuid ? 'var(--primary)' : 'var(--text-1)',
-                    }}>
-                      {s.name}
-                    </span>
+              sections.map((s) => {
+                const isActive = selectedSection?.uuid === s.uuid;
+                return (
+                  <div
+                    key={s.uuid}
+                    className="srv-section-row"
+                    style={{
+                      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                      padding: '9px 10px', cursor: 'pointer', borderRadius: 9,
+                      background: isActive ? 'var(--primary-subtle)' : 'transparent',
+                      transition: 'background 0.15s',
+                    }}
+                    onClick={() => setSelectedSection(s)}
+                  >
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 9, minWidth: 0 }}>
+                      <WrenchScrewdriverIcon style={{
+                        width: 16, flexShrink: 0,
+                        color: isActive ? 'var(--primary)' : 'var(--text-3)',
+                      }} />
+                      <span style={{
+                        fontSize: 13.5, fontWeight: isActive ? 600 : 500,
+                        color: isActive ? 'var(--primary)' : 'var(--text-1)',
+                        whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis',
+                      }}>
+                        {s.name}
+                      </span>
+                    </div>
+                    <div className="srv-section-actions" style={{ display: 'flex', gap: 2, flexShrink: 0 }} onClick={(e) => e.stopPropagation()}>
+                      <button className="btn sm ghost" onClick={() => openEditSection(s)} title="ویرایش">
+                        <PencilIcon style={{ width: 13 }} />
+                      </button>
+                      <button className="btn sm ghost" onClick={() => setDeleteSection(s)} title="حذف">
+                        <TrashIcon style={{ width: 13 }} />
+                      </button>
+                    </div>
                   </div>
-                  <div style={{ display: 'flex', gap: 4 }} onClick={(e) => e.stopPropagation()}>
-                    <button
-                      className="btn sm"
-                      style={{ opacity: 0.7 }}
-                      onClick={() => openEditSection(s)}
-                      title="ویرایش"
-                    >
-                      <PencilIcon style={{ width: 13 }} />
-                    </button>
-                    <button
-                      className="btn sm"
-                      style={{ opacity: 0.7 }}
-                      onClick={() => setDeleteSection(s)}
-                      title="حذف"
-                    >
-                      <TrashIcon style={{ width: 13 }} />
-                    </button>
-                  </div>
-                </div>
-              ))
+                );
+              })
             )}
           </div>
         </div>
 
-        {/* ستون آیتم‌ها */}
-        <div className="card">
+        {/* ───────── ستون سرویس‌ها ───────── */}
+        <div className="card" style={{ overflow: 'hidden' }}>
           {!selectedSection ? (
             <div style={{
-              border: '2px dashed var(--border)', borderRadius: 10,
-              margin: 16, padding: '60px 0', textAlign: 'center', color: 'var(--text-3)',
+              border: '2px dashed var(--border)', borderRadius: 12,
+              margin: 18, padding: '64px 0', textAlign: 'center', color: 'var(--text-3)',
             }}>
-              <WrenchScrewdriverIcon style={{ width: 40, margin: '0 auto 14px', display: 'block', opacity: 0.35 }} />
-              <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--text-2)' }}>یک بخش انتخاب کنید</div>
+              <WrenchScrewdriverIcon style={{ width: 42, margin: '0 auto 14px', display: 'block', opacity: 0.35 }} />
+              <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--text-2)' }}>یک بخش انتخاب کنید</div>
               <div style={{ fontSize: 13, marginTop: 4 }}>تا سرویس‌های آن را مشاهده و مدیریت کنید</div>
             </div>
           ) : (
             <>
-              {/* toolbar بخش انتخاب‌شده */}
               <div style={{
-                display: 'flex', alignItems: 'center', justifyContent: 'space-between',
-                padding: '14px 16px', borderBottom: '1px solid var(--border)',
+                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
+                padding: '14px 16px', borderBottom: '1px solid var(--border)', flexWrap: 'wrap',
               }}>
                 <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
-                  <WrenchScrewdriverIcon style={{ width: 16, color: 'var(--primary)' }} />
                   <b style={{ fontSize: 14 }}>{selectedSection.name}</b>
                   {!itemsLoading && (
-                    <span className="badge gray" style={{ fontSize: 11 }}>{items.length} سرویس</span>
+                    <span className="badge gray" style={{ fontSize: 11 }}>
+                      {activeCount} فعال{allItems.length > activeCount ? ` / ${allItems.length}` : ''}
+                    </span>
                   )}
                 </div>
-                <button
-                  className="btn primary sm"
-                  style={{ display: 'flex', alignItems: 'center', gap: 4 }}
-                  onClick={() => { itemForm.reset({ price_rials: 0, staff_uuid: '', insurance_covered: false, insurance_price_rials: 0 }); setItemModal('create'); }}
-                >
-                  <PlusIcon style={{ width: 14 }} /> سرویس جدید
-                </button>
+
+                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+                  <div style={{ position: 'relative' }}>
+                    <MagnifyingGlassIcon style={{ width: 15, position: 'absolute', insetInlineStart: 9, top: '50%', transform: 'translateY(-50%)', color: 'var(--text-3)', pointerEvents: 'none' }} />
+                    <input
+                      className="input"
+                      placeholder="جستجوی سرویس"
+                      value={search}
+                      onChange={(e) => setSearch(e.target.value)}
+                      style={{ width: 180, paddingInlineStart: 30, height: 34 }}
+                    />
+                  </div>
+                  <button
+                    className="btn sm ghost"
+                    onClick={() => setShowInactive((v) => !v)}
+                    title={showInactive ? 'پنهان‌کردن غیرفعال‌ها' : 'نمایش غیرفعال‌ها'}
+                  >
+                    {showInactive ? <EyeIcon style={{ width: 15 }} /> : <EyeSlashIcon style={{ width: 15 }} />}
+                  </button>
+                  <button className="btn primary sm" style={{ display: 'flex', alignItems: 'center', gap: 4 }} onClick={openCreateItem}>
+                    <PlusIcon style={{ width: 14 }} /> سرویس جدید
+                  </button>
+                </div>
               </div>
 
               {itemsLoading ? (
-                <div style={{ color: 'var(--text-3)', fontSize: 13, padding: '16px 16px' }}>در حال بارگذاری...</div>
+                <div style={{ color: 'var(--text-3)', fontSize: 13, padding: 16 }}>در حال بارگذاری...</div>
               ) : items.length === 0 ? (
-                <div style={{ padding: '48px 0', textAlign: 'center', color: 'var(--text-3)' }}>
+                <div style={{ padding: '52px 0', textAlign: 'center', color: 'var(--text-3)' }}>
                   <PlusIcon style={{ width: 32, margin: '0 auto 12px', display: 'block', opacity: 0.35 }} />
-                  <div style={{ fontWeight: 500, color: 'var(--text-2)', marginBottom: 4 }}>سرویسی در این بخش وجود ندارد</div>
-                  <button
-                    className="btn primary sm"
-                    style={{ marginTop: 12 }}
-                    onClick={() => { itemForm.reset({ price_rials: 0, staff_uuid: '', insurance_covered: false, insurance_price_rials: 0 }); setItemModal('create'); }}
-                  >
-                    افزودن سرویس
-                  </button>
+                  <div style={{ fontWeight: 600, color: 'var(--text-2)', marginBottom: 4 }}>
+                    {allItems.length === 0 ? 'سرویسی در این بخش وجود ندارد' : 'سرویسی با این فیلتر یافت نشد'}
+                  </div>
+                  {allItems.length === 0 && (
+                    <button className="btn primary sm" style={{ marginTop: 12 }} onClick={openCreateItem}>
+                      افزودن سرویس
+                    </button>
+                  )}
                 </div>
               ) : (
-                <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
-                  <thead>
-                    <tr style={{ background: 'oklch(0.97 0.01 256)', borderBottom: '1px solid var(--border)' }}>
-                      <th style={{ textAlign: 'right', padding: '10px 16px', fontWeight: 600, color: 'var(--text-2)' }}>نام سرویس</th>
-                      <th style={{ textAlign: 'right', padding: '10px 16px', fontWeight: 600, color: 'var(--text-2)' }}>قیمت</th>
-                      <th style={{ textAlign: 'right', padding: '10px 16px', fontWeight: 600, color: 'var(--text-2)' }}>پرسنل مسئول</th>
-                      <th style={{ textAlign: 'right', padding: '10px 16px', fontWeight: 600, color: 'var(--text-2)' }}>عملیات</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {items.map((item, idx) => (
-                      <tr
-                        key={item.uuid}
-                        style={{
-                          borderBottom: '1px solid var(--border)',
-                          background: idx % 2 === 1 ? 'oklch(0.985 0.005 256)' : 'transparent',
-                        }}
-                      >
-                        <td style={{ padding: '11px 16px', fontWeight: 500 }}>
-                          {item.name}
+                <div style={{ padding: 12, display: 'flex', flexDirection: 'column', gap: 8 }}>
+                  {items.map((item) => (
+                    <div
+                      key={item.uuid}
+                      style={{
+                        display: 'flex', alignItems: 'center', gap: 14,
+                        padding: '12px 14px', borderRadius: 11,
+                        border: '1px solid var(--border)',
+                        background: item.active ? 'var(--bg)' : 'oklch(0.97 0.005 256)',
+                        opacity: item.active ? 1 : 0.7,
+                        transition: 'box-shadow 0.15s',
+                      }}
+                    >
+                      <div style={{ minWidth: 0, flex: 1 }}>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+                          <span style={{ fontWeight: 600, fontSize: 13.5 }}>{item.name}</span>
+                          {!item.active && <span className="badge gray" style={{ fontSize: 10 }}>غیرفعال</span>}
                           {item.insurance_covered && (
-                            <span className="badge green" style={{ fontSize: 10, marginInlineStart: 6 }}>
-                              <span className="bdot" />بیمه
-                            </span>
+                            <span className="badge green" style={{ fontSize: 10 }}><span className="bdot" />بیمه</span>
                           )}
-                        </td>
-                        <td style={{ padding: '11px 16px', color: 'var(--primary)', fontWeight: 600 }}>
-                          {formatRial(item.price_rials)}
-                        </td>
-                        <td style={{ padding: '11px 16px' }}>
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--text-3)' }}>
                           {item.staff ? (
-                            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
-                              <div style={{
-                                width: 22, height: 22, borderRadius: '50%',
-                                background: 'linear-gradient(145deg, oklch(0.62 0.15 162), oklch(0.48 0.16 162))',
-                                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                                fontSize: 10, fontWeight: 700, color: '#fff', flexShrink: 0,
-                              }}>
-                                {item.staff.full_name.charAt(0)}
-                              </div>
-                              <span style={{ fontSize: 13 }}>{item.staff.full_name}</span>
-                            </div>
+                            <>
+                              <Avatar name={item.staff.full_name} />
+                              <span>{item.staff.full_name}</span>
+                            </>
                           ) : (
-                            <span style={{ color: 'var(--text-3)' }}>—</span>
+                            <span>بدون پرسنل مسئول</span>
                           )}
-                        </td>
-                        <td style={{ padding: '11px 16px' }}>
-                          <div style={{ display: 'flex', gap: 4 }}>
-                            <button className="btn sm" onClick={() => openEditItem(item)} title="ویرایش">
-                              <PencilIcon style={{ width: 13 }} />
-                            </button>
-                            <button className="btn sm" onClick={() => setTariffItem(item)} title="تعرفه‌های سالانه">
-                              <BanknotesIcon style={{ width: 13 }} />
-                            </button>
-                            <button className="btn sm" onClick={() => setDeleteItem(item)} title="حذف">
-                              <TrashIcon style={{ width: 13 }} />
-                            </button>
-                          </div>
-                        </td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
+                        </div>
+                      </div>
+
+                      <div style={{ textAlign: 'end', flexShrink: 0 }}>
+                        <div style={{ color: 'var(--primary)', fontWeight: 700, fontSize: 14 }}>{formatRial(item.price_rials)}</div>
+                      </div>
+
+                      <div style={{ display: 'flex', gap: 4, flexShrink: 0 }}>
+                        <button className="btn sm ghost" onClick={() => openEditItem(item)} title="ویرایش">
+                          <PencilIcon style={{ width: 14 }} />
+                        </button>
+                        <button className="btn sm ghost" onClick={() => setTariffItem(item)} title="تعرفه‌های سالانه">
+                          <BanknotesIcon style={{ width: 14 }} />
+                        </button>
+                        <button className="btn sm ghost" onClick={() => setInsuranceItem(item)} title="پوشش بیمه">
+                          <ShieldCheckIcon style={{ width: 14 }} />
+                        </button>
+                        <button
+                          className="btn sm ghost"
+                          onClick={() => setToggleItem(item)}
+                          title={item.active ? 'غیرفعال‌کردن' : 'فعال‌کردن'}
+                          style={{ color: item.active ? 'var(--text-3)' : 'var(--primary)' }}
+                        >
+                          {item.active ? <EyeSlashIcon style={{ width: 14 }} /> : <EyeIcon style={{ width: 14 }} />}
+                        </button>
+                      </div>
+                    </div>
+                  ))}
+                </div>
               )}
             </>
           )}
         </div>
       </div>
 
-      {/* Modal بخش */}
+      {/* ───────── Modal بخش ───────── */}
       <Modal
         open={sectionModal !== null}
         onClose={() => setSectionModal(null)}
@@ -342,107 +382,162 @@ function ClinicServicesPageInner() {
         })}>
           <div className="field">
             <label>نام بخش *</label>
-            <input {...sectionForm.register('name')} placeholder="مثلاً: تزریقات" />
+            <input {...sectionForm.register('name')} placeholder="مثلاً: تزریقات" autoFocus />
             {sectionForm.formState.errors.name && (
               <span className="field-error">{sectionForm.formState.errors.name.message}</span>
             )}
           </div>
-          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
+          <div style={{ display: 'flex', gap: 8, marginTop: 18 }}>
             <button type="submit" className="btn primary" disabled={createSection.isPending || editSection.isPending}>ذخیره</button>
             <button type="button" className="btn" onClick={() => setSectionModal(null)}>انصراف</button>
           </div>
         </form>
       </Modal>
 
-      {/* Modal آیتم */}
+      {/* ───────── Modal سرویس ───────── */}
       <Modal
         open={itemModal !== 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 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 });
-          }
-        })}>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
-            <div className="field">
-              <label>نام سرویس *</label>
-              <input {...itemForm.register('name')} placeholder="مثلاً: سرم ۵۰۰cc" />
+        <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 className="field">
-              <label>قیمت (ریال) *</label>
-              <PriceInput
-                value={itemForm.watch('price_rials') ?? 0}
-                onChange={(v) => itemForm.setValue('price_rials', v)}
-                placeholder="۸۵,۰۰۰"
-                min={0}
-              />
-            </div>
-            <div className="field">
-              <label>پرسنل مسئول</label>
-              <SearchableSelect
-                options={staffOptions}
-                value={itemForm.watch('staff_uuid') ?? ''}
-                onChange={(v) => itemForm.setValue('staff_uuid', v != null ? String(v) : undefined)}
-                placeholder="انتخاب پرسنل (اختیاری)"
-                isClearable
-              />
-            </div>
-            <label style={{ display: 'flex', alignItems: 'center', gap: 8, cursor: 'pointer', fontSize: 13.5 }}>
-              <input
-                type="checkbox"
-                checked={itemForm.watch('insurance_covered') ?? false}
-                onChange={(e) => itemForm.setValue('insurance_covered', e.target.checked)}
-              />
-              این خدمت شامل بیمه می‌شود
-            </label>
-            {itemForm.watch('insurance_covered') && (
-              <div className="field">
-                <label>قیمت با بیمه (ریال)</label>
-                <PriceInput
-                  value={itemForm.watch('insurance_price_rials') ?? 0}
-                  onChange={(v) => itemForm.setValue('insurance_price_rials', v)}
-                  placeholder="سهم بیمار با بیمه"
-                  min={0}
+
+            <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={itemForm.watch('staff_uuid') ?? ''}
+                  onChange={(v) => itemForm.setValue('staff_uuid', v != null ? String(v) : '')}
+                  placeholder="انتخاب (اختیاری)"
+                  noOptionsMessage="پرسنلی ثبت نشده"
+                  height={42}
+                  isClearable
                 />
               </div>
-            )}
+            </div>
           </div>
-          <div style={{ display: 'flex', gap: 8, marginTop: 16 }}>
-            <button type="submit" className="btn primary" disabled={createItem.isPending || editItem.isPending}>ذخیره</button>
-            <button type="button" className="btn" onClick={() => setItemModal(null)}>انصراف</button>
+
+          {/* بیمه */}
+          <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>
 
       <ServiceTariffModal item={tariffItem} onClose={() => setTariffItem(null)} />
 
+      <ServiceInsuranceModal item={insuranceItem} onClose={() => setInsuranceItem(null)} />
+
       {/* Confirm حذف بخش */}
       <ConfirmDialog
         open={!!deleteSection}
         title="حذف بخش"
-        message={`آیا مطمئن هستید که می‌خواهید بخش «${deleteSection?.name}» را حذف کنید؟`}
+        message={`آیا مطمئن هستید که می‌خواهید بخش «${deleteSection?.name}» و همه‌ی سرویس‌های آن را حذف کنید؟`}
         confirmLabel="حذف"
         onConfirm={() => deleteSection && delSection.mutate(deleteSection.uuid)}
         onCancel={() => setDeleteSection(null)}
         loading={delSection.isPending}
       />
 
-      {/* Confirm حذف آیتم */}
+      {/* Confirm فعال/غیرفعال سرویس */}
       <ConfirmDialog
-        open={!!deleteItem}
-        title="حذف سرویس"
-        message={`آیا مطمئن هستید که می‌خواهید سرویس «${deleteItem?.name}» را حذف کنید؟`}
-        confirmLabel="حذف"
-        onConfirm={() => deleteItem && delItem.mutate(deleteItem.uuid)}
-        onCancel={() => setDeleteItem(null)}
-        loading={delItem.isPending}
+        open={!!toggleItem}
+        title={toggleItem?.active ? 'غیرفعال‌کردن سرویس' : 'فعال‌کردن سرویس'}
+        message={
+          toggleItem?.active
+            ? `سرویس «${toggleItem?.name}» غیرفعال می‌شود و در پذیرش جدید نمایش داده نمی‌شود. سوابق قبلی حفظ می‌مانند.`
+            : `سرویس «${toggleItem?.name}» دوباره فعال و قابل انتخاب می‌شود.`
+        }
+        confirmLabel={toggleItem?.active ? 'غیرفعال کن' : 'فعال کن'}
+        onConfirm={() => toggleItem && toggleActive.mutate({ uuid: toggleItem.uuid, active: !toggleItem.active })}
+        onCancel={() => setToggleItem(null)}
+        loading={toggleActive.isPending}
       />
     </>
   );