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
@@ -1,45 +1,54 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { screen, fireEvent } from '@testing-library/react';
|
||||
import { renderWithProviders } from '../../test/utils';
|
||||
import SettingsLayout, { SETTINGS_MENU } from './SettingsLayout';
|
||||
import SettingsLayout, { menuForRole } from './SettingsLayout';
|
||||
import { useAuthStore } from '../../stores/authStore';
|
||||
|
||||
beforeEach(() => {
|
||||
useAuthStore.setState({ primaryRole: 'doctor' });
|
||||
});
|
||||
|
||||
describe('SettingsLayout', () => {
|
||||
it('renders every settings menu item and the section content', () => {
|
||||
it('renders every menu item available to the role, plus the content', () => {
|
||||
renderWithProviders(
|
||||
<SettingsLayout active="subscription">
|
||||
<div>محتوای اشتراک</div>
|
||||
</SettingsLayout>,
|
||||
);
|
||||
|
||||
for (const item of SETTINGS_MENU) {
|
||||
for (const item of menuForRole('doctor')) {
|
||||
expect(screen.getByText(item.label)).toBeInTheDocument();
|
||||
}
|
||||
expect(screen.getByText('محتوای اشتراک')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('marks the active item with aria-current=page', () => {
|
||||
renderWithProviders(
|
||||
<SettingsLayout active="subscription"><div /></SettingsLayout>,
|
||||
);
|
||||
renderWithProviders(<SettingsLayout active="subscription"><div /></SettingsLayout>);
|
||||
const active = screen.getByText('خرید اشتراک').closest('a');
|
||||
expect(active).toHaveAttribute('aria-current', 'page');
|
||||
expect(active).toHaveAttribute('href', '/admin/subscription');
|
||||
});
|
||||
|
||||
it('renders every menu item as a navigable link', () => {
|
||||
renderWithProviders(
|
||||
<SettingsLayout active="subscription"><div /></SettingsLayout>,
|
||||
);
|
||||
// all items are now wired to a route
|
||||
it('renders every visible item as a navigable link', () => {
|
||||
renderWithProviders(<SettingsLayout active="subscription"><div /></SettingsLayout>);
|
||||
expect(screen.getByText('مدیریت نوبت دهی').closest('a')).toHaveAttribute('href', '/admin/appointment-settings');
|
||||
expect(screen.getByText('برچسبها').closest('a')).toHaveAttribute('href', '/admin/tags-settings');
|
||||
expect(screen.queryByText('بهزودی')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('hides role-specific items from other roles', () => {
|
||||
// doctor sees مدیریت پزشک but not مدیریت مطب (clinic-only)
|
||||
renderWithProviders(<SettingsLayout active="subscription"><div /></SettingsLayout>);
|
||||
expect(screen.getByText('مدیریت پزشک')).toBeInTheDocument();
|
||||
expect(screen.queryByText('مدیریت مطب')).not.toBeInTheDocument();
|
||||
|
||||
// clinic sees مدیریت مطب but not مدیریت پزشک / نوبت دهی
|
||||
expect(menuForRole('clinic').map((i) => i.key)).toContain('clinic');
|
||||
expect(menuForRole('clinic').map((i) => i.key)).not.toContain('doctor');
|
||||
expect(menuForRole('clinic').map((i) => i.key)).not.toContain('appointment');
|
||||
});
|
||||
|
||||
it('filters the menu by the search query', () => {
|
||||
renderWithProviders(
|
||||
<SettingsLayout active="subscription"><div /></SettingsLayout>,
|
||||
);
|
||||
renderWithProviders(<SettingsLayout active="subscription"><div /></SettingsLayout>);
|
||||
fireEvent.change(screen.getByLabelText('جستجو در تنظیمات'), { target: { value: 'اشتراک' } });
|
||||
expect(screen.getByText('خرید اشتراک')).toBeInTheDocument();
|
||||
expect(screen.queryByText('خدمات')).not.toBeInTheDocument();
|
||||
|
||||
@@ -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 (
|
||||
|
||||
@@ -1,18 +1,25 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import { describe, it, expect, beforeEach } from 'vitest';
|
||||
import { screen } from '@testing-library/react';
|
||||
import { renderWithProviders } from '../test/utils';
|
||||
import SettingsMenuPage from './SettingsMenuPage';
|
||||
import { SETTINGS_MENU } from '../components/layout/SettingsLayout';
|
||||
import { menuForRole } from '../components/layout/SettingsLayout';
|
||||
import { useAuthStore } from '../stores/authStore';
|
||||
|
||||
beforeEach(() => {
|
||||
useAuthStore.setState({ primaryRole: 'doctor' });
|
||||
});
|
||||
|
||||
describe('SettingsMenuPage', () => {
|
||||
it('lists every settings section', () => {
|
||||
it('lists the settings sections available to the current role', () => {
|
||||
renderWithProviders(<SettingsMenuPage />);
|
||||
for (const item of SETTINGS_MENU) {
|
||||
for (const item of menuForRole('doctor')) {
|
||||
expect(screen.getByText(item.label)).toBeInTheDocument();
|
||||
}
|
||||
// clinic-only section is not shown to a doctor
|
||||
expect(screen.queryByText('مدیریت مطب')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('links every implemented section', () => {
|
||||
it('links every section to its route', () => {
|
||||
renderWithProviders(<SettingsMenuPage />);
|
||||
expect(screen.getByText('خرید اشتراک').closest('a')).toHaveAttribute('href', '/admin/subscription');
|
||||
expect(screen.getByText('مدیریت نوبت دهی').closest('a')).toHaveAttribute('href', '/admin/appointment-settings');
|
||||
|
||||
@@ -1,16 +1,19 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
|
||||
import { SETTINGS_MENU } from '../components/layout/SettingsLayout';
|
||||
import { menuForRole } from '../components/layout/SettingsLayout';
|
||||
import { useAuthStore } from '../stores/authStore';
|
||||
|
||||
/**
|
||||
* SettingsMenuPage — the settings landing list for doctor/clinic users.
|
||||
* A full-width tappable list of settings sections (mobile-first, matches the
|
||||
* Figma mobile design). Implemented sections link to their route; the rest
|
||||
* render as disabled rows labelled "بهزودی". On desktop the same list is shown;
|
||||
* each section itself renders the desktop shell via SettingsLayout.
|
||||
* A full-width tappable list of the settings sections available to the current
|
||||
* role (mobile-first, matches the Figma mobile design). Each section links to
|
||||
* its route; on desktop the same sections render the shell via SettingsLayout.
|
||||
*/
|
||||
export default function SettingsMenuPage() {
|
||||
const primaryRole = useAuthStore((s) => s.primaryRole);
|
||||
const items = menuForRole(primaryRole);
|
||||
|
||||
return (
|
||||
<div className="fade-in" style={{ maxWidth: 720, margin: '0 auto' }}>
|
||||
<h1 className="section-title" style={{ marginBottom: 16 }}>تنظیمات</h1>
|
||||
@@ -19,7 +22,7 @@ export default function SettingsMenuPage() {
|
||||
background: 'var(--surface)', border: '1px solid var(--border)',
|
||||
borderRadius: 'var(--r-lg)', overflow: 'hidden',
|
||||
}}>
|
||||
{SETTINGS_MENU.map((item, idx) => {
|
||||
{items.map((item, idx) => {
|
||||
const Icon = item.icon;
|
||||
const disabled = !item.to;
|
||||
const rowStyle: React.CSSProperties = {
|
||||
|
||||
Reference in New Issue
Block a user