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>
This commit is contained in:
@@ -2,6 +2,7 @@ import React, { useLayoutEffect, useRef, useState } from 'react';
|
||||
import { EllipsisHorizontalCircleIcon, PencilSquareIcon, TrashIcon } from '@heroicons/react/24/outline';
|
||||
import Portal from '../ui/Portal';
|
||||
import type { InventoryItem } from '../../hooks/useInventory';
|
||||
import { usePermissions } from '../../hooks/usePermissions';
|
||||
|
||||
interface Props {
|
||||
item: InventoryItem;
|
||||
@@ -17,7 +18,14 @@ const MENU_W = 160;
|
||||
* table container's `overflow: hidden`.
|
||||
*/
|
||||
export default function InventoryActionsMenu({ item, onEdit, onDelete }: Props) {
|
||||
const { can } = usePermissions();
|
||||
const canUpdate = can('inventory', 'update');
|
||||
const canDelete = can('inventory', 'delete');
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
// منشیِ بدون هیچ مجوزِ ویرایش/حذف، منوی «عملیات» را اصلاً نبیند.
|
||||
if (!canUpdate && !canDelete) return null;
|
||||
|
||||
const [pos, setPos] = useState<{ top: number; left: number }>({ top: 0, left: 0 });
|
||||
const triggerRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
@@ -65,32 +73,36 @@ export default function InventoryActionsMenu({ item, onEdit, onDelete }: Props)
|
||||
borderRadius: 12, boxShadow: 'var(--shadow-lg)', overflow: 'hidden',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => { setOpen(false); onEdit(item); }}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8, width: '100%',
|
||||
padding: '12px 16px', background: 'var(--primary-soft)', border: 'none',
|
||||
cursor: 'pointer', fontSize: 14, fontWeight: 600, color: 'var(--text)',
|
||||
}}
|
||||
>
|
||||
<PencilSquareIcon style={{ width: 20, height: 20 }} />
|
||||
ویرایش
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => { setOpen(false); onDelete(item); }}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8, width: '100%',
|
||||
padding: '12px 16px', background: 'transparent', border: 'none',
|
||||
cursor: 'pointer', fontSize: 14, color: 'var(--danger)',
|
||||
}}
|
||||
>
|
||||
<TrashIcon style={{ width: 20, height: 20 }} />
|
||||
حذف
|
||||
</button>
|
||||
{canUpdate && (
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => { setOpen(false); onEdit(item); }}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8, width: '100%',
|
||||
padding: '12px 16px', background: 'var(--primary-soft)', border: 'none',
|
||||
cursor: 'pointer', fontSize: 14, fontWeight: 600, color: 'var(--text)',
|
||||
}}
|
||||
>
|
||||
<PencilSquareIcon style={{ width: 20, height: 20 }} />
|
||||
ویرایش
|
||||
</button>
|
||||
)}
|
||||
{canDelete && (
|
||||
<button
|
||||
type="button"
|
||||
role="menuitem"
|
||||
onClick={() => { setOpen(false); onDelete(item); }}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 8, width: '100%',
|
||||
padding: '12px 16px', background: 'transparent', border: 'none',
|
||||
cursor: 'pointer', fontSize: 14, color: 'var(--danger)',
|
||||
}}
|
||||
>
|
||||
<TrashIcon style={{ width: 20, height: 20 }} />
|
||||
حذف
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</Portal>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user