feat(settings): implement grouped menu structure and update related components
This commit is contained in:
hamed
@@ -3,7 +3,7 @@ import { Link } from 'react-router';
|
||||
import { SearchHeaderP } from '../../pages/subscriptionIcons';
|
||||
import { useAuthStore } from '../../stores/authStore';
|
||||
import { usePermissions } from '../../hooks/usePermissions';
|
||||
import { menuForRole, type SettingsMenuItem } from './settingsMenu';
|
||||
import { groupMenu, menuForRole, type SettingsMenuItem } from './settingsMenu';
|
||||
|
||||
/**
|
||||
* سایدبار تنظیمات — همان فهرستی که `SettingsMenuPage` روی موبایل نشان میدهد
|
||||
@@ -21,6 +21,7 @@ const SECURITY_ITEM: SettingsMenuItem = {
|
||||
key: 'security',
|
||||
label: 'تنظیمات',
|
||||
icon: () => null,
|
||||
group: 'account',
|
||||
alwaysOpen: true,
|
||||
disabled: true,
|
||||
};
|
||||
@@ -30,13 +31,18 @@ export default function PurchaseSubscriptionSidebar({ active }: { active: string
|
||||
const primaryRole = useAuthStore((s) => s.primaryRole);
|
||||
const scope = useAuthStore((s) => s.context?.scope);
|
||||
const { can } = usePermissions();
|
||||
const items = useMemo(
|
||||
() => [
|
||||
...menuForRole(primaryRole, can, scope).filter((i) => !HIDDEN_KEYS.has(i.key)),
|
||||
SECURITY_ITEM,
|
||||
].filter((i) => i.label.includes(query.trim())),
|
||||
// گروهها بعد از فیلترِ جستجو ساخته میشوند تا تیترِ دستهای که هیچ نتیجهای ندارد
|
||||
// بالای فضای خالی نماند.
|
||||
const groups = useMemo(
|
||||
() => groupMenu(
|
||||
[
|
||||
...menuForRole(primaryRole, can, scope).filter((i) => !HIDDEN_KEYS.has(i.key)),
|
||||
SECURITY_ITEM,
|
||||
].filter((i) => i.label.includes(query.trim())),
|
||||
),
|
||||
[query, primaryRole, scope, can],
|
||||
);
|
||||
const itemCount = groups.reduce((sum, g) => sum + g.items.length, 0);
|
||||
|
||||
return (
|
||||
<aside
|
||||
@@ -74,36 +80,46 @@ export default function PurchaseSubscriptionSidebar({ active }: { active: string
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
{items.map((item) => {
|
||||
const isActive = item.key === active;
|
||||
const rowStyle: React.CSSProperties = {
|
||||
borderRadius: 12, height: 44, marginBottom: 8,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
|
||||
padding: '0 14px', fontSize: 16, fontWeight: isActive ? 700 : 500,
|
||||
lineHeight: 1, textAlign: 'right',
|
||||
background: isActive ? 'var(--accent)' : 'transparent',
|
||||
color: isActive ? 'var(--on-primary)' : 'var(--text-2)',
|
||||
cursor: item.to ? 'pointer' : 'not-allowed',
|
||||
transition: 'background .14s',
|
||||
};
|
||||
const inner = <span style={{ flex: 1 }}>{item.label}</span>;
|
||||
if (!item.to || item.disabled) {
|
||||
return <div key={item.key} style={{ ...rowStyle, opacity: 0.55 }}>{inner}</div>;
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
key={item.key}
|
||||
to={item.to}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
style={rowStyle}
|
||||
onMouseEnter={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
|
||||
onMouseLeave={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
|
||||
>
|
||||
{inner}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
{items.length === 0 && (
|
||||
{groups.map((group, groupIdx) => (
|
||||
<section key={group.key} aria-label={group.label}>
|
||||
<div style={{
|
||||
fontSize: 12, fontWeight: 700, color: 'var(--text-3)', textAlign: 'right',
|
||||
padding: '0 14px', marginTop: groupIdx === 0 ? 0 : 14, marginBottom: 6,
|
||||
}}>
|
||||
{group.label}
|
||||
</div>
|
||||
{group.items.map((item) => {
|
||||
const isActive = item.key === active;
|
||||
const rowStyle: React.CSSProperties = {
|
||||
borderRadius: 12, height: 44, marginBottom: 8,
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'flex-start',
|
||||
padding: '0 14px', fontSize: 16, fontWeight: isActive ? 700 : 500,
|
||||
lineHeight: 1, textAlign: 'right',
|
||||
background: isActive ? 'var(--accent)' : 'transparent',
|
||||
color: isActive ? 'var(--on-primary)' : 'var(--text-2)',
|
||||
cursor: item.to ? 'pointer' : 'not-allowed',
|
||||
transition: 'background .14s',
|
||||
};
|
||||
const inner = <span style={{ flex: 1 }}>{item.label}</span>;
|
||||
if (!item.to || item.disabled) {
|
||||
return <div key={item.key} style={{ ...rowStyle, opacity: 0.55 }}>{inner}</div>;
|
||||
}
|
||||
return (
|
||||
<Link
|
||||
key={item.key}
|
||||
to={item.to}
|
||||
aria-current={isActive ? 'page' : undefined}
|
||||
style={rowStyle}
|
||||
onMouseEnter={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'var(--surface-2)'; }}
|
||||
onMouseLeave={(e) => { if (!isActive) (e.currentTarget as HTMLElement).style.background = 'transparent'; }}
|
||||
>
|
||||
{inner}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</section>
|
||||
))}
|
||||
{itemCount === 0 && (
|
||||
<div style={{ padding: '12px 4px', fontSize: 13, color: 'var(--text-3)', textAlign: 'center' }}>
|
||||
موردی یافت نشد
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import {
|
||||
SETTINGS_GROUPS, SETTINGS_MENU, groupMenu, groupedMenuForRole, menuForRole,
|
||||
} from './settingsMenu';
|
||||
|
||||
/**
|
||||
* منو یک فهرست تختِ ۱۶ ردیفی بود که ترتیبش از تاریخِ اضافهشدنِ آیتمها میآمد:
|
||||
* «خرید اشتراک» — کممصرفترین — ردیف اول بود و «مدیریت پرداخت» وسط آیتمهای
|
||||
* نوبتدهی. این تستها همان چیدمان تازه را قفل میکنند.
|
||||
*/
|
||||
describe('گروهبندی منوی تنظیمات', () => {
|
||||
it('هر آیتم منو دقیقاً به یکی از گروههای تعریفشده تعلق دارد', () => {
|
||||
const known = new Set(SETTINGS_GROUPS.map((g) => g.key));
|
||||
|
||||
for (const item of SETTINGS_MENU) {
|
||||
expect(known.has(item.group), `${item.key} گروه نامعتبر دارد`).toBe(true);
|
||||
}
|
||||
});
|
||||
|
||||
it('گروهها به ترتیب تعریفشده برمیگردند', () => {
|
||||
const keys = groupedMenuForRole('clinic').map((g) => g.key);
|
||||
|
||||
expect(keys).toEqual(['practice', 'scheduling', 'patients', 'finance', 'account']);
|
||||
});
|
||||
|
||||
it('خرید اشتراک در گروه آخر است، نه ردیف اول', () => {
|
||||
const groups = groupedMenuForRole('doctor');
|
||||
const last = groups[groups.length - 1];
|
||||
|
||||
expect(last.key).toBe('account');
|
||||
expect(last.items.map((i) => i.key)).toEqual(['subscription', 'account']);
|
||||
expect(menuForRole('doctor')[0].key).not.toBe('subscription');
|
||||
});
|
||||
|
||||
it('مدیریت پرداخت کنار بیمه و تخفیف است، نه وسط نوبتدهی', () => {
|
||||
const finance = groupedMenuForRole('doctor').find((g) => g.key === 'finance');
|
||||
|
||||
expect(finance?.items.map((i) => i.key)).toEqual(['payment', 'insurance', 'discounts', 'sms']);
|
||||
});
|
||||
|
||||
it('گروه خالی برنمیگردد', () => {
|
||||
// منشیِ فقط-با-مجوزِ پرداخت: نباید تیتر «نوبتدهی» بالای فضای خالی ببیند.
|
||||
const can = (resource: string) => resource === 'payments';
|
||||
const groups = groupedMenuForRole('secretary', can);
|
||||
|
||||
expect(groups.map((g) => g.key)).toEqual(['finance', 'account']);
|
||||
for (const group of groups) {
|
||||
expect(group.items.length).toBeGreaterThan(0);
|
||||
}
|
||||
});
|
||||
|
||||
it('فیلترِ جستجو گروه بینتیجه را حذف میکند', () => {
|
||||
const filtered = groupMenu(menuForRole('doctor').filter((i) => i.label.includes('بیمه')));
|
||||
|
||||
expect(filtered).toHaveLength(1);
|
||||
expect(filtered[0].key).toBe('finance');
|
||||
expect(filtered[0].items.map((i) => i.key)).toEqual(['insurance']);
|
||||
});
|
||||
|
||||
it('گروهبندی هیچ آیتمی را نمیاندازد و تکراری نمیسازد', () => {
|
||||
for (const role of ['doctor', 'clinic']) {
|
||||
const flat = menuForRole(role);
|
||||
const grouped = groupedMenuForRole(role).flatMap((g) => g.items);
|
||||
|
||||
expect(grouped).toHaveLength(flat.length);
|
||||
expect(new Set(grouped.map((i) => i.to)).size).toBe(flat.length);
|
||||
}
|
||||
});
|
||||
|
||||
it('گِیت نقشی بعد از گروهبندی هم برقرار است', () => {
|
||||
const practice = groupedMenuForRole('doctor').find((g) => g.key === 'practice');
|
||||
|
||||
expect(practice?.items.map((i) => i.key)).not.toContain('clinic-doctors');
|
||||
expect(practice?.items.map((i) => i.key)).toContain('doctor');
|
||||
});
|
||||
});
|
||||
@@ -13,10 +13,35 @@ import {
|
||||
* قبلاً هرکدام فهرست خودش را داشت و آیتم تازه فقط در یکی ظاهر میشد؛ «منابع» و
|
||||
* «دستهبندیها» در موبایل بودند و در سایدبار نبودند.
|
||||
*/
|
||||
/**
|
||||
* دستههای منو، به ترتیبِ نمایش.
|
||||
*
|
||||
* ترتیب از «چقدر به کارِ روزمره نزدیک است» میآید، نه از تاریخِ اضافهشدنِ آیتم:
|
||||
* اول ساختارِ مطب، بعد نوبتدهی، بعد بیماران، بعد مالی، و ته فهرست حساب و اشتراک
|
||||
* که ماهی یکبار سراغش میروند. پیش از این فهرست تخت بود و «خرید اشتراک» — کممصرفترین
|
||||
* آیتم — اولین ردیف بود، در حالی که «مدیریت پرداخت» وسط آیتمهای نوبتدهی افتاده بود.
|
||||
*/
|
||||
export const SETTINGS_GROUPS = [
|
||||
{ key: 'practice', label: 'مطب و کلینیک' },
|
||||
{ key: 'scheduling', label: 'نوبتدهی' },
|
||||
{ key: 'patients', label: 'بیماران' },
|
||||
{ key: 'finance', label: 'مالی' },
|
||||
{ key: 'account', label: 'حساب و اشتراک' },
|
||||
] as const;
|
||||
|
||||
export type SettingsGroupKey = (typeof SETTINGS_GROUPS)[number]['key'];
|
||||
|
||||
export type SettingsMenuGroup = {
|
||||
key: SettingsGroupKey;
|
||||
label: string;
|
||||
items: SettingsMenuItem[];
|
||||
};
|
||||
|
||||
export type SettingsMenuItem = {
|
||||
key: string;
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
group: SettingsGroupKey;
|
||||
to?: string;
|
||||
/** when set, the item is only shown to these roles (omit = every role) */
|
||||
roles?: string[];
|
||||
@@ -28,26 +53,36 @@ export type SettingsMenuItem = {
|
||||
disabled?: boolean;
|
||||
};
|
||||
|
||||
// ترتیب همین آرایه ترتیبِ نمایش است؛ آیتمهای هر دسته پشت سر هم میآیند.
|
||||
export const SETTINGS_MENU: SettingsMenuItem[] = [
|
||||
{ key: 'subscription', label: 'خرید اشتراک', icon: CreditCardIcon, to: '/admin/subscription', perm: ['subscription', 'view'] },
|
||||
{ key: 'doctor', label: 'مدیریت پزشک', icon: UserIcon, to: '/admin/profile', roles: ['doctor'] },
|
||||
{ key: 'appointment', label: 'مدیریت نوبت دهی', icon: CalendarDaysIcon, to: '/admin/appointment-settings', roles: ['doctor'], perm: ['appointment_settings', 'view'] },
|
||||
{ key: 'appointment', label: 'مدیریت نوبت دهی', icon: CalendarDaysIcon, to: '/admin/settings/appointment-settings', roles: ['clinic'], perm: ['appointment_settings', 'view'] },
|
||||
{ key: 'clinic-doctors', label: 'پزشکان کلینیک', icon: BuildingOffice2Icon, to: '/admin/settings/clinic-doctors', roles: ['clinic'], perm: ['clinic_doctors', 'view'] },
|
||||
// ── مطب و کلینیک — چه کسی اینجا کار میکند و چه چیزی ارائه میشود ───────────
|
||||
{ key: 'doctor', label: 'مدیریت پزشک', icon: UserIcon, group: 'practice', to: '/admin/profile', roles: ['doctor'] },
|
||||
{ key: 'clinic-doctors', label: 'پزشکان کلینیک', icon: BuildingOffice2Icon, group: 'practice', to: '/admin/settings/clinic-doctors', roles: ['clinic'], perm: ['clinic_doctors', 'view'] },
|
||||
{ key: 'practice-domain', label: 'حوزهٔ فعالیت', icon: SparklesIcon, group: 'practice', to: '/admin/settings/practice-domain', roles: ['clinic'], perm: ['appointment_settings', 'view'] },
|
||||
{ key: 'secretary', label: 'مدیریت منشی', icon: UsersIcon, group: 'practice', to: '/admin/my-secretaries' },
|
||||
{ key: 'staff', label: 'پرسنل', icon: UserPlusIcon, group: 'practice', to: '/admin/staff', perm: ['staff', 'view'] },
|
||||
|
||||
// ── نوبتدهی — قواعدی که تقویم را میسازند ────────────────────────────────
|
||||
// «منابع» به سایدبار اصلی («مدیریت») منتقل شد — کارِ روزمره است، نه تنظیمات.
|
||||
// گِیتش آنجا همین است: `appointment_settings.view` در هر چهار نقشی که اینجا میدیدندش.
|
||||
{ key: 'practice-domain', label: 'حوزهٔ فعالیت', icon: SparklesIcon, to: '/admin/settings/practice-domain', roles: ['clinic'], perm: ['appointment_settings', 'view'] },
|
||||
{ key: 'service-categories', label: 'دستهبندیها', icon: RectangleStackIcon, to: '/admin/service-categories', roles: ['doctor', 'clinic'], perm: ['appointment_settings', 'view'] },
|
||||
{ key: 'holidays', label: 'تعطیلات رسمی', icon: CalendarDaysIcon, to: '/admin/holidays', roles: ['doctor', 'clinic'], perm: ['appointment_settings', 'view'] },
|
||||
{ key: 'payment', label: 'مدیریت پرداخت', icon: BanknotesIcon, to: '/admin/my-financial', perm: ['payments', 'view'] },
|
||||
{ key: 'secretary', label: 'مدیریت منشی', icon: UsersIcon, to: '/admin/my-secretaries' },
|
||||
{ key: 'staff', label: 'پرسنل', icon: UserPlusIcon, to: '/admin/staff', perm: ['staff', 'view'] },
|
||||
{ key: 'insurance', label: 'مدیریت بیمه', icon: ShieldCheckIcon, to: '/admin/insurance-pricing', perm: ['insurances', 'view'] },
|
||||
{ key: 'discounts', label: 'مدیریت تخفیفها', icon: ReceiptPercentIcon, to: '/admin/discounts', roles: ['doctor', 'clinic'], perm: ['discounts', 'view'] },
|
||||
{ key: 'tags', label: 'برچسبها', icon: TagIcon, to: '/admin/tags-settings', perm: ['tags', 'view'] },
|
||||
{ key: 'record-number', label: 'شماره پرونده', icon: HashtagIcon, to: '/admin/record-number-settings', roles: ['doctor', 'clinic'], perm: ['patients', 'view'] },
|
||||
{ key: 'sms', label: 'پیامکها', icon: ChatBubbleLeftRightIcon, to: '/admin/sms-wallet', perm: ['sms', 'view'] },
|
||||
{ key: 'account', label: 'حساب کاربری', icon: UserCircleIcon, to: '/admin/account-settings', alwaysOpen: true },
|
||||
{ key: 'appointment', label: 'مدیریت نوبت دهی', icon: CalendarDaysIcon, group: 'scheduling', to: '/admin/appointment-settings', roles: ['doctor'], perm: ['appointment_settings', 'view'] },
|
||||
{ key: 'appointment', label: 'مدیریت نوبت دهی', icon: CalendarDaysIcon, group: 'scheduling', to: '/admin/settings/appointment-settings', roles: ['clinic'], perm: ['appointment_settings', 'view'] },
|
||||
{ key: 'service-categories', label: 'دستهبندیها', icon: RectangleStackIcon, group: 'scheduling', to: '/admin/service-categories', roles: ['doctor', 'clinic'], perm: ['appointment_settings', 'view'] },
|
||||
{ key: 'holidays', label: 'تعطیلات رسمی', icon: CalendarDaysIcon, group: 'scheduling', to: '/admin/holidays', roles: ['doctor', 'clinic'], perm: ['appointment_settings', 'view'] },
|
||||
|
||||
// ── بیماران — قواعدی که روی پروندهٔ بیمار مینشینند ────────────────────────
|
||||
{ key: 'record-number', label: 'شماره پرونده', icon: HashtagIcon, group: 'patients', to: '/admin/record-number-settings', roles: ['doctor', 'clinic'], perm: ['patients', 'view'] },
|
||||
{ key: 'tags', label: 'برچسبها', icon: TagIcon, group: 'patients', to: '/admin/tags-settings', perm: ['tags', 'view'] },
|
||||
|
||||
// ── مالی — هر چیزی که به پول یا اعتبار وصل است ────────────────────────────
|
||||
{ key: 'payment', label: 'مدیریت پرداخت', icon: BanknotesIcon, group: 'finance', to: '/admin/my-financial', perm: ['payments', 'view'] },
|
||||
{ key: 'insurance', label: 'مدیریت بیمه', icon: ShieldCheckIcon, group: 'finance', to: '/admin/insurance-pricing', perm: ['insurances', 'view'] },
|
||||
{ key: 'discounts', label: 'مدیریت تخفیفها', icon: ReceiptPercentIcon, group: 'finance', to: '/admin/discounts', roles: ['doctor', 'clinic'], perm: ['discounts', 'view'] },
|
||||
{ key: 'sms', label: 'پیامکها', icon: ChatBubbleLeftRightIcon, group: 'finance', to: '/admin/sms-wallet', perm: ['sms', 'view'] },
|
||||
|
||||
// ── حساب و اشتراک — کممصرفترینها، ته فهرست ─────────────────────────────
|
||||
{ key: 'subscription', label: 'خرید اشتراک', icon: CreditCardIcon, group: 'account', to: '/admin/subscription', perm: ['subscription', 'view'] },
|
||||
{ key: 'account', label: 'حساب کاربری', icon: UserCircleIcon, group: 'account', to: '/admin/account-settings', alwaysOpen: true },
|
||||
];
|
||||
|
||||
/**
|
||||
@@ -72,3 +107,27 @@ export function menuForRole(
|
||||
return !i.roles || (role != null && i.roles.includes(role));
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* همان خروجی `menuForRole`، دستهبندیشده و به ترتیبِ `SETTINGS_GROUPS`.
|
||||
*
|
||||
* دستهٔ خالی برنمیگردد: منشیای که مجوز مالی ندارد نباید تیترِ «مالی» را ببیند و
|
||||
* زیرش هیچ. هر دو مصرفکنندهٔ منو از همین میخوانند تا ترتیب دسکتاپ و موبایل واگرا نشود.
|
||||
*/
|
||||
export function groupMenu(items: SettingsMenuItem[]): SettingsMenuGroup[] {
|
||||
return SETTINGS_GROUPS
|
||||
.map((group) => ({
|
||||
key: group.key,
|
||||
label: group.label,
|
||||
items: items.filter((i) => i.group === group.key),
|
||||
}))
|
||||
.filter((group) => group.items.length > 0);
|
||||
}
|
||||
|
||||
export function groupedMenuForRole(
|
||||
role: string | null | undefined,
|
||||
can?: (resource: string, action: string) => boolean,
|
||||
scope?: string | null,
|
||||
): SettingsMenuGroup[] {
|
||||
return groupMenu(menuForRole(role, can, scope));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user