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/appointments/TurnsTable.tsx

@@ -1,6 +1,6 @@
 import { UserCircleIcon, PhoneIcon } from '@heroicons/react/24/outline';
 import type { Appointment } from '../../types';
-import AppointmentStatusDropdown from '../ui/AppointmentStatusDropdown';
+import AppointmentStatusDropdown, { STATUS_META } from '../ui/AppointmentStatusDropdown';
 import AppointmentActionsMenu from '../AppointmentActions';
 
 /**
@@ -11,12 +11,16 @@ const th: React.CSSProperties = { padding: '10px 14px', textAlign: 'right', font
 const td: React.CSSProperties = { padding: '10px 14px', textAlign: 'right', color: 'var(--text)', verticalAlign: 'middle', fontSize: 13 };
 
 export default function TurnsTable({
-  items, loading, queryKey, showDoctor,
+  items, loading, queryKey, showDoctor, canManage = true, canCancel = true,
 }: {
   items: Appointment[];
   loading: boolean;
   queryKey: unknown[];
   showDoctor: boolean;
+  /** مجوز تغییر وضعیت (منشی)؛ پیش‌فرض true برای owner/پزشک. */
+  canManage?: boolean;
+  /** مجوز لغو نوبت (منشی)؛ پیش‌فرض true. */
+  canCancel?: boolean;
 }) {
   if (loading) return <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-3)' }}>در حال بارگذاری...</div>;
   if (!items.length) return <div style={{ padding: 40, textAlign: 'center', color: 'var(--text-3)' }}>نوبتی برای این روز ثبت نشده است</div>;
@@ -60,10 +64,18 @@ export default function TurnsTable({
               <td style={td}>{a.service_item?.name || '—'}</td>
               <td style={td}>{a.staff?.full_name || '—'}</td>
               <td style={td}>
-                <AppointmentStatusDropdown uuid={a.uuid} currentStatus={a.status} version={a.version} queryKey={queryKey} />
+                {canManage ? (
+                  <AppointmentStatusDropdown uuid={a.uuid} currentStatus={a.status} version={a.version} queryKey={queryKey} />
+                ) : (
+                  <span className="badge" style={{ color: STATUS_META[a.status]?.color ?? 'var(--text-2)' }}>
+                    {STATUS_META[a.status]?.label ?? a.status}
+                  </span>
+                )}
               </td>
               <td style={td}>
-                <AppointmentActionsMenu appointment={a} queryKey={queryKey} />
+                {(canManage || canCancel)
+                  ? <AppointmentActionsMenu appointment={a} queryKey={queryKey} />
+                  : <span style={{ color: 'var(--text-3)' }}>—</span>}
               </td>
             </tr>
           ))}