fix(secretary): gate CRUD action buttons across all panel pages by permission

Backend already returned 403 for ungranted secretary actions, but the UI still
showed the add/edit/delete buttons (e.g. clinic-services showed «بخش جدید» to a
secretary without services.create). Sweep every secretary-reachable page so each
create/edit/delete/manage control renders only when the matching
usePermissions().can(resource, action) is true. Owner/doctor/clinic are
unaffected — can() returns true when there is no permission context — so this
restricts only secretaries and mirrors the server checks.

Pages/components gated (resource):
- services: ClinicServicesPage, ServiceDetailPage (+ its tabs)
- inventory: InventoryPage, InventoryItemsTable, InventoryActionsMenu, PackagesView
- tags: TagsSettingsPage · staff: StaffPage · discounts: DiscountTab
- sms: SmsWalletPage · insurances: TenantInsuranceContracts
- clinic_doctors: ClinicDoctorsPage + ClinicDoctorsManager (props, default true)
- patients: PatientsListPage, MyPatientsPage, PatientDetailPage (records/notes/
  sessions/attachments/calls/wallet — create/update/delete split)
- appointments: AppointmentsPage (add + empty-slot booking gated by create),
  TurnsTable (status dropdown → read-only badge without update_status; actions
  menu hidden without manage/cancel)
- appointment_settings: AppointmentSettingsPage + ClinicAppointmentSettingsPage
  pass readOnly to ScheduleSection + FreeVisitPrice (new readOnly prop)

Not gated: view/read, search, filter, tabs, navigation, export, and modal
submit buttons reachable only via an already-gated trigger.

tsc clean; full frontend suite 501/501 passes.

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

assets/admin/components/TenantInsuranceContracts.tsx

@@ -6,6 +6,7 @@ import { api } from '../lib/api';
 import type { ApiResponse } from '../lib/api';
 import { formatRial, formatNumber, formatDate } from '../lib/utils';
 import { useAuthStore } from '../stores/authStore';
+import { usePermissions } from '../hooks/usePermissions';
 import SearchableSelect from './ui/SearchableSelect';
 import type { ClinicDoctorItem } from './ClinicDoctorsManager';
 import InsuranceModal, { Contract, InsuranceOption, KIND_LABEL, buildInsurancePayload } from './InsuranceModal';
@@ -42,6 +43,10 @@ export function contractSummary(c: Contract): string {
 export default function TenantInsuranceContracts() {
   const qc = useQueryClient();
   const { dbUuid, context, availableContexts } = useAuthStore();
+  // مجوزهای منشی؛ برای owner/پزشک همیشه true (usePermissions بدون context آزاد است).
+  const { can } = usePermissions();
+  const canCreate = can('insurances', 'create');
+  const canUpdate = can('insurances', 'update');
   const [tab, setTab] = useState<Kind>('basic');
   const [modalOpen, setModalOpen] = useState(false);
   const [editContract, setEditContract] = useState<Contract | null>(null);
@@ -148,9 +153,11 @@ export default function TenantInsuranceContracts() {
     <div className="card" style={{ padding: 20 }}>
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
         <h2 style={{ fontSize: 15, fontWeight: 700, margin: 0 }}>مدیریت بیمه</h2>
-        <button className="btn primary sm" onClick={openAdd}>
-          <PlusIcon style={{ width: 15 }} /> {activeKind.addLabel}
-        </button>
+        {canCreate && (
+          <button className="btn primary sm" onClick={openAdd}>
+            <PlusIcon style={{ width: 15 }} /> {activeKind.addLabel}
+          </button>
+        )}
       </div>
 
       {showDoctorPicker && (
@@ -225,6 +232,7 @@ export default function TenantInsuranceContracts() {
               onEdit={() => openEdit(c)}
               onToggleStatus={() => toggleMut.mutate(c)}
               statusPending={toggleMut.isPending}
+              canUpdate={canUpdate}
             />
           ))}
         </div>
@@ -251,9 +259,10 @@ interface RowProps {
   onEdit: () => void;
   onToggleStatus: () => void;
   statusPending?: boolean;
+  canUpdate?: boolean;
 }
 
-function ContractCard({ contract: c, open, onToggleRow, onEdit, onToggleStatus, statusPending }: RowProps) {
+function ContractCard({ contract: c, open, onToggleRow, onEdit, onToggleStatus, statusPending, canUpdate }: RowProps) {
   const stop = (fn: () => void) => (e: React.MouseEvent) => { e.stopPropagation(); fn(); };
   return (
     <div style={{ border: '1px solid var(--border)', borderRadius: 12, padding: 14, cursor: 'pointer' }} onClick={onToggleRow}>
@@ -262,14 +271,18 @@ function ContractCard({ contract: c, open, onToggleRow, onEdit, onToggleStatus,
           <ChevronDownIcon style={{ width: 15, color: 'var(--text-3)', transition: 'transform .2s var(--ease)', transform: open ? 'rotate(180deg)' : 'none' }} />
           <div style={{ fontWeight: 700, fontSize: 14 }}>{c.insurance_name ?? `#${c.insurance_id}`}</div>
         </div>
-        <button className="mini-btn" title="ویرایش" onClick={stop(onEdit)}>
-          <PencilIcon style={{ width: 15 }} />
-        </button>
+        {canUpdate && (
+          <button className="mini-btn" title="ویرایش" onClick={stop(onEdit)}>
+            <PencilIcon style={{ width: 15 }} />
+          </button>
+        )}
       </div>
       <div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 8 }}>{contractSummary(c)}</div>
-      <div style={{ display: 'flex', justifyContent: 'flex-end' }} onClick={stop(() => {})}>
-        <StatusToggle contract={c} onToggle={stop(onToggleStatus)} disabled={statusPending} />
-      </div>
+      {canUpdate && (
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }} onClick={stop(() => {})}>
+          <StatusToggle contract={c} onToggle={stop(onToggleStatus)} disabled={statusPending} />
+        </div>
+      )}
       {open && <div style={{ marginTop: 10 }}><ContractDetails contract={c} /></div>}
     </div>
   );