hamedandClaude Opus 4.8
f33c61365d
SettingsLayout rendered its own role-gated aside while the subscription page rendered PurchaseSubscriptionSidebar, so /admin/subscription and other settings pages (sms-wallet, ...) showed two different settings menus. Make SettingsLayout render the shared PurchaseSubscriptionSidebar and have SubscriptionPage use SettingsLayout too, so every settings page shows one identical menu. menuForRole / SETTINGS_MENU are kept for the mobile settings list (SettingsMenuPage). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
60 lines
3.5 KiB
TypeScript
60 lines
3.5 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
CreditCardIcon, UserIcon, CalendarDaysIcon, BuildingOffice2Icon,
|
|
WrenchScrewdriverIcon, BanknotesIcon, UsersIcon, ShieldCheckIcon,
|
|
TagIcon, ChatBubbleLeftRightIcon, UserCircleIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import PurchaseSubscriptionSidebar from './PurchaseSubscriptionSidebar';
|
|
|
|
// ── Settings menu configuration ─────────────────────────────────────────────
|
|
// Source of truth for the *mobile* settings list (SettingsMenuPage). The desktop
|
|
// shell renders the shared PurchaseSubscriptionSidebar instead, so there is a
|
|
// single settings sidebar across all settings pages (no duplicate menu).
|
|
export type SettingsMenuItem = {
|
|
key: string;
|
|
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', 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' },
|
|
{ key: 'insurance', label: 'مدیریت بیمه', icon: ShieldCheckIcon, to: '/admin/insurance-pricing' },
|
|
{ key: 'tags', label: 'برچسبها', icon: TagIcon, to: '/admin/tags-settings' },
|
|
{ key: 'sms', label: 'پیامکها', icon: ChatBubbleLeftRightIcon, to: '/admin/sms-wallet' },
|
|
{ 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)));
|
|
}
|
|
|
|
/**
|
|
* SettingsLayout — presentational shell for the doctor/clinic settings area.
|
|
* Renders the shared settings sidebar (PurchaseSubscriptionSidebar) beside the
|
|
* page content, so every settings page shows the exact same menu as the
|
|
* subscription page. Full-width so the sidebar sits flush against the main nav.
|
|
*
|
|
* @param active key of the currently-open settings section (highlighted)
|
|
* @param children the section content (e.g. subscription plans)
|
|
*/
|
|
export default function SettingsLayout({ active, children }: { active: string; children: React.ReactNode }) {
|
|
return (
|
|
<div className="fade-in" dir="rtl" style={{ width: '100%' }}>
|
|
<div className="grid grid-cols-1 lg:grid-cols-[248px_minmax(0,1fr)] gap-5">
|
|
<PurchaseSubscriptionSidebar active={active} />
|
|
<div style={{ minWidth: 0 }}>{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|