Files
clinicpro/assets/admin/components/layout/SettingsLayout.tsx
T
hamedandClaude Opus 5 03d8d7d68a feat(catalog): manage global categories from settings
Categories are the taxonomy both services and resources select from, but
until now they could only be reached through the service catalog, so every
environment ended up with its own spelling of "whole body".

- Settings > Categories page: global CRUD plus the "includes" edge
- POST/GET/DELETE /api/v1/service-category/{uuid}/includes — a DAG, kept
  separate from `parent` because "hand" sits under both "whole body" and
  "upper limb"; a cycle is refused with 422
- PUT /api/v1/resource/{uuid}/categories — full replacement, and a category
  from another environment is rejected explicitly since the uuid arrives in
  the request body where TenantFilter does not reach

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
2026-08-02 12:58:26 +03:30

89 lines
6.4 KiB
TypeScript

import React from 'react';
import {
CreditCardIcon, UserIcon, CalendarDaysIcon, BuildingOffice2Icon,
BanknotesIcon, UsersIcon, ShieldCheckIcon,
TagIcon, ChatBubbleLeftRightIcon, UserCircleIcon, UserPlusIcon, ReceiptPercentIcon, MapPinIcon, CubeIcon, ScaleIcon, RectangleStackIcon, ArrowPathRoundedSquareIcon, NoSymbolIcon, QueueListIcon, ChartBarIcon,
} 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[];
/** [resource, action] — منشی فقط با داشتن این مجوز آیتم را می‌بیند. */
perm?: [string, string];
/** برای منشی همیشه نمایش داده می‌شود (حساب کاربری). */
alwaysOpen?: 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: 'branches', label: 'شعبه‌ها و اتاق‌ها', icon: MapPinIcon, to: '/admin/branches', roles: ['doctor', 'clinic'], perm: ['appointment_settings', 'view'] },
{ key: 'resources', label: 'منابع', icon: CubeIcon, to: '/admin/resources', roles: ['doctor', '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: 'price-lists', label: 'لیست‌های قیمت', icon: BanknotesIcon, to: '/admin/price-lists', 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: 'sms', label: 'پیامک‌ها', icon: ChatBubbleLeftRightIcon, to: '/admin/sms-wallet', perm: ['sms', 'view'] },
{ key: 'account', label: 'حساب کاربری', icon: UserCircleIcon, to: '/admin/account-settings', alwaysOpen: true },
];
/**
* Menu items visible to the given role. برای منشی بر اساس مجوز فیلتر می‌شود
* (آیتمِ بدونِ perm/alwaysOpen پنهان است)؛ سایر نقش‌ها با roles.
*/
export function menuForRole(
role: string | null | undefined,
can?: (resource: string, action: string) => boolean,
scope?: string | null,
): SettingsMenuItem[] {
// منشی و پزشکِ عضوِ کلینیک (scope=clinic) محدود-به-مجوزند؛ بقیه با فیلترِ نقشی.
const permissionRestricted = role === 'secretary' || (role === 'doctor' && scope === 'clinic');
return SETTINGS_MENU.filter((i) => {
if (permissionRestricted) {
if (i.alwaysOpen) return true;
if (!i.perm || !can || !can(i.perm[0], i.perm[1])) return false;
// واریانتِ نقشی (نوبت‌دهی/پزشکان کلینیک) را با scope تطبیق بده.
if (i.roles) return i.roles.includes(scope === 'clinic' ? 'clinic' : 'doctor');
return true;
}
return !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 settings-shell" 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>
);
}