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
+9 -6
View File
@@ -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 = {