126 lines
4.7 KiB
TypeScript
126 lines
4.7 KiB
TypeScript
import React from 'react';
|
|
import { NavLink, useNavigate } from 'react-router-dom';
|
|
import {
|
|
ChartBarIcon, UserGroupIcon, HeartIcon, BuildingOffice2Icon,
|
|
CalendarDaysIcon, CreditCardIcon, BanknotesIcon,
|
|
ChatBubbleLeftEllipsisIcon, StarIcon, DevicePhoneMobileIcon,
|
|
TagIcon, DocumentTextIcon, UsersIcon, KeyIcon,
|
|
ArrowLeftOnRectangleIcon,
|
|
} from '@heroicons/react/24/outline';
|
|
import { useUiStore } from '../../stores/uiStore';
|
|
import { useAuthStore } from '../../stores/authStore';
|
|
|
|
const sections = [
|
|
{
|
|
label: 'عمومی',
|
|
items: [
|
|
{ to: '/admin/dashboard', icon: ChartBarIcon, label: 'داشبورد' },
|
|
{ to: '/admin/users', icon: UserGroupIcon, label: 'کاربران' },
|
|
{ to: '/admin/doctors', icon: HeartIcon, label: 'پزشکان' },
|
|
{ to: '/admin/clinics', icon: BuildingOffice2Icon, label: 'کلینیکها' },
|
|
],
|
|
},
|
|
{
|
|
label: 'مدیریت',
|
|
items: [
|
|
{ to: '/admin/appointments', icon: CalendarDaysIcon, label: 'نوبتها' },
|
|
{ to: '/admin/payments', icon: CreditCardIcon, label: 'پرداختها' },
|
|
{ to: '/admin/settlements', icon: BanknotesIcon, label: 'تسویهحساب' },
|
|
],
|
|
},
|
|
{
|
|
label: 'محتوا',
|
|
items: [
|
|
{ to: '/admin/comments', icon: ChatBubbleLeftEllipsisIcon, label: 'نظرات' },
|
|
{ to: '/admin/ratings', icon: StarIcon, label: 'امتیازها' },
|
|
{ to: '/admin/blogs', icon: DocumentTextIcon, label: 'بلاگ' },
|
|
{ to: '/admin/sms', icon: DevicePhoneMobileIcon, label: 'پیامک' },
|
|
],
|
|
},
|
|
{
|
|
label: 'سیستم',
|
|
items: [
|
|
{ to: '/admin/categories', icon: TagIcon, label: 'دستهبندیها' },
|
|
{ to: '/admin/representations', icon: UsersIcon, label: 'نمایندگان' },
|
|
{ to: '/admin/secretaries', icon: KeyIcon, label: 'منشیها' },
|
|
],
|
|
},
|
|
];
|
|
|
|
interface Props {
|
|
mobileOpen?: boolean;
|
|
onMobileClose?: () => void;
|
|
}
|
|
|
|
export default function Sidebar({ mobileOpen: _mobileOpen, onMobileClose: _onMobileClose }: Props) {
|
|
const sidebarOpen = useUiStore((s) => s.sidebarOpen);
|
|
const toggleSidebar = useUiStore((s) => s.toggleSidebar);
|
|
const logout = useAuthStore((s) => s.logout);
|
|
const navigate = useNavigate();
|
|
|
|
return (
|
|
<aside className="sidebar">
|
|
{/* Brand */}
|
|
<div className="sidebar-brand">
|
|
<div className="brand-logo">
|
|
<HeartIcon style={{ width: 20, height: 20 }} />
|
|
</div>
|
|
<div className="brand-text">
|
|
<b>ClinicPro</b>
|
|
<span>پنل مدیریت</span>
|
|
</div>
|
|
<button
|
|
onClick={toggleSidebar}
|
|
className="icon-btn"
|
|
style={{ marginInlineStart: 'auto', width: 32, height: 32, flexShrink: 0 }}
|
|
title={sidebarOpen ? 'جمع کردن منو' : 'باز کردن منو'}
|
|
>
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
|
<line x1="3" y1="6" x2="21" y2="6" />
|
|
<line x1="3" y1="12" x2="21" y2="12" />
|
|
<line x1="3" y1="18" x2="21" y2="18" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Navigation */}
|
|
<nav className="nav">
|
|
{sections.map((section) => (
|
|
<div className="nav-group" key={section.label}>
|
|
<span className="nav-label">{section.label}</span>
|
|
{section.items.map(({ to, icon: Icon, label }) => (
|
|
<NavLink
|
|
key={to}
|
|
to={to}
|
|
title={!sidebarOpen ? label : undefined}
|
|
className={({ isActive }) => `nav-item${isActive ? ' active' : ''}`}
|
|
>
|
|
<Icon style={{ width: 19, height: 19, flexShrink: 0 }} />
|
|
<span>{label}</span>
|
|
</NavLink>
|
|
))}
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
{/* User footer */}
|
|
<div className="sidebar-foot">
|
|
<div
|
|
className="user-chip"
|
|
onClick={() => { logout(); navigate('/admin/login'); }}
|
|
title="خروج از سیستم"
|
|
>
|
|
<div className="cp-avatar">A</div>
|
|
<div className="user-meta">
|
|
<b>Admin</b>
|
|
<span>مدیر سیستم</span>
|
|
</div>
|
|
<ArrowLeftOnRectangleIcon
|
|
style={{ width: 16, height: 16, flexShrink: 0, color: 'var(--text-3)' }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
);
|
|
}
|