feat(settings): role-aware settings menu

Add an optional `roles` filter to the settings menu and hide items that don't
apply to the current user's role, so a doctor no longer sees "مدیریت مطب"
(clinic-only) and a clinic no longer sees "مدیریت پزشک" / "مدیریت نوبت دهی"
(doctor-only) — avoiding menu entries that just redirect. Both the desktop
shell (SettingsLayout) and the mobile list (SettingsMenuPage) filter via the
shared `menuForRole` helper.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hamed
2026-07-13 14:26:24 +03:30
co-authored by Claude Opus 4.8
parent 1a8fab1131
commit 3fe007b272
4 changed files with 60 additions and 32 deletions
@@ -1,5 +1,6 @@
import React, { useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { useAuthStore } from '../../stores/authStore';
import {
CreditCardIcon, UserIcon, CalendarDaysIcon, BuildingOffice2Icon,
WrenchScrewdriverIcon, BanknotesIcon, UsersIcon, ShieldCheckIcon,
@@ -15,13 +16,15 @@ export type SettingsMenuItem = {
label: string;
icon: React.ElementType;
to?: string;
/** when set, the item is only shown to these roles (omit = every role) */
roles?: string[];
};
export const SETTINGS_MENU: SettingsMenuItem[] = [
{ key: 'subscription', label: 'خرید اشتراک', icon: CreditCardIcon, to: '/admin/subscription' },
{ key: 'doctor', label: 'مدیریت پزشک', icon: UserIcon, to: '/admin/profile' },
{ key: 'appointment', label: 'مدیریت نوبت دهی', icon: CalendarDaysIcon, to: '/admin/appointment-settings' },
{ key: 'clinic', label: 'مدیریت مطب', icon: BuildingOffice2Icon, to: '/admin/my-clinic' },
{ key: 'doctor', label: 'مدیریت پزشک', icon: UserIcon, to: '/admin/profile', roles: ['doctor'] },
{ key: 'appointment', label: 'مدیریت نوبت دهی', icon: CalendarDaysIcon, to: '/admin/appointment-settings', roles: ['doctor'] },
{ key: 'clinic', label: 'مدیریت مطب', icon: BuildingOffice2Icon, to: '/admin/my-clinic', roles: ['clinic'] },
{ key: 'services', label: 'خدمات', icon: WrenchScrewdriverIcon, to: '/admin/clinic-services' },
{ key: 'payment', label: 'مدیریت پرداخت', icon: BanknotesIcon, to: '/admin/my-financial' },
{ key: 'secretary', label: 'مدیریت منشی', icon: UsersIcon, to: '/admin/my-secretaries' },
@@ -31,6 +34,11 @@ export const SETTINGS_MENU: SettingsMenuItem[] = [
{ key: 'account', label: 'حساب کاربری', icon: UserCircleIcon, to: '/admin/account-settings' },
];
/** Menu items visible to the given role (items without `roles` are shown to all). */
export function menuForRole(role: string | null | undefined): SettingsMenuItem[] {
return SETTINGS_MENU.filter((i) => !i.roles || (role != null && i.roles.includes(role)));
}
// ── Shared item styling ──────────────────────────────────────────────────────
function itemStyle(active: boolean, disabled: boolean): React.CSSProperties {
return {
@@ -82,9 +90,10 @@ function MenuRow({ item, active }: { item: SettingsMenuItem; active: boolean })
*/
export default function SettingsLayout({ active, children }: { active: string; children: React.ReactNode }) {
const [query, setQuery] = useState('');
const primaryRole = useAuthStore((s) => s.primaryRole);
const items = useMemo(
() => SETTINGS_MENU.filter((i) => i.label.includes(query.trim())),
[query],
() => menuForRole(primaryRole).filter((i) => i.label.includes(query.trim())),
[query, primaryRole],
);
return (