82 lines
3.6 KiB
TypeScript
82 lines
3.6 KiB
TypeScript
import React from 'react';
|
|
import { Link } from 'react-router';
|
|
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
|
|
import { groupedMenuForRole } from '../components/layout/settingsMenu';
|
|
import { useAuthStore } from '../stores/authStore';
|
|
import { usePermissions } from '../hooks/usePermissions';
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
* روی موبایل کل این فهرست بالای محتوا مینشیند، پس ۱۶ ردیفِ یکدست یعنی اسکرول
|
|
* طولانیِ بینشانه. دستهها همان دستههای سایدبار دسکتاپاند (`settingsMenu.ts`).
|
|
*/
|
|
export default function SettingsMenuPage() {
|
|
const primaryRole = useAuthStore((s) => s.primaryRole);
|
|
const scope = useAuthStore((s) => s.context?.scope);
|
|
const { can } = usePermissions();
|
|
const groups = groupedMenuForRole(primaryRole, can, scope);
|
|
|
|
return (
|
|
<div className="fade-in" style={{ maxWidth: 720, margin: '0 auto' }}>
|
|
<h1 className="section-title" style={{ marginBottom: 16 }}>تنظیمات</h1>
|
|
|
|
{groups.map((group) => (
|
|
<section key={group.key} aria-label={group.label} style={{ marginBottom: 20 }}>
|
|
<h2 style={{
|
|
fontSize: 13, fontWeight: 700, color: 'var(--text-3)',
|
|
marginBottom: 8, paddingInlineStart: 4,
|
|
}}>
|
|
{group.label}
|
|
</h2>
|
|
|
|
<div style={{
|
|
background: 'var(--surface)', border: '1px solid var(--border)',
|
|
borderRadius: 'var(--r-lg)', overflow: 'hidden',
|
|
}}>
|
|
{group.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>
|
|
</section>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|