hamed/clinicpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: simplify Topbar component and remove unused code

Browse Source 
- 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
2026-06-10 21:08:53 +03:30
parent 7fb805be27
commit 5f4a8d197b
5 changed files with 362 additions and 492 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/components/layout/Sidebar.tsx
+157 -113
View File
@@ -1,125 +1,169 @@
import React from 'react';
import { NavLink, useNavigate } from 'react-router-dom';
import { import {
ChartBarIcon, UserGroupIcon, HeartIcon, BuildingOffice2Icon, ArrowLeftOnRectangleIcon,
CalendarDaysIcon, CreditCardIcon, BanknotesIcon, BanknotesIcon,
ChatBubbleLeftEllipsisIcon, StarIcon, DevicePhoneMobileIcon, BuildingOffice2Icon,
TagIcon, DocumentTextIcon, UsersIcon, KeyIcon, CalendarDaysIcon,
ArrowLeftOnRectangleIcon, ChartBarIcon,
} from '@heroicons/react/24/outline'; ChatBubbleLeftEllipsisIcon,
import { useUiStore } from '../../stores/uiStore'; CreditCardIcon,
import { useAuthStore } from '../../stores/authStore'; 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 = [ const sections = [
{ {
label: 'عمومی', label: "عمومی",
items: [ items: [
{ to: '/admin/dashboard', icon: ChartBarIcon, label: 'داشبورد' }, { to: "/admin/dashboard", icon: ChartBarIcon, label: "داشبورد" },
{ to: '/admin/users', icon: UserGroupIcon, label: 'کاربران' }, { to: "/admin/users", icon: UserGroupIcon, label: "کاربران" },
{ to: '/admin/doctors', icon: HeartIcon, label: 'پزشکان' }, { to: "/admin/doctors", icon: HeartIcon, label: "پزشکان" },
{ to: '/admin/clinics', icon: BuildingOffice2Icon, 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/appointments",
label: 'محتوا', icon: CalendarDaysIcon,
items: [ label: "نوبت‌ها",
{ to: '/admin/comments', icon: ChatBubbleLeftEllipsisIcon, label: 'نظرات' }, },
{ to: '/admin/ratings', icon: StarIcon, label: 'امتیازها' }, { to: "/admin/payments", icon: CreditCardIcon, label: "پرداخت‌ها" },
{ to: '/admin/blogs', icon: DocumentTextIcon, label: 'بلاگ' }, {
{ to: '/admin/sms', icon: DevicePhoneMobileIcon, label: 'پیامک' }, to: "/admin/settlements",
], icon: BanknotesIcon,
}, label: "تسویه‌حساب",
{ },
label: 'سیستم', ],
items: [ },
{ to: '/admin/categories', icon: TagIcon, label: 'دسته‌بندی‌ها' }, {
{ to: '/admin/representations', icon: UsersIcon, label: 'نمایندگان' }, label: "محتوا",
{ to: '/admin/secretaries', icon: KeyIcon, 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 { interface Props {
mobileOpen?: boolean; mobileOpen?: boolean;
onMobileClose?: () => void; onMobileClose?: () => void;
} }
export default function Sidebar({ mobileOpen: _mobileOpen, onMobileClose: _onMobileClose }: Props) { export default function Sidebar({
const sidebarOpen = useUiStore((s) => s.sidebarOpen); mobileOpen: _mobileOpen,
const toggleSidebar = useUiStore((s) => s.toggleSidebar); onMobileClose: _onMobileClose,
const logout = useAuthStore((s) => s.logout); }: Props) {
const navigate = useNavigate(); const sidebarOpen = useUiStore((s) => s.sidebarOpen);
const logout = useAuthStore((s) => s.logout);
const navigate = useNavigate();
return ( return (
<aside className="sidebar"> <aside className="sidebar">
{/* Brand */} {/* Brand */}
<div className="sidebar-brand"> <div className="sidebar-brand">
<div className="brand-logo"> <div className="brand-logo">
<HeartIcon style={{ width: 20, height: 20 }} /> <HeartIcon style={{ width: 20, height: 20 }} />
</div> </div>
<div className="brand-text"> <div className="brand-text">
<b>ClinicPro</b> <b>ClinicPro</b>
<span>پنل مدیریت</span> <span>پنل مدیریت</span>
</div> </div>
<button </div>
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 */} {/* Navigation */}
<nav className="nav"> <nav className="nav">
{sections.map((section) => ( {sections.map((section) => (
<div className="nav-group" key={section.label}> <div className="nav-group" key={section.label}>
<span className="nav-label">{section.label}</span> <span className="nav-label">{section.label}</span>
{section.items.map(({ to, icon: Icon, label }) => ( {section.items.map(({ to, icon: Icon, label }) => (
<NavLink <NavLink
key={to} key={to}
to={to} to={to}
title={!sidebarOpen ? label : undefined} title={!sidebarOpen ? label : undefined}
className={({ isActive }) => `nav-item${isActive ? ' active' : ''}`} className={({ isActive }) =>
> `nav-item${isActive ? " active" : ""}`
<Icon style={{ width: 19, height: 19, flexShrink: 0 }} /> }
<span>{label}</span> >
</NavLink> <Icon
))} style={{
</div> width: 19,
))} height: 19,
</nav> flexShrink: 0,
}}
/>
<span>{label}</span>
</NavLink>
))}
</div>
))}
</nav>
{/* User footer */} {/* User footer */}
<div className="sidebar-foot"> <div className="sidebar-foot">
<div <div
className="user-chip" className="user-chip"
onClick={() => { logout(); navigate('/admin/login'); }} onClick={() => {
title="خروج از سیستم" logout();
> navigate("/admin/login");
<div className="cp-avatar">A</div> }}
<div className="user-meta"> title="خروج از سیستم"
<b>Admin</b> >
<span>مدیر سیستم</span> <div
</div> className="avatar sm"
<ArrowLeftOnRectangleIcon style={{
style={{ width: 16, height: 16, flexShrink: 0, color: 'var(--text-3)' }} background:
/> "linear-gradient(145deg, oklch(0.62 0.15 256), oklch(0.48 0.16 256))",
</div> flexShrink: 0,
</div> }}
</aside> >
); 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>
);
} }
assets/admin/components/layout/Topbar.tsx
+44 -83
View File
@@ -1,109 +1,72 @@
import React from 'react'; import React from 'react';
import { useLocation } from 'react-router-dom';
import { import {
BellIcon, SunIcon, MoonIcon, Bars3Icon, Cog6ToothIcon, BellIcon, SunIcon, MoonIcon, Bars3Icon, Cog6ToothIcon,
MagnifyingGlassIcon, XMarkIcon, CheckIcon, MagnifyingGlassIcon, XMarkIcon, CheckIcon,
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
import { useUiStore, HUES, type BrandHue } from '../../stores/uiStore'; import { useUiStore, HUES, type BrandHue } from '../../stores/uiStore';
const CRUMBS: Record<string, string[]> = { export default function Topbar({ onMobileMenuOpen }: { onMobileMenuOpen?: () => void }) {
'/admin/dashboard': ['داشبورد'], const toggleSidebar = useUiStore((s) => s.toggleSidebar);
'/admin/users': ['کاربران'], const darkMode = useUiStore((s) => s.darkMode);
'/admin/doctors': ['پزشکان'], const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
'/admin/clinics': ['کلینیک‌ها'], const density = useUiStore((s) => s.density);
'/admin/appointments': ['مدیریت', 'نوبت‌ها'], const setDensity = useUiStore((s) => s.setDensity);
'/admin/payments': ['مدیریت', 'پرداخت‌ها'], const brandHue = useUiStore((s) => s.brandHue);
'/admin/settlements': ['مدیریت', 'تسویه‌حساب'], const setBrandHue = useUiStore((s) => s.setBrandHue);
'/admin/comments': ['محتوا', 'نظرات'], const sidebarOpen = useUiStore((s) => s.sidebarOpen);
'/admin/ratings': ['محتوا', 'امتیازها'], const settingsPanelOpen = useUiStore((s) => s.settingsPanelOpen);
'/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);
const toggleSettingsPanel = useUiStore((s) => s.toggleSettingsPanel); const toggleSettingsPanel = useUiStore((s) => s.toggleSettingsPanel);
const crumbs = getCrumbs(location.pathname);
return ( return (
<> <>
<header className="topbar"> <header className="topbar">
{/* Sidebar toggle — desktop only */} {/* Sidebar toggle */}
<button className="icon-btn hidden lg:grid" onClick={toggleSidebar} <button
title={sidebarOpen ? 'جمع کردن منو' : 'باز کردن منو'}> className="icon-btn"
<Bars3Icon style={{ width: 20, height: 20 }} /> onClick={typeof window !== 'undefined' && window.innerWidth < 1024 ? onMobileMenuOpen : toggleSidebar}
</button> title={sidebarOpen ? 'جمع کردن منو' : 'باز کردن منو'}
>
{/* Mobile menu open — mobile only */}
<button className="icon-btn grid lg:hidden" onClick={onMobileMenuOpen} title="منو">
<Bars3Icon style={{ width: 20, height: 20 }} /> <Bars3Icon style={{ width: 20, height: 20 }} />
</button> </button>
{/* Search bar */} {/* Search bar */}
<div className="topbar-search"> <div className="topbar-search">
<MagnifyingGlassIcon style={{ width: 18, height: 18, flexShrink: 0 }} /> <MagnifyingGlassIcon style={{ width: 17, height: 17, flexShrink: 0 }} />
<input placeholder="جستجوی بیمار، پزشک، نوبت..." readOnly /> <input placeholder="جستجوی بیمار، پزشک، نوبت..." readOnly />
<kbd>⌘K</kbd> <kbd>⌘K</kbd>
</div> </div>
<div style={{ flex: 1 }} /> <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 */} {/* Dark mode */}
<button className="icon-btn" onClick={toggleDarkMode} title={darkMode ? 'حالت روشن' : 'حالت تاریک'}> <button className="icon-btn" onClick={toggleDarkMode} title={darkMode ? 'حالت روشن' : 'حالت تاریک'}>
{darkMode {darkMode
? <SunIcon style={{ width: 19, height: 19, color: '#f59e0b' }} /> ? <SunIcon style={{ width: 18, height: 18, color: 'oklch(0.78 0.18 85)' }} />
: <MoonIcon style={{ width: 19, height: 19 }} />} : <MoonIcon style={{ width: 18, height: 18 }} />}
</button> </button>
{/* Bell */} {/* Bell */}
<button className="icon-btn" title="اعلان‌ها"> <button className="icon-btn" title="اعلان‌ها" style={{ position: 'relative' }}>
<BellIcon style={{ width: 19, height: 19 }} /> <BellIcon style={{ width: 18, height: 18 }} />
<span className="dot" /> <span className="dot" />
</button> </button>
{/* Settings */}
<button className="icon-btn" onClick={toggleSettingsPanel} title="شخصی‌سازی">
<Cog6ToothIcon style={{ width: 18, height: 18 }} />
</button>
{/* Avatar */} {/* 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> </header>
{/* Settings Panel */} {/* Settings Panel */}
@@ -134,7 +97,7 @@ export default function Topbar({ onMobileMenuOpen }: Props) {
style={{ flex: 1 }} style={{ flex: 1 }}
onClick={() => { if (darkMode) toggleDarkMode(); }} 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>
<button <button
@@ -142,7 +105,7 @@ export default function Topbar({ onMobileMenuOpen }: Props) {
style={{ flex: 1 }} style={{ flex: 1 }}
onClick={() => { if (!darkMode) toggleDarkMode(); }} 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> </button>
</div> </div>
@@ -151,21 +114,20 @@ export default function Topbar({ onMobileMenuOpen }: Props) {
{/* Brand color */} {/* Brand color */}
<div className="form-row"> <div className="form-row">
<label>رنگ اصلی</label> <label>رنگ اصلی</label>
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}> <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
{HUES.map((hue) => ( {HUES.map((hue) => (
<button <button
key={hue.h} key={hue.h}
onClick={() => setBrandHue(hue as BrandHue)} onClick={() => setBrandHue(hue as BrandHue)}
title={hue.name} title={hue.name}
style={{ style={{
width: 42, height: 42, borderRadius: 12, width: 40, height: 40, borderRadius: 10,
background: `oklch(0.55 ${hue.c} ${hue.h})`, background: `oklch(0.55 ${hue.c} ${hue.h})`,
border: brandHue.h === hue.h ? '3px solid var(--text)' : '3px solid transparent', border: brandHue.h === hue.h ? '3px solid var(--text)' : '3px solid transparent',
boxShadow: 'var(--shadow-sm)',
display: 'grid', placeItems: 'center', color: '#fff', cursor: 'pointer', 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> </button>
))} ))}
</div> </div>
@@ -206,11 +168,10 @@ export default function Topbar({ onMobileMenuOpen }: Props) {
</div> </div>
<div style={{ <div style={{
padding: 14, background: 'var(--surface-2)', borderRadius: 'var(--r)', padding: 12, background: 'var(--surface-2)', borderRadius: 'var(--r)',
fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.9, marginTop: 8, fontSize: 12, color: 'var(--text-2)', lineHeight: 1.9, marginTop: 8,
}}> }}>
<Cog6ToothIcon style={{ width: 15, height: 15, verticalAlign: 'middle', marginInlineEnd: 6 }} /> تنظیمات شما به‌صورت خودکار ذخیره می‌شود.
تنظیمات شما به‌صورت خودکار ذخیره می‌شود و در بازدید بعدی حفظ می‌ماند.
</div> </div>
</div> </div>
</div> </div>
assets/admin/pages/DoctorDetailPage.tsx
+151 -144
View File
@@ -1017,110 +1017,126 @@ function SessionEditor({ session, onChange, onRemove, addresses }: {
}) { }) {
const upd = <K extends keyof SessionConfig>(k: K, v: SessionConfig[K]) => const upd = <K extends keyof SessionConfig>(k: K, v: SessionConfig[K]) =>
onChange({ ...session, [k]: v }); onChange({ ...session, [k]: v });
const hasAdvanced = session.has_rest || session.patient_limit !== null; const slotCount = calcSlotCount(session);
const [showAdvanced, setShowAdvanced] = useState(hasAdvanced);
const slotCount = session.active ? calcSlotCount(session) : 0;
return ( return (
<div className={`rounded-xl border transition-colors ${session.active ? 'border-primary-200 dark:border-primary-500/30 bg-white dark:bg-gray-800/60' : 'border-slate-200 dark:border-gray-700 bg-slate-50/40 dark:bg-gray-800/30'}`}> <div style={{ border: '1px solid var(--border)', borderRadius: 'var(--r)', background: 'var(--surface)', overflow: 'hidden' }}>
{/* ─ row اصلی */}
<div className="flex items-center gap-2 px-3 py-2.5 flex-wrap"> {/* Time inputs */}
<button type="button" <div style={{ padding: '14px 16px 12px', display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 12, alignItems: 'end' }}>
onClick={() => upd('active', !session.active)} <div>
className={`relative w-10 h-5 rounded-full transition-colors shrink-0 focus:outline-none ${session.active ? 'bg-primary-500' : 'bg-slate-300 dark:bg-gray-600'}`}> <div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>از ساعت</div>
<span className={`absolute top-0.5 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-150 ${session.active ? 'translate-x-5' : 'translate-x-0.5'}`} /> <div className="field">
</button> <input type="time" dir="ltr" value={session.start_time}
<div className="flex items-center gap-1.5"> onChange={e => upd('start_time', e.target.value)} />
<span className="text-xs text-slate-400 shrink-0">از</span> </div>
<input type="time" value={session.start_time} onChange={e => upd('start_time', e.target.value)}
className="cp-input h-8 w-28 text-sm font-mono text-center px-2" />
<span className="text-xs text-slate-400 shrink-0">تا</span>
<input type="time" value={session.end_time} onChange={e => upd('end_time', e.target.value)}
className="cp-input h-8 w-28 text-sm font-mono text-center px-2" />
</div> </div>
<select value={session.duration_per_patient} onChange={e => upd('duration_per_patient', Number(e.target.value))} <div>
className="cp-select h-8 text-sm"> <div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>تا ساعت</div>
{DURATION_OPTS.map(d => <option key={d} value={d}>{d} دقیقه</option>)} <div className="field">
</select> <input type="time" dir="ltr" value={session.end_time}
{session.active && slotCount > 0 && ( onChange={e => upd('end_time', e.target.value)} />
<span className="text-xs font-medium bg-emerald-100 dark:bg-emerald-500/20 text-emerald-700 dark:text-emerald-300 px-2 py-0.5 rounded-full"> </div>
{slotCount} نوبت </div>
</span> <button type="button" className="mini-btn danger" onClick={onRemove} style={{ marginBottom: 1 }}>
)} <TrashIcon style={{ width: 15, height: 15 }} />
<button type="button" onClick={onRemove}
className="mr-auto w-7 h-7 flex items-center justify-center rounded-lg text-slate-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors shrink-0">
<TrashIcon className="w-3.5 h-3.5" />
</button> </button>
</div> </div>
{session.active && ( {/* Duration + Location + Limit */}
<div className="border-t border-slate-100 dark:border-gray-700 px-3 pb-3 pt-2.5 space-y-2"> <div style={{ padding: '0 16px 14px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
{/* ─ مکان مطب — اجباری */} <div>
{addresses.length > 0 && ( <div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>بازه هر نوبت</div>
<div className="flex items-center gap-2"> <div className="field">
<label className="text-xs text-slate-500 dark:text-slate-400 shrink-0 w-16"> <select value={session.duration_per_patient}
مکان مطب <span className="text-red-500">*</span> onChange={e => upd('duration_per_patient', Number(e.target.value))}>
</label> {DURATION_OPTS.map(d => <option key={d} value={d}>{d} دقیقه</option>)}
<div className="flex-1"> </select>
<select value={session.location_id ?? ''} </div>
onChange={e => upd('location_id', e.target.value ? Number(e.target.value) : null)} </div>
className={`cp-select h-8 text-sm w-full ${!session.location_id ? 'border-red-300 dark:border-red-500/60 focus:ring-red-400' : ''}`}> <div>
<option value="" disabled>انتخاب مطب...</option> <div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>مکان نوبت</div>
{addresses.map(a => ( <div className="field">
<option key={a.id} value={a.id}>{a.name ?? a.address ?? `مطب ${a.id}`}</option> <select value={session.location_id ?? ''}
))} onChange={e => upd('location_id', e.target.value ? Number(e.target.value) : null)}>
</select> <option value="">انتخاب کنید</option>
{!session.location_id && ( {addresses.map(a => (
<p className="text-xs text-red-500 mt-0.5">انتخاب مکان مطب الزامی است</p> <option key={a.id} value={a.id}>{a.name ?? a.address ?? `مطب ${a.id}`}</option>
)} ))}
</div> </select>
</div> </div>
)} </div>
<div>
<div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>حداکثر نوبت</div>
<div className="field">
<input type="number" min={1} placeholder="—"
value={session.patient_limit ?? ''}
onChange={e => upd('patient_limit', e.target.value ? Number(e.target.value) : null)} />
</div>
</div>
</div>
{/* ─ تنظیمات پیشرفته collapse */} {/* Rest toggle */}
<button type="button" onClick={() => setShowAdvanced(v => !v)} <div style={{
className="flex items-center gap-1 text-xs text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"> padding: '12px 16px', display: 'flex', alignItems: 'center',
<ChevronDownIcon className={`w-3.5 h-3.5 transition-transform ${showAdvanced ? 'rotate-180' : ''}`} /> justifyContent: 'space-between', borderTop: '1px solid var(--border)',
{showAdvanced ? 'پنهان کردن' : 'تنظیمات پیشرفته (استراحت · محدودیت نوبت)'} }}>
</button> <div>
{showAdvanced && ( <b style={{ fontSize: 13 }}>استراحت دوره‌ای بین نوبت‌ها</b>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1"> <div className="muted" style={{ fontSize: 12, marginTop: 2 }}>توقف خودکار پس از مدت کاری مشخص</div>
<div> </div>
<label className="text-xs text-slate-500 dark:text-slate-400 block mb-1">حداکثر نوبت</label> <button type="button" onClick={() => upd('has_rest', !session.has_rest)}
<input type="number" min={1} placeholder="بدون محدودیت" style={{
value={session.patient_limit ?? ''} position: 'relative', width: 40, height: 22, borderRadius: 99,
onChange={e => upd('patient_limit', e.target.value ? Number(e.target.value) : null)} border: 'none', cursor: 'pointer', flexShrink: 0,
className="cp-input h-8 text-sm w-full" /> background: session.has_rest ? 'var(--primary)' : 'var(--surface-3)',
</div> transition: 'background .2s',
<div className="sm:col-span-2 space-y-2"> }}>
<label className="flex items-center gap-2 cursor-pointer select-none"> <span style={{
<input type="checkbox" checked={session.has_rest} onChange={e => upd('has_rest', e.target.checked)} position: 'absolute', top: 3, borderRadius: '50%',
className="w-3.5 h-3.5 rounded accent-primary-500" /> width: 16, height: 16, background: '#fff',
<span className="text-xs text-slate-600 dark:text-slate-400">استراحت دوره‌ای بین نوبت‌ها</span> boxShadow: '0 1px 3px rgba(0,0,0,.25)',
</label> insetInlineStart: session.has_rest ? 20 : 3,
{session.has_rest && ( }} />
<div className="flex items-center gap-4 flex-wrap pr-5"> </button>
<div className="flex items-center gap-1.5"> </div>
<span className="text-xs text-slate-500">هر</span>
<input type="number" min={1} value={session.rest_interval} {/* Rest params */}
onChange={e => upd('rest_interval', Number(e.target.value))} {session.has_rest && (
className="cp-input h-7 w-16 text-sm text-center px-1" /> <div style={{ padding: '0 16px 14px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
<span className="text-xs text-slate-500">دقیقه کار</span> <div>
</div> <div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>هر (دقیقه کار)</div>
<div className="flex items-center gap-1.5"> <div className="field">
<span className="text-xs text-slate-500">استراحت</span> <input type="number" min={1} value={session.rest_interval}
<input type="number" min={1} value={session.time_to_rest} onChange={e => upd('rest_interval', Number(e.target.value))} />
onChange={e => upd('time_to_rest', Number(e.target.value))}
className="cp-input h-7 w-16 text-sm text-center px-1" />
<span className="text-xs text-slate-500">دقیقه</span>
</div>
</div>
)}
</div>
</div> </div>
)} </div>
<div>
<div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>استراحت (دقیقه)</div>
<div className="field">
<input type="number" min={1} value={session.time_to_rest}
onChange={e => upd('time_to_rest', Number(e.target.value))} />
</div>
</div>
</div> </div>
)} )}
{/* Slot count footer */}
<div style={{
padding: '10px 16px', display: 'flex', alignItems: 'center',
justifyContent: 'space-between', borderTop: '1px solid var(--border)',
background: 'var(--surface-2)',
}}>
<span className="muted" style={{ fontSize: 12 }}>تعداد نوبت محاسبه‌شده در این بازه</span>
{slotCount > 0 ? (
<span className="badge green">
<CheckCircleIcon style={{ width: 13, height: 13 }} />
{slotCount} نوبت
</span>
) : (
<span className="muted" style={{ fontSize: 12 }}>—</span>
)}
</div>
</div> </div>
); );
} }
@@ -1228,65 +1244,59 @@ function WeeklyScheduleTab({ doctorUuid, addresses }: { doctorUuid: string; addr
)} )}
{SCHEDULE_DAYS.map(day => { {SCHEDULE_DAYS.map(day => {
const sessions = scheduleMap[day.key]?.sessions ?? []; const sessions = scheduleMap[day.key]?.sessions ?? [];
const isOverlap = overlapDays[day.key]; const isOverlap = overlapDays[day.key];
const isExpanded = expandedDay === day.key; const isExpanded = expandedDay === day.key;
const activeSessions = sessions.filter(s => s.active); const activeSessions = sessions.filter(s => s.active);
const daySlots = activeSessions.reduce((sum, s) => sum + calcSlotCount(s), 0); const daySlots = activeSessions.reduce((sum, s) => sum + calcSlotCount(s), 0);
const hasAny = sessions.length > 0;
return ( return (
<div key={day.key} className={`rounded-xl border transition-all ${hasAny ? 'border-primary-200 dark:border-primary-500/30' : 'border-slate-200 dark:border-gray-700'} ${isOverlap ? 'border-red-300 dark:border-red-500/50' : ''}`}> <div key={day.key} className="card" style={{ overflow: 'hidden' }}>
{/* ─ header هر روز */} {/* Day header */}
<div <div
className={`flex items-center gap-2 px-4 py-3 cursor-pointer select-none rounded-xl transition-colors ${hasAny ? 'bg-primary-50/40 dark:bg-primary-500/5 hover:bg-primary-50/70 dark:hover:bg-primary-500/10' : 'bg-slate-50/60 dark:bg-gray-800/30 hover:bg-slate-100/60 dark:hover:bg-gray-800/50'}`} style={{ padding: '12px 16px', display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer', userSelect: 'none' }}
onClick={() => setExpandedDay(isExpanded ? null : day.key)} onClick={() => setExpandedDay(isExpanded ? null : day.key)}
> >
<span className={`text-sm font-semibold w-16 shrink-0 ${hasAny ? 'text-primary-700 dark:text-primary-300' : 'text-slate-500 dark:text-slate-400'}`}> <b style={{ fontSize: 14, minWidth: 56, flexShrink: 0 }}>{day.label}</b>
{day.label} <div style={{ flex: 1, display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', minWidth: 0 }}>
</span>
{/* chips بازه‌های active */}
<div className="flex items-center gap-1.5 flex-wrap flex-1 min-w-0">
{sessions.length === 0 && (
<span className="text-xs text-slate-400 dark:text-slate-500">تعطیل</span>
)}
{activeSessions.map((s, i) => ( {activeSessions.map((s, i) => (
<span key={i} className="text-xs bg-primary-100 dark:bg-primary-500/20 text-primary-700 dark:text-primary-300 px-2 py-0.5 rounded-full font-mono whitespace-nowrap"> <span key={i} style={{ fontSize: 13, fontFamily: 'monospace', color: 'var(--text-2)', direction: 'ltr', whiteSpace: 'nowrap' }}>
{s.start_time}–{s.end_time} {s.start_time} — {s.end_time}
</span> </span>
))} ))}
{daySlots > 0 && ( {sessions.length === 0 && <span className="muted" style={{ fontSize: 12 }}>تعطیل</span>}
<span className="text-xs text-emerald-600 dark:text-emerald-400 font-medium">
({daySlots} نوبت)
</span>
)}
{isOverlap && (
<span className="flex items-center gap-0.5 text-xs text-red-500 dark:text-red-400">
<ExclamationTriangleIcon className="w-3.5 h-3.5" />تداخل
</span>
)}
</div>
<div className="flex items-center gap-1 shrink-0">
<button type="button"
onClick={e => { e.stopPropagation(); addSession(day.key); }}
className="flex items-center gap-0.5 text-xs text-primary-600 dark:text-primary-400 hover:bg-primary-100 dark:hover:bg-primary-500/20 px-2 py-1 rounded-lg transition-colors">
<PlusIcon className="w-3.5 h-3.5" />بازه
</button>
<ChevronDownIcon className={`w-4 h-4 text-slate-400 transition-transform ${isExpanded ? 'rotate-180' : ''}`} />
</div> </div>
{daySlots > 0 && (
<span className="badge green" style={{ flexShrink: 0 }}>
<span className="bdot" />{daySlots} نوبت
</span>
)}
{isOverlap && (
<span className="badge red" style={{ flexShrink: 0 }}>
<ExclamationTriangleIcon style={{ width: 12, height: 12 }} />تداخل
</span>
)}
<button type="button" className="btn ghost sm" style={{ flexShrink: 0 }}
onClick={e => { e.stopPropagation(); addSession(day.key); }}>
<PlusIcon style={{ width: 13, height: 13 }} />
بازه
</button>
<ChevronDownIcon style={{
width: 16, height: 16, flexShrink: 0, color: 'var(--text-3)',
transform: isExpanded ? 'rotate(180deg)' : 'none',
transition: 'transform .2s',
}} />
</div> </div>
{/* ─ محتوای expanded */} {/* Expanded sessions */}
{isExpanded && ( {isExpanded && (
<div className="border-t border-slate-100 dark:border-gray-700 px-4 pb-4 pt-3 space-y-2"> <div style={{ borderTop: '1px solid var(--border)', padding: '12px 16px 16px', display: 'flex', flexDirection: 'column', gap: 10 }}>
{sessions.length === 0 ? ( {sessions.length === 0 ? (
<div className="text-center py-4"> <div style={{ textAlign: 'center', padding: '16px 0' }}>
<p className="text-xs text-slate-400 dark:text-slate-500 mb-2">هیچ بازه‌ای برای این روز تنظیم نشده</p> <p className="muted" style={{ fontSize: 13, marginBottom: 10 }}>هیچ بازه‌ای برای این روز تنظیم نشده</p>
<button type="button" onClick={() => addSession(day.key)} <button type="button" onClick={() => addSession(day.key)} className="btn ghost sm">
className="text-xs text-primary-600 dark:text-primary-400 hover:underline flex items-center gap-1 mx-auto"> <PlusIcon style={{ width: 14, height: 14 }} />
<PlusIcon className="w-3.5 h-3.5" />افزودن اولین بازه افزودن اولین بازه
</button> </button>
</div> </div>
) : sessions.map((session, idx) => ( ) : sessions.map((session, idx) => (
@@ -1309,11 +1319,8 @@ function WeeklyScheduleTab({ doctorUuid, addresses }: { doctorUuid: string; addr
)} )}
<button type="button" onClick={() => saveMut.mutate()} <button type="button" onClick={() => saveMut.mutate()}
disabled={saveMut.isPending || hasAnyOverlap || missingLocation} disabled={saveMut.isPending || hasAnyOverlap || missingLocation}
className="mr-auto cp-btn-primary disabled:opacity-50 disabled:cursor-not-allowed"> className="btn primary sm" style={{ marginInlineStart: 'auto', opacity: (saveMut.isPending || hasAnyOverlap || missingLocation) ? 0.5 : 1 }}>
{saveMut.isPending {saveMut.isPending ? 'در حال ذخیره...' : 'ذخیره برنامه هفتگی'}
? <><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />در حال ذخیره...</>
: 'ذخیره برنامه هفتگی'
}
</button> </button>
</div> </div>
</div> </div>
assets/admin/pages/DoctorsPage.tsx
+5 -86
View File
@@ -5,8 +5,6 @@ import {
MagnifyingGlassIcon, PlusIcon, EyeIcon, TrashIcon, ArrowPathIcon, MagnifyingGlassIcon, PlusIcon, EyeIcon, TrashIcon, ArrowPathIcon,
CheckCircleIcon, XCircleIcon, TableCellsIcon, Squares2X2Icon, CheckCircleIcon, XCircleIcon, TableCellsIcon, Squares2X2Icon,
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
import { StarIcon as StarSolid } from '@heroicons/react/24/solid';
import { StarIcon } from '@heroicons/react/24/outline';
import { XMarkIcon } from '@heroicons/react/24/outline'; import { XMarkIcon } from '@heroicons/react/24/outline';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { api } from '../lib/api'; import { api } from '../lib/api';
@@ -87,18 +85,6 @@ function DoctorAvatar({ name, id, image, size = 'sm' }: {
); );
} }
function StarRating({ rate }: { rate: number }) {
return (
<span className="stars" dir="ltr">
{Array.from({ length: 5 }).map((_, i) =>
i < Math.round(rate)
? <StarSolid key={i} style={{ width: 13, height: 13 }} />
: <StarIcon key={i} style={{ width: 13, height: 13, color: 'var(--border-2)' }} />
)}
</span>
);
}
// ── Main Page ───────────────────────────────────────────────────────────── // ── Main Page ─────────────────────────────────────────────────────────────
export default function DoctorsPage() { export default function DoctorsPage() {
@@ -112,17 +98,14 @@ export default function DoctorsPage() {
const [status, setStatus] = useState(''); const [status, setStatus] = useState('');
const [specialtyId, setSpecialty] = useState(''); const [specialtyId, setSpecialty] = useState('');
const [view, setView] = useState<'table' | 'grid'>('table'); const [view, setView] = useState<'table' | 'grid'>('table');
const [selected, setSelected] = useState<string[]>([]);
const [deleteTarget, setDeleteTarget] = useState<AdminDoctor | null>(null); const [deleteTarget, setDeleteTarget] = useState<AdminDoctor | null>(null);
const [confirmBulkDel, setConfirmBulkDel] = useState(false);
const [bulkDeleting, setBulkDeleting] = useState(false);
useEffect(() => { useEffect(() => {
const t = setTimeout(() => { setSearch(searchInput); setPage(1); }, 350); const t = setTimeout(() => { setSearch(searchInput); setPage(1); }, 350);
return () => clearTimeout(t); return () => clearTimeout(t);
}, [searchInput]); }, [searchInput]);
useEffect(() => { setPage(1); setSelected([]); }, [status, specialtyId]); useEffect(() => { setPage(1); }, [status, specialtyId]);
// ── Queries ── // ── Queries ──
@@ -182,26 +165,6 @@ export default function DoctorsPage() {
onError: (e: Error) => toast.error(e.message), onError: (e: Error) => toast.error(e.message),
}); });
// ── Bulk ──
const allSelected = items.length > 0 && items.every((d) => selected.includes(d.uuid));
const toggleAll = () => setSelected(allSelected ? [] : items.map((d) => d.uuid));
const toggleOne = (uuid: string) =>
setSelected((prev) => prev.includes(uuid) ? prev.filter((id) => id !== uuid) : [...prev, uuid]);
const handleBulkDelete = async () => {
setBulkDeleting(true);
let count = 0;
for (const uuid of selected) {
try { await api.delete(`/api/v1/doctor/${uuid}`); count++; } catch {}
}
setBulkDeleting(false);
setConfirmBulkDel(false);
setSelected([]);
toast.success(`${formatNumber(count)} پزشک حذف شد`);
qc.invalidateQueries({ queryKey: ['admin-doctors'] });
qc.invalidateQueries({ queryKey: ['doctors-stats'] });
};
const kpiCards = [ const kpiCards = [
{ label: 'کل پزشکان', value: stats?.total, bg: 'var(--surface-3)', color: 'var(--text-2)' }, { label: 'کل پزشکان', value: stats?.total, bg: 'var(--surface-3)', color: 'var(--text-2)' },
@@ -293,33 +256,12 @@ export default function DoctorsPage() {
</div> </div>
</div> </div>
{/* Bulk bar */}
{selected.length > 0 && (
<div style={{
padding: '10px 16px', background: 'var(--primary-soft)',
borderBottom: '1px solid var(--border)',
display: 'flex', alignItems: 'center', gap: 12,
}}>
<span style={{ fontSize: 13, color: 'var(--primary-700)', fontWeight: 600 }}>
{formatNumber(selected.length)} پزشک انتخاب شده
</span>
<div style={{ display: 'flex', gap: 8, marginRight: 'auto' }}>
<button className="btn danger sm" onClick={() => setConfirmBulkDel(true)}>حذف انتخاب‌شده‌ها</button>
<button className="btn ghost sm" onClick={() => setSelected([])}>لغو</button>
</div>
</div>
)}
{/* Table view */} {/* Table view */}
{view === 'table' && ( {view === 'table' && (
<div className="table-wrap"> <div className="table-wrap">
<table className="t"> <table className="t">
<thead> <thead>
<tr> <tr>
<th style={{ width: 42 }}>
<input type="checkbox" checked={allSelected} onChange={toggleAll}
style={{ accentColor: 'var(--primary)', cursor: 'pointer' }} />
</th>
<th>پزشک</th> <th>پزشک</th>
<th>تخصص</th> <th>تخصص</th>
<th>درجه</th> <th>درجه</th>
@@ -332,7 +274,7 @@ export default function DoctorsPage() {
<tbody> <tbody>
{doctorsQ.isLoading && Array.from({ length: 6 }).map((_, i) => ( {doctorsQ.isLoading && Array.from({ length: 6 }).map((_, i) => (
<tr key={i}> <tr key={i}>
{Array.from({ length: 8 }).map((_, j) => ( {Array.from({ length: 7 }).map((_, j) => (
<td key={j}> <td key={j}>
<div className="skeleton" style={{ height: 14, borderRadius: 6, width: j === 1 ? '70%' : '55%' }} /> <div className="skeleton" style={{ height: 14, borderRadius: 6, width: j === 1 ? '70%' : '55%' }} />
</td> </td>
@@ -342,7 +284,7 @@ export default function DoctorsPage() {
{!doctorsQ.isLoading && items.length === 0 && ( {!doctorsQ.isLoading && items.length === 0 && (
<tr> <tr>
<td colSpan={8}> <td colSpan={7}>
<div className="empty">هیچ پزشکی یافت نشد</div> <div className="empty">هیچ پزشکی یافت نشد</div>
</td> </td>
</tr> </tr>
@@ -350,11 +292,6 @@ export default function DoctorsPage() {
{!doctorsQ.isLoading && items.map((doc) => ( {!doctorsQ.isLoading && items.map((doc) => (
<tr key={doc.uuid} style={{ cursor: 'pointer' }} onClick={() => navigate(`/admin/doctors/${doc.uuid}`)}> <tr key={doc.uuid} style={{ cursor: 'pointer' }} onClick={() => navigate(`/admin/doctors/${doc.uuid}`)}>
<td onClick={(e) => e.stopPropagation()}>
<input type="checkbox" checked={selected.includes(doc.uuid)}
onChange={() => toggleOne(doc.uuid)}
style={{ accentColor: 'var(--primary)', cursor: 'pointer' }} />
</td>
<td> <td>
<div className="cell-user"> <div className="cell-user">
<DoctorAvatar name={doc.name} id={doc.id} image={doc.profile_image} /> <DoctorAvatar name={doc.name} id={doc.id} image={doc.profile_image} />
@@ -380,12 +317,7 @@ export default function DoctorsPage() {
</span> </span>
)} )}
</td> </td>
<td> <td><b style={{ fontSize: 12.5 }}>{doc.rate.toFixed(1)}</b></td>
<div className="flex" style={{ gap: 5 }}>
<StarRating rate={doc.rate} />
<b style={{ fontSize: 12.5 }}>{doc.rate.toFixed(1)}</b>
</div>
</td>
<td style={{ fontFamily: 'monospace', direction: 'ltr', textAlign: 'right' }} className="muted"> <td style={{ fontFamily: 'monospace', direction: 'ltr', textAlign: 'right' }} className="muted">
{doc.mobile ?? '—'} {doc.mobile ?? '—'}
</td> </td>
@@ -461,10 +393,7 @@ export default function DoctorsPage() {
</span> </span>
</div> </div>
<div className="flex" style={{ justifyContent: 'space-between', fontSize: 12.5 }}> <div className="flex" style={{ justifyContent: 'space-between', fontSize: 12.5 }}>
<span className="flex" style={{ gap: 5 }}> <b>{doc.rate.toFixed(1)}</b>
<StarRating rate={doc.rate} />
<b>{doc.rate.toFixed(1)}</b>
</span>
<span className="muted">{formatDate(doc.created_at)}</span> <span className="muted">{formatDate(doc.created_at)}</span>
</div> </div>
</div> </div>
@@ -491,16 +420,6 @@ export default function DoctorsPage() {
onCancel={() => setDeleteTarget(null)} onCancel={() => setDeleteTarget(null)}
/> />
<ConfirmDialog
open={confirmBulkDel}
title="حذف گروهی"
message={`آیا از حذف ${formatNumber(selected.length)} پزشک انتخاب‌شده اطمینان دارید؟`}
confirmLabel={`حذف ${formatNumber(selected.length)} پزشک`}
danger
loading={bulkDeleting}
onConfirm={handleBulkDelete}
onCancel={() => setConfirmBulkDel(false)}
/>
</div> </div>
); );
} }
assets/admin/pages/UsersPage.tsx
+5 -66
View File
@@ -165,18 +165,15 @@ export default function UsersPage() {
const [search, setSearch] = useState(''); const [search, setSearch] = useState('');
const [role, setRole] = useState(''); const [role, setRole] = useState('');
const [status, setStatus] = useState(''); const [status, setStatus] = useState('');
const [selected, setSelected] = useState<string[]>([]); const [deleteTarget, setDeleteTarget] = useState<AdminUser | null>(null);
const [deleteTarget, setDeleteTarget] = useState<AdminUser | null>(null); const [roleTarget, setRoleTarget] = useState<AdminUser | null>(null);
const [roleTarget, setRoleTarget] = useState<AdminUser | null>(null);
const [confirmBulkDel, setConfirmBulkDel] = useState(false);
const [bulkDeleting, setBulkDeleting] = useState(false);
useEffect(() => { useEffect(() => {
const t = setTimeout(() => { setSearch(searchInput); setPage(1); }, 350); const t = setTimeout(() => { setSearch(searchInput); setPage(1); }, 350);
return () => clearTimeout(t); return () => clearTimeout(t);
}, [searchInput]); }, [searchInput]);
useEffect(() => { setPage(1); setSelected([]); }, [role, status]); useEffect(() => { setPage(1); }, [role, status]);
// ── Queries ── // ── Queries ──
@@ -238,27 +235,6 @@ export default function UsersPage() {
onError: (e: Error) => toast.error(e.message), onError: (e: Error) => toast.error(e.message),
}); });
// ── Bulk ──
const allSelected = items.length > 0 && items.every((u) => selected.includes(u.uuid));
const toggleAll = () => setSelected(allSelected ? [] : items.map((u) => u.uuid));
const toggleOne = (uuid: string) =>
setSelected((prev) => prev.includes(uuid) ? prev.filter((id) => id !== uuid) : [...prev, uuid]);
const handleBulkDelete = async () => {
setBulkDeleting(true);
let count = 0;
for (const uuid of selected) {
try { await api.delete(`/api/v1/admin/users/${uuid}`); count++; } catch {}
}
setBulkDeleting(false);
setConfirmBulkDel(false);
setSelected([]);
toast.success(`${formatNumber(count)} کاربر حذف شد`);
qc.invalidateQueries({ queryKey: ['users'] });
qc.invalidateQueries({ queryKey: ['users-stats'] });
};
// ── KPI data ── // ── KPI data ──
const kpiCards = [ const kpiCards = [
@@ -335,32 +311,11 @@ export default function UsersPage() {
</div> </div>
</div> </div>
{/* Bulk bar */}
{selected.length > 0 && (
<div style={{
padding: '10px 16px', background: 'var(--primary-soft)',
borderBottom: '1px solid var(--border)',
display: 'flex', alignItems: 'center', gap: 12,
}}>
<span style={{ fontSize: 13, color: 'var(--primary-700)', fontWeight: 600 }}>
{formatNumber(selected.length)} کاربر انتخاب شده
</span>
<div style={{ display: 'flex', gap: 8, marginRight: 'auto' }}>
<button className="btn danger sm" onClick={() => setConfirmBulkDel(true)}>حذف انتخاب‌شده‌ها</button>
<button className="btn ghost sm" onClick={() => setSelected([])}>لغو</button>
</div>
</div>
)}
{/* Table */} {/* Table */}
<div className="table-wrap"> <div className="table-wrap">
<table className="t"> <table className="t">
<thead> <thead>
<tr> <tr>
<th style={{ width: 42 }}>
<input type="checkbox" checked={allSelected} onChange={toggleAll}
style={{ accentColor: 'var(--primary)', cursor: 'pointer' }} />
</th>
<th>کاربر</th> <th>کاربر</th>
<th>شماره موبایل</th> <th>شماره موبایل</th>
<th>نقش</th> <th>نقش</th>
@@ -372,7 +327,7 @@ export default function UsersPage() {
<tbody> <tbody>
{usersQ.isLoading && Array.from({ length: 7 }).map((_, i) => ( {usersQ.isLoading && Array.from({ length: 7 }).map((_, i) => (
<tr key={i}> <tr key={i}>
{Array.from({ length: 7 }).map((_, j) => ( {Array.from({ length: 6 }).map((_, j) => (
<td key={j}> <td key={j}>
<div className="skeleton" style={{ height: 14, borderRadius: 6, width: j === 1 ? '70%' : '55%' }} /> <div className="skeleton" style={{ height: 14, borderRadius: 6, width: j === 1 ? '70%' : '55%' }} />
</td> </td>
@@ -382,7 +337,7 @@ export default function UsersPage() {
{!usersQ.isLoading && items.length === 0 && ( {!usersQ.isLoading && items.length === 0 && (
<tr> <tr>
<td colSpan={7}> <td colSpan={6}>
<div className="empty">هیچ کاربری یافت نشد</div> <div className="empty">هیچ کاربری یافت نشد</div>
</td> </td>
</tr> </tr>
@@ -390,11 +345,6 @@ export default function UsersPage() {
{!usersQ.isLoading && items.map((user) => ( {!usersQ.isLoading && items.map((user) => (
<tr key={user.uuid}> <tr key={user.uuid}>
<td>
<input type="checkbox" checked={selected.includes(user.uuid)}
onChange={() => toggleOne(user.uuid)}
style={{ accentColor: 'var(--primary)', cursor: 'pointer' }} />
</td>
<td> <td>
<div className="cell-user"> <div className="cell-user">
<UserAvatar name={user.name} id={user.id} /> <UserAvatar name={user.name} id={user.id} />
@@ -454,17 +404,6 @@ export default function UsersPage() {
onCancel={() => setDeleteTarget(null)} onCancel={() => setDeleteTarget(null)}
/> />
<ConfirmDialog
open={confirmBulkDel}
title="حذف گروهی"
message={`آیا از حذف ${formatNumber(selected.length)} کاربر انتخاب‌شده اطمینان دارید؟`}
confirmLabel={`حذف ${formatNumber(selected.length)} کاربر`}
danger
loading={bulkDeleting}
onConfirm={handleBulkDelete}
onCancel={() => setConfirmBulkDel(false)}
/>
{roleTarget && ( {roleTarget && (
<ChangeRoleModal <ChangeRoleModal
user={roleTarget} user={roleTarget}