Files
clinicpro/assets/admin/components/layout/PurchaseSubscriptionSidebar.tsx
T
hamed 6ab7ed38b8 feat: refactor clinic management into a dedicated settings tab
- Removed MyClinicPage and redirected its functionality to a new ClinicDoctorsPage.
- Created ClinicDoctorsManager component for managing doctors and invitations within the settings layout.
- Updated backend permissions to allow clinic owners to detach doctors, alongside admins.
- Adjusted API documentation to reflect new permission structure.
- Updated tests to cover new functionality and permissions.
- Modified sidebar and settings menu to reflect the new structure and role-based visibility.
2026-07-17 21:56:27 +03:30

118 lines
5.2 KiB
TypeScript

import React, { useMemo, useState } from 'react';
import { Link } from 'react-router-dom';
import { SearchHeaderP } from '../../pages/subscriptionIcons';
import { useAuthStore } from '../../stores/authStore';
/**
* Settings sub-navigation for the subscription page — item list and order copied
* verbatim from clinic-pro-tauri's `PurchaseSubscription.jsx` navItems, minus
* "مدیریت پزشک" (that lives in the main nav / doctor profile, not here). Shown
* ungated to mirror the tauri source. Each entry maps to a real admin route; the
* "تنظیمات" (security) section has no doctor/clinic route yet → disabled.
*
* This list is intentionally separate from SETTINGS_MENU (SettingsLayout) so the
* other settings pages are not affected.
*/
/** `roles`: when set, the item is only shown to those roles (omit = every role). */
type NavItem = { key: string; label: string; to?: string; roles?: string[] };
const NAV_ITEMS: NavItem[] = [
{ key: 'subscription', label: 'خرید اشتراک', to: '/admin/subscription' },
{ key: 'payment', label: 'مدیریت پرداخت', to: '/admin/my-financial' },
{ key: 'appointment', label: 'مدیریت نوبت دهی', to: '/admin/appointment-settings', roles: ['doctor'] },
{ key: 'insurance', label: 'مدیریت بیمه', to: '/admin/insurance-pricing' },
{ key: 'discounts', label: 'مدیریت تخفیف‌ها', to: '/admin/discounts', roles: ['doctor', 'clinic'] },
{ key: 'tags', label: 'تگ ها', to: '/admin/tags-settings' },
{ key: 'sms', label: 'پیامک ها', to: '/admin/sms-wallet' },
{ key: 'clinic-doctors', label: 'پزشکان کلینیک', to: '/admin/settings/clinic-doctors', roles: ['clinic'] },
{ key: 'secretary', label: 'مدیریت منشی', to: '/admin/my-secretaries' },
{ key: 'staff', label: 'پرسنل', to: '/admin/staff' },
{ key: 'account', label: 'حساب کاربری', to: '/admin/account-settings' },
{ key: 'security', label: 'تنظیمات' },
];
export default function PurchaseSubscriptionSidebar({ active }: { active: string }) {
const [query, setQuery] = useState('');
const primaryRole = useAuthStore((s) => s.primaryRole);
const items = useMemo(
() => NAV_ITEMS
.filter((i) => !i.roles || (primaryRole != null && i.roles.includes(primaryRole)))
.filter((i) => i.label.includes(query.trim())),
[query, primaryRole],
);
return (
<aside
dir="rtl"
aria-label="منوی تنظیمات"
className="hidden lg:block"
style={{ alignSelf: 'start', position: 'sticky', top: 'calc(var(--topbar-h) + 16px)' }}
>
<div style={{
fontSize: 16, fontWeight: 800, color: 'var(--text-2)', textAlign: 'right',
marginBottom: 10, padding: '0 4px',
}}>
تنظیمات
</div>
<div style={{ marginBottom: 16 }}>
<div style={{
display: 'flex', alignItems: 'center', gap: 8,
background: 'var(--surface)', border: '1px solid var(--border)',
borderRadius: 'var(--r-sm)', padding: '8px 12px',
}}>
<SearchHeaderP />
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="جستجو در تنظیمات"
aria-label="جستجو در تنظیمات"
style={{
border: 'none', outline: 'none', background: 'transparent',
fontFamily: 'inherit', fontSize: 13, color: 'var(--text)', width: '100%',
textAlign: 'right', direction: 'rtl',
}}
/>
</div>
</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 ? '#FFFFFF' : 'var(--text-2)',
cursor: item.to ? 'pointer' : 'not-allowed',
transition: 'background .14s',
};
const inner = <span style={{ flex: 1 }}>{item.label}</span>;
if (!item.to) {
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 && (
<div style={{ padding: '12px 4px', fontSize: 13, color: 'var(--text-3)', textAlign: 'center' }}>
موردی یافت نشد
</div>
)}
</nav>
</aside>
);
}