refactor: simplify Topbar component and remove unused code
- Removed breadcrumb functionality and related code from Topbar. - Consolidated mobile and desktop sidebar toggle logic. - Adjusted icon sizes and styles for consistency. - Cleaned up unused imports and props in Topbar. refactor: enhance DoctorDetailPage session editor UI - Improved layout and styling of session editor for better usability. - Removed advanced settings toggle and integrated relevant fields directly. - Added visual indicators for session slots and rest periods. refactor: streamline DoctorsPage component - Removed bulk selection functionality and related state management. - Simplified rendering logic for doctor list and adjusted table structure. - Cleaned up unused imports and components for better readability. refactor: optimize UsersPage component - Removed bulk selection and deletion functionality. - Simplified user table structure and adjusted column spans. - Cleaned up unused state and imports for improved clarity.
This commit is contained in:
hamed
@@ -1,125 +1,169 @@
|
||||
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';
|
||||
ArrowLeftOnRectangleIcon,
|
||||
BanknotesIcon,
|
||||
BuildingOffice2Icon,
|
||||
CalendarDaysIcon,
|
||||
ChartBarIcon,
|
||||
ChatBubbleLeftEllipsisIcon,
|
||||
CreditCardIcon,
|
||||
DevicePhoneMobileIcon,
|
||||
DocumentTextIcon,
|
||||
HeartIcon,
|
||||
KeyIcon,
|
||||
StarIcon,
|
||||
TagIcon,
|
||||
UserGroupIcon,
|
||||
UsersIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { NavLink, useNavigate } from "react-router-dom";
|
||||
import { useAuthStore } from "../../stores/authStore";
|
||||
import { useUiStore } from "../../stores/uiStore";
|
||||
|
||||
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: 'منشیها' },
|
||||
],
|
||||
},
|
||||
{
|
||||
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;
|
||||
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();
|
||||
export default function Sidebar({
|
||||
mobileOpen: _mobileOpen,
|
||||
onMobileClose: _onMobileClose,
|
||||
}: Props) {
|
||||
const sidebarOpen = useUiStore((s) => s.sidebarOpen);
|
||||
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>
|
||||
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>
|
||||
</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>
|
||||
{/* 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>
|
||||
);
|
||||
{/* User footer */}
|
||||
<div className="sidebar-foot">
|
||||
<div
|
||||
className="user-chip"
|
||||
onClick={() => {
|
||||
logout();
|
||||
navigate("/admin/login");
|
||||
}}
|
||||
title="خروج از سیستم"
|
||||
>
|
||||
<div
|
||||
className="avatar sm"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(145deg, oklch(0.62 0.15 256), oklch(0.48 0.16 256))",
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,109 +1,72 @@
|
||||
import React from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import {
|
||||
BellIcon, SunIcon, MoonIcon, Bars3Icon, Cog6ToothIcon,
|
||||
MagnifyingGlassIcon, XMarkIcon, CheckIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
|
||||
import { useUiStore, HUES, type BrandHue } from '../../stores/uiStore';
|
||||
|
||||
const CRUMBS: Record<string, string[]> = {
|
||||
'/admin/dashboard': ['داشبورد'],
|
||||
'/admin/users': ['کاربران'],
|
||||
'/admin/doctors': ['پزشکان'],
|
||||
'/admin/clinics': ['کلینیکها'],
|
||||
'/admin/appointments': ['مدیریت', 'نوبتها'],
|
||||
'/admin/payments': ['مدیریت', 'پرداختها'],
|
||||
'/admin/settlements': ['مدیریت', 'تسویهحساب'],
|
||||
'/admin/comments': ['محتوا', 'نظرات'],
|
||||
'/admin/ratings': ['محتوا', 'امتیازها'],
|
||||
'/admin/blogs': ['محتوا', 'بلاگ'],
|
||||
'/admin/sms': ['محتوا', 'پیامک'],
|
||||
'/admin/categories': ['سیستم', 'دستهبندیها'],
|
||||
'/admin/representations': ['سیستم', 'نمایندگان'],
|
||||
'/admin/secretaries': ['سیستم', 'منشیها'],
|
||||
};
|
||||
|
||||
function getCrumbs(pathname: string): string[] {
|
||||
if (CRUMBS[pathname]) return CRUMBS[pathname];
|
||||
const entry = Object.entries(CRUMBS).find(([k]) => pathname.startsWith(k + '/'));
|
||||
return entry ? entry[1] : ['داشبورد'];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
onMobileMenuOpen?: () => void;
|
||||
}
|
||||
|
||||
export default function Topbar({ onMobileMenuOpen }: Props) {
|
||||
const location = useLocation();
|
||||
const toggleSidebar = useUiStore((s) => s.toggleSidebar);
|
||||
const darkMode = useUiStore((s) => s.darkMode);
|
||||
const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
|
||||
const density = useUiStore((s) => s.density);
|
||||
const setDensity = useUiStore((s) => s.setDensity);
|
||||
const brandHue = useUiStore((s) => s.brandHue);
|
||||
const setBrandHue = useUiStore((s) => s.setBrandHue);
|
||||
const sidebarOpen = useUiStore((s) => s.sidebarOpen);
|
||||
const settingsPanelOpen = useUiStore((s) => s.settingsPanelOpen);
|
||||
export default function Topbar({ onMobileMenuOpen }: { onMobileMenuOpen?: () => void }) {
|
||||
const toggleSidebar = useUiStore((s) => s.toggleSidebar);
|
||||
const darkMode = useUiStore((s) => s.darkMode);
|
||||
const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
|
||||
const density = useUiStore((s) => s.density);
|
||||
const setDensity = useUiStore((s) => s.setDensity);
|
||||
const brandHue = useUiStore((s) => s.brandHue);
|
||||
const setBrandHue = useUiStore((s) => s.setBrandHue);
|
||||
const sidebarOpen = useUiStore((s) => s.sidebarOpen);
|
||||
const settingsPanelOpen = useUiStore((s) => s.settingsPanelOpen);
|
||||
const toggleSettingsPanel = useUiStore((s) => s.toggleSettingsPanel);
|
||||
|
||||
const crumbs = getCrumbs(location.pathname);
|
||||
|
||||
return (
|
||||
<>
|
||||
<header className="topbar">
|
||||
{/* Sidebar toggle — desktop only */}
|
||||
<button className="icon-btn hidden lg:grid" onClick={toggleSidebar}
|
||||
title={sidebarOpen ? 'جمع کردن منو' : 'باز کردن منو'}>
|
||||
<Bars3Icon style={{ width: 20, height: 20 }} />
|
||||
</button>
|
||||
|
||||
{/* Mobile menu open — mobile only */}
|
||||
<button className="icon-btn grid lg:hidden" onClick={onMobileMenuOpen} title="منو">
|
||||
{/* Sidebar toggle */}
|
||||
<button
|
||||
className="icon-btn"
|
||||
onClick={typeof window !== 'undefined' && window.innerWidth < 1024 ? onMobileMenuOpen : toggleSidebar}
|
||||
title={sidebarOpen ? 'جمع کردن منو' : 'باز کردن منو'}
|
||||
>
|
||||
<Bars3Icon style={{ width: 20, height: 20 }} />
|
||||
</button>
|
||||
|
||||
{/* Search bar */}
|
||||
<div className="topbar-search">
|
||||
<MagnifyingGlassIcon style={{ width: 18, height: 18, flexShrink: 0 }} />
|
||||
<MagnifyingGlassIcon style={{ width: 17, height: 17, flexShrink: 0 }} />
|
||||
<input placeholder="جستجوی بیمار، پزشک، نوبت..." readOnly />
|
||||
<kbd>⌘K</kbd>
|
||||
</div>
|
||||
|
||||
<div style={{ flex: 1 }} />
|
||||
|
||||
{/* Breadcrumbs */}
|
||||
<nav className="topbar-crumbs">
|
||||
{crumbs.map((crumb, i) => (
|
||||
<React.Fragment key={i}>
|
||||
{i > 0 && <ChevronLeftIcon style={{ width: 13, height: 13 }} />}
|
||||
{i === crumbs.length - 1 ? <b>{crumb}</b> : <span>{crumb}</span>}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
<div style={{ width: 1, height: 24, background: 'var(--border)' }} />
|
||||
|
||||
{/* Settings */}
|
||||
<button className="icon-btn" onClick={toggleSettingsPanel} title="شخصیسازی">
|
||||
<Cog6ToothIcon style={{ width: 19, height: 19 }} />
|
||||
</button>
|
||||
|
||||
{/* Dark mode */}
|
||||
<button className="icon-btn" onClick={toggleDarkMode} title={darkMode ? 'حالت روشن' : 'حالت تاریک'}>
|
||||
{darkMode
|
||||
? <SunIcon style={{ width: 19, height: 19, color: '#f59e0b' }} />
|
||||
: <MoonIcon style={{ width: 19, height: 19 }} />}
|
||||
? <SunIcon style={{ width: 18, height: 18, color: 'oklch(0.78 0.18 85)' }} />
|
||||
: <MoonIcon style={{ width: 18, height: 18 }} />}
|
||||
</button>
|
||||
|
||||
{/* Bell */}
|
||||
<button className="icon-btn" title="اعلانها">
|
||||
<BellIcon style={{ width: 19, height: 19 }} />
|
||||
<button className="icon-btn" title="اعلانها" style={{ position: 'relative' }}>
|
||||
<BellIcon style={{ width: 18, height: 18 }} />
|
||||
<span className="dot" />
|
||||
</button>
|
||||
|
||||
{/* Settings */}
|
||||
<button className="icon-btn" onClick={toggleSettingsPanel} title="شخصیسازی">
|
||||
<Cog6ToothIcon style={{ width: 18, height: 18 }} />
|
||||
</button>
|
||||
|
||||
{/* Avatar */}
|
||||
<div className="cp-avatar" style={{ cursor: 'pointer' }}>A</div>
|
||||
<div
|
||||
className="avatar sm"
|
||||
style={{
|
||||
background: 'linear-gradient(145deg, oklch(0.62 0.15 256), oklch(0.48 0.16 256))',
|
||||
cursor: 'pointer',
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
A
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Settings Panel */}
|
||||
@@ -134,7 +97,7 @@ export default function Topbar({ onMobileMenuOpen }: Props) {
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => { if (darkMode) toggleDarkMode(); }}
|
||||
>
|
||||
<SunIcon style={{ width: 15, height: 15, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 6 }} />
|
||||
<SunIcon style={{ width: 14, height: 14, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 5 }} />
|
||||
روشن
|
||||
</button>
|
||||
<button
|
||||
@@ -142,7 +105,7 @@ export default function Topbar({ onMobileMenuOpen }: Props) {
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => { if (!darkMode) toggleDarkMode(); }}
|
||||
>
|
||||
<MoonIcon style={{ width: 15, height: 15, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 6 }} />
|
||||
<MoonIcon style={{ width: 14, height: 14, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 5 }} />
|
||||
تیره
|
||||
</button>
|
||||
</div>
|
||||
@@ -151,21 +114,20 @@ export default function Topbar({ onMobileMenuOpen }: Props) {
|
||||
{/* Brand color */}
|
||||
<div className="form-row">
|
||||
<label>رنگ اصلی</label>
|
||||
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||||
<div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
|
||||
{HUES.map((hue) => (
|
||||
<button
|
||||
key={hue.h}
|
||||
onClick={() => setBrandHue(hue as BrandHue)}
|
||||
title={hue.name}
|
||||
style={{
|
||||
width: 42, height: 42, borderRadius: 12,
|
||||
width: 40, height: 40, borderRadius: 10,
|
||||
background: `oklch(0.55 ${hue.c} ${hue.h})`,
|
||||
border: brandHue.h === hue.h ? '3px solid var(--text)' : '3px solid transparent',
|
||||
boxShadow: 'var(--shadow-sm)',
|
||||
display: 'grid', placeItems: 'center', color: '#fff', cursor: 'pointer',
|
||||
}}
|
||||
>
|
||||
{brandHue.h === hue.h && <CheckIcon style={{ width: 18, height: 18 }} />}
|
||||
{brandHue.h === hue.h && <CheckIcon style={{ width: 16, height: 16 }} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -206,11 +168,10 @@ export default function Topbar({ onMobileMenuOpen }: Props) {
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
padding: 14, background: 'var(--surface-2)', borderRadius: 'var(--r)',
|
||||
fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.9, marginTop: 8,
|
||||
padding: 12, background: 'var(--surface-2)', borderRadius: 'var(--r)',
|
||||
fontSize: 12, color: 'var(--text-2)', lineHeight: 1.9, marginTop: 8,
|
||||
}}>
|
||||
<Cog6ToothIcon style={{ width: 15, height: 15, verticalAlign: 'middle', marginInlineEnd: 6 }} />
|
||||
تنظیمات شما بهصورت خودکار ذخیره میشود و در بازدید بعدی حفظ میماند.
|
||||
تنظیمات شما بهصورت خودکار ذخیره میشود.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user