hamedandClaude Opus 4.8
3fe007b272
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>
65 lines
2.7 KiB
TypeScript
65 lines
2.7 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
|
|
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 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>
|
|
|
|
<div style={{
|
|
background: 'var(--surface)', border: '1px solid var(--border)',
|
|
borderRadius: 'var(--r-lg)', overflow: 'hidden',
|
|
}}>
|
|
{items.map((item, idx) => {
|
|
const Icon = item.icon;
|
|
const disabled = !item.to;
|
|
const rowStyle: React.CSSProperties = {
|
|
display: 'flex', alignItems: 'center', gap: 12,
|
|
padding: '16px 18px', fontSize: 15, fontFamily: 'inherit',
|
|
borderTop: idx === 0 ? 'none' : '1px solid var(--border)',
|
|
color: disabled ? 'var(--text-3)' : 'var(--text)',
|
|
cursor: disabled ? 'not-allowed' : 'pointer',
|
|
background: 'transparent', width: '100%', textAlign: 'right',
|
|
};
|
|
const inner = (
|
|
<>
|
|
<Icon style={{ width: 20, height: 20, flexShrink: 0, color: disabled ? 'var(--text-3)' : 'var(--primary)' }} />
|
|
<span style={{ flex: 1, fontWeight: 600 }}>{item.label}</span>
|
|
{disabled
|
|
? <span style={{ fontSize: 11, color: 'var(--text-3)' }}>بهزودی</span>
|
|
: <ChevronLeftIcon style={{ width: 18, color: 'var(--text-3)', flexShrink: 0 }} />}
|
|
</>
|
|
);
|
|
return disabled ? (
|
|
<button key={item.key} type="button" disabled style={{ ...rowStyle, border: 'none', borderTop: rowStyle.borderTop }}>
|
|
{inner}
|
|
</button>
|
|
) : (
|
|
<Link
|
|
key={item.key}
|
|
to={item.to!}
|
|
style={rowStyle}
|
|
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
|
|
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
|
|
>
|
|
{inner}
|
|
</Link>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|