112 lines
4.7 KiB
TypeScript
112 lines
4.7 KiB
TypeScript
import React, { useMemo, useState } from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { SearchHeaderP } from '../../pages/subscriptionIcons';
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
type NavItem = { key: string; label: string; to?: 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' },
|
|
{ key: 'insurance', label: 'مدیریت بیمه', to: '/admin/insurance-pricing' },
|
|
{ key: 'tags', label: 'تگ ها', to: '/admin/tags-settings' },
|
|
{ key: 'sms', label: 'پیامک ها', to: '/admin/sms-wallet' },
|
|
{ key: 'clinic', label: 'مدیریت مطب', to: '/admin/my-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 items = useMemo(
|
|
() => NAV_ITEMS.filter((i) => i.label.includes(query.trim())),
|
|
[query],
|
|
);
|
|
|
|
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>
|
|
);
|
|
}
|