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 {
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>
);
}
assets/admin/components/layout/Topbar.tsx
+44 -83
View File
@@ -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>
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]) =>
onChange({ ...session, [k]: v });
const hasAdvanced = session.has_rest || session.patient_limit !== null;
const [showAdvanced, setShowAdvanced] = useState(hasAdvanced);
const slotCount = session.active ? calcSlotCount(session) : 0;
const slotCount = calcSlotCount(session);
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'}`}>
{/* ─ row اصلی */}
<div className="flex items-center gap-2 px-3 py-2.5 flex-wrap">
<button type="button"
onClick={() => upd('active', !session.active)}
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'}`}>
<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'}`} />
</button>
<div className="flex items-center gap-1.5">
<span className="text-xs text-slate-400 shrink-0">از</span>
<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 style={{ border: '1px solid var(--border)', borderRadius: 'var(--r)', background: 'var(--surface)', overflow: 'hidden' }}>
{/* Time inputs */}
<div style={{ padding: '14px 16px 12px', display: 'grid', gridTemplateColumns: '1fr 1fr auto', gap: 12, alignItems: 'end' }}>
<div>
<div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>از ساعت</div>
<div className="field">
<input type="time" dir="ltr" value={session.start_time}
onChange={e => upd('start_time', e.target.value)} />
</div>
</div>
<select value={session.duration_per_patient} onChange={e => upd('duration_per_patient', Number(e.target.value))}
className="cp-select h-8 text-sm">
{DURATION_OPTS.map(d => <option key={d} value={d}>{d} دقیقه</option>)}
</select>
{session.active && slotCount > 0 && (
<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">
{slotCount} نوبت
</span>
)}
<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" />
<div>
<div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>تا ساعت</div>
<div className="field">
<input type="time" dir="ltr" value={session.end_time}
onChange={e => upd('end_time', e.target.value)} />
</div>
</div>
<button type="button" className="mini-btn danger" onClick={onRemove} style={{ marginBottom: 1 }}>
<TrashIcon style={{ width: 15, height: 15 }} />
</button>
</div>
{session.active && (
<div className="border-t border-slate-100 dark:border-gray-700 px-3 pb-3 pt-2.5 space-y-2">
{/* ─ مکان مطب — اجباری */}
{addresses.length > 0 && (
<div className="flex items-center gap-2">
<label className="text-xs text-slate-500 dark:text-slate-400 shrink-0 w-16">
مکان مطب <span className="text-red-500">*</span>
</label>
<div className="flex-1">
<select value={session.location_id ?? ''}
onChange={e => upd('location_id', e.target.value ? Number(e.target.value) : null)}
className={`cp-select h-8 text-sm w-full ${!session.location_id ? 'border-red-300 dark:border-red-500/60 focus:ring-red-400' : ''}`}>
<option value="" disabled>انتخاب مطب...</option>
{addresses.map(a => (
<option key={a.id} value={a.id}>{a.name ?? a.address ?? `مطب ${a.id}`}</option>
))}
</select>
{!session.location_id && (
<p className="text-xs text-red-500 mt-0.5">انتخاب مکان مطب الزامی است</p>
)}
</div>
</div>
)}
{/* Duration + Location + Limit */}
<div style={{ padding: '0 16px 14px', display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
<div>
<div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>بازه هر نوبت</div>
<div className="field">
<select value={session.duration_per_patient}
onChange={e => upd('duration_per_patient', Number(e.target.value))}>
{DURATION_OPTS.map(d => <option key={d} value={d}>{d} دقیقه</option>)}
</select>
</div>
</div>
<div>
<div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>مکان نوبت</div>
<div className="field">
<select value={session.location_id ?? ''}
onChange={e => upd('location_id', e.target.value ? Number(e.target.value) : null)}>
<option value="">انتخاب کنید</option>
{addresses.map(a => (
<option key={a.id} value={a.id}>{a.name ?? a.address ?? `مطب ${a.id}`}</option>
))}
</select>
</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 */}
<button type="button" onClick={() => setShowAdvanced(v => !v)}
className="flex items-center gap-1 text-xs text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors">
<ChevronDownIcon className={`w-3.5 h-3.5 transition-transform ${showAdvanced ? 'rotate-180' : ''}`} />
{showAdvanced ? 'پنهان کردن' : 'تنظیمات پیشرفته (استراحت · محدودیت نوبت)'}
</button>
{showAdvanced && (
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 pt-1">
<div>
<label className="text-xs text-slate-500 dark:text-slate-400 block mb-1">حداکثر نوبت</label>
<input type="number" min={1} placeholder="بدون محدودیت"
value={session.patient_limit ?? ''}
onChange={e => upd('patient_limit', e.target.value ? Number(e.target.value) : null)}
className="cp-input h-8 text-sm w-full" />
</div>
<div className="sm:col-span-2 space-y-2">
<label className="flex items-center gap-2 cursor-pointer select-none">
<input type="checkbox" checked={session.has_rest} onChange={e => upd('has_rest', e.target.checked)}
className="w-3.5 h-3.5 rounded accent-primary-500" />
<span className="text-xs text-slate-600 dark:text-slate-400">استراحت دوره‌ای بین نوبت‌ها</span>
</label>
{session.has_rest && (
<div className="flex items-center gap-4 flex-wrap pr-5">
<div className="flex items-center gap-1.5">
<span className="text-xs text-slate-500">هر</span>
<input type="number" min={1} value={session.rest_interval}
onChange={e => upd('rest_interval', 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 className="flex items-center gap-1.5">
<span className="text-xs text-slate-500">استراحت</span>
<input type="number" min={1} value={session.time_to_rest}
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>
{/* Rest toggle */}
<div style={{
padding: '12px 16px', display: 'flex', alignItems: 'center',
justifyContent: 'space-between', borderTop: '1px solid var(--border)',
}}>
<div>
<b style={{ fontSize: 13 }}>استراحت دوره‌ای بین نوبت‌ها</b>
<div className="muted" style={{ fontSize: 12, marginTop: 2 }}>توقف خودکار پس از مدت کاری مشخص</div>
</div>
<button type="button" onClick={() => upd('has_rest', !session.has_rest)}
style={{
position: 'relative', width: 40, height: 22, borderRadius: 99,
border: 'none', cursor: 'pointer', flexShrink: 0,
background: session.has_rest ? 'var(--primary)' : 'var(--surface-3)',
transition: 'background .2s',
}}>
<span style={{
position: 'absolute', top: 3, borderRadius: '50%',
width: 16, height: 16, background: '#fff',
boxShadow: '0 1px 3px rgba(0,0,0,.25)',
insetInlineStart: session.has_rest ? 20 : 3,
}} />
</button>
</div>
{/* Rest params */}
{session.has_rest && (
<div style={{ padding: '0 16px 14px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
<div>
<div style={{ fontSize: 12, color: 'var(--text-2)', marginBottom: 5 }}>هر (دقیقه کار)</div>
<div className="field">
<input type="number" min={1} value={session.rest_interval}
onChange={e => upd('rest_interval', Number(e.target.value))} />
</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>
)}
{/* 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>
);
}
@@ -1228,65 +1244,59 @@ function WeeklyScheduleTab({ doctorUuid, addresses }: { doctorUuid: string; addr
)}
{SCHEDULE_DAYS.map(day => {
const sessions = scheduleMap[day.key]?.sessions ?? [];
const isOverlap = overlapDays[day.key];
const isExpanded = expandedDay === day.key;
const sessions = scheduleMap[day.key]?.sessions ?? [];
const isOverlap = overlapDays[day.key];
const isExpanded = expandedDay === day.key;
const activeSessions = sessions.filter(s => s.active);
const daySlots = activeSessions.reduce((sum, s) => sum + calcSlotCount(s), 0);
const hasAny = sessions.length > 0;
const daySlots = activeSessions.reduce((sum, s) => sum + calcSlotCount(s), 0);
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' : ''}`}>
{/* ─ header هر روز */}
<div key={day.key} className="card" style={{ overflow: 'hidden' }}>
{/* Day header */}
<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)}
>
<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'}`}>
{day.label}
</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>
)}
<b style={{ fontSize: 14, minWidth: 56, flexShrink: 0 }}>{day.label}</b>
<div style={{ flex: 1, display: 'flex', gap: 8, alignItems: 'center', flexWrap: 'wrap', minWidth: 0 }}>
{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">
{s.start_time}–{s.end_time}
<span key={i} style={{ fontSize: 13, fontFamily: 'monospace', color: 'var(--text-2)', direction: 'ltr', whiteSpace: 'nowrap' }}>
{s.start_time} — {s.end_time}
</span>
))}
{daySlots > 0 && (
<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' : ''}`} />
{sessions.length === 0 && <span className="muted" style={{ fontSize: 12 }}>تعطیل</span>}
</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>
{/* ─ محتوای expanded */}
{/* Expanded sessions */}
{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 ? (
<div className="text-center py-4">
<p className="text-xs text-slate-400 dark:text-slate-500 mb-2">هیچ بازه‌ای برای این روز تنظیم نشده</p>
<button type="button" onClick={() => addSession(day.key)}
className="text-xs text-primary-600 dark:text-primary-400 hover:underline flex items-center gap-1 mx-auto">
<PlusIcon className="w-3.5 h-3.5" />افزودن اولین بازه
<div style={{ textAlign: 'center', padding: '16px 0' }}>
<p className="muted" style={{ fontSize: 13, marginBottom: 10 }}>هیچ بازه‌ای برای این روز تنظیم نشده</p>
<button type="button" onClick={() => addSession(day.key)} className="btn ghost sm">
<PlusIcon style={{ width: 14, height: 14 }} />
افزودن اولین بازه
</button>
</div>
) : sessions.map((session, idx) => (
@@ -1309,11 +1319,8 @@ function WeeklyScheduleTab({ doctorUuid, addresses }: { doctorUuid: string; addr
)}
<button type="button" onClick={() => saveMut.mutate()}
disabled={saveMut.isPending || hasAnyOverlap || missingLocation}
className="mr-auto cp-btn-primary disabled:opacity-50 disabled:cursor-not-allowed">
{saveMut.isPending
? <><span className="w-4 h-4 border-2 border-white/30 border-t-white rounded-full animate-spin" />در حال ذخیره...</>
: 'ذخیره برنامه هفتگی'
}
className="btn primary sm" style={{ marginInlineStart: 'auto', opacity: (saveMut.isPending || hasAnyOverlap || missingLocation) ? 0.5 : 1 }}>
{saveMut.isPending ? 'در حال ذخیره...' : 'ذخیره برنامه هفتگی'}
</button>
</div>
</div>
assets/admin/pages/DoctorsPage.tsx
+5 -86
View File
@@ -5,8 +5,6 @@ import {
MagnifyingGlassIcon, PlusIcon, EyeIcon, TrashIcon, ArrowPathIcon,
CheckCircleIcon, XCircleIcon, TableCellsIcon, Squares2X2Icon,
} 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 { toast } from 'sonner';
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 ─────────────────────────────────────────────────────────────
export default function DoctorsPage() {
@@ -112,17 +98,14 @@ export default function DoctorsPage() {
const [status, setStatus] = useState('');
const [specialtyId, setSpecialty] = useState('');
const [view, setView] = useState<'table' | 'grid'>('table');
const [selected, setSelected] = useState<string[]>([]);
const [deleteTarget, setDeleteTarget] = useState<AdminDoctor | null>(null);
const [confirmBulkDel, setConfirmBulkDel] = useState(false);
const [bulkDeleting, setBulkDeleting] = useState(false);
useEffect(() => {
const t = setTimeout(() => { setSearch(searchInput); setPage(1); }, 350);
return () => clearTimeout(t);
}, [searchInput]);
useEffect(() => { setPage(1); setSelected([]); }, [status, specialtyId]);
useEffect(() => { setPage(1); }, [status, specialtyId]);
// ── Queries ──
@@ -182,26 +165,6 @@ export default function DoctorsPage() {
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 = [
{ label: 'کل پزشکان', value: stats?.total, bg: 'var(--surface-3)', color: 'var(--text-2)' },
@@ -293,33 +256,12 @@ export default function DoctorsPage() {
</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 */}
{view === 'table' && (
<div className="table-wrap">
<table className="t">
<thead>
<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>
@@ -332,7 +274,7 @@ export default function DoctorsPage() {
<tbody>
{doctorsQ.isLoading && Array.from({ length: 6 }).map((_, i) => (
<tr key={i}>
{Array.from({ length: 8 }).map((_, j) => (
{Array.from({ length: 7 }).map((_, j) => (
<td key={j}>
<div className="skeleton" style={{ height: 14, borderRadius: 6, width: j === 1 ? '70%' : '55%' }} />
</td>
@@ -342,7 +284,7 @@ export default function DoctorsPage() {
{!doctorsQ.isLoading && items.length === 0 && (
<tr>
<td colSpan={8}>
<td colSpan={7}>
<div className="empty">هیچ پزشکی یافت نشد</div>
</td>
</tr>
@@ -350,11 +292,6 @@ export default function DoctorsPage() {
{!doctorsQ.isLoading && items.map((doc) => (
<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>
<div className="cell-user">
<DoctorAvatar name={doc.name} id={doc.id} image={doc.profile_image} />
@@ -380,12 +317,7 @@ export default function DoctorsPage() {
</span>
)}
</td>
<td>
<div className="flex" style={{ gap: 5 }}>
<StarRating rate={doc.rate} />
<b style={{ fontSize: 12.5 }}>{doc.rate.toFixed(1)}</b>
</div>
</td>
<td><b style={{ fontSize: 12.5 }}>{doc.rate.toFixed(1)}</b></td>
<td style={{ fontFamily: 'monospace', direction: 'ltr', textAlign: 'right' }} className="muted">
{doc.mobile ?? '—'}
</td>
@@ -461,10 +393,7 @@ export default function DoctorsPage() {
</span>
</div>
<div className="flex" style={{ justifyContent: 'space-between', fontSize: 12.5 }}>
<span className="flex" style={{ gap: 5 }}>
<StarRating rate={doc.rate} />
<b>{doc.rate.toFixed(1)}</b>
</span>
<b>{doc.rate.toFixed(1)}</b>
<span className="muted">{formatDate(doc.created_at)}</span>
</div>
</div>
@@ -491,16 +420,6 @@ export default function DoctorsPage() {
onCancel={() => setDeleteTarget(null)}
/>
<ConfirmDialog
open={confirmBulkDel}
title="حذف گروهی"
message={`آیا از حذف ${formatNumber(selected.length)} پزشک انتخاب‌شده اطمینان دارید؟`}
confirmLabel={`حذف ${formatNumber(selected.length)} پزشک`}
danger
loading={bulkDeleting}
onConfirm={handleBulkDelete}
onCancel={() => setConfirmBulkDel(false)}
/>
</div>
);
}
assets/admin/pages/UsersPage.tsx
+5 -66
View File
@@ -165,18 +165,15 @@ export default function UsersPage() {
const [search, setSearch] = useState('');
const [role, setRole] = useState('');
const [status, setStatus] = useState('');
const [selected, setSelected] = useState<string[]>([]);
const [deleteTarget, setDeleteTarget] = useState<AdminUser | null>(null);
const [roleTarget, setRoleTarget] = useState<AdminUser | null>(null);
const [confirmBulkDel, setConfirmBulkDel] = useState(false);
const [bulkDeleting, setBulkDeleting] = useState(false);
const [deleteTarget, setDeleteTarget] = useState<AdminUser | null>(null);
const [roleTarget, setRoleTarget] = useState<AdminUser | null>(null);
useEffect(() => {
const t = setTimeout(() => { setSearch(searchInput); setPage(1); }, 350);
return () => clearTimeout(t);
}, [searchInput]);
useEffect(() => { setPage(1); setSelected([]); }, [role, status]);
useEffect(() => { setPage(1); }, [role, status]);
// ── Queries ──
@@ -238,27 +235,6 @@ export default function UsersPage() {
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 ──
const kpiCards = [
@@ -335,32 +311,11 @@ export default function UsersPage() {
</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 */}
<div className="table-wrap">
<table className="t">
<thead>
<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>
@@ -372,7 +327,7 @@ export default function UsersPage() {
<tbody>
{usersQ.isLoading && Array.from({ length: 7 }).map((_, i) => (
<tr key={i}>
{Array.from({ length: 7 }).map((_, j) => (
{Array.from({ length: 6 }).map((_, j) => (
<td key={j}>
<div className="skeleton" style={{ height: 14, borderRadius: 6, width: j === 1 ? '70%' : '55%' }} />
</td>
@@ -382,7 +337,7 @@ export default function UsersPage() {
{!usersQ.isLoading && items.length === 0 && (
<tr>
<td colSpan={7}>
<td colSpan={6}>
<div className="empty">هیچ کاربری یافت نشد</div>
</td>
</tr>
@@ -390,11 +345,6 @@ export default function UsersPage() {
{!usersQ.isLoading && items.map((user) => (
<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>
<div className="cell-user">
<UserAvatar name={user.name} id={user.id} />
@@ -454,17 +404,6 @@ export default function UsersPage() {
onCancel={() => setDeleteTarget(null)}
/>
<ConfirmDialog
open={confirmBulkDel}
title="حذف گروهی"
message={`آیا از حذف ${formatNumber(selected.length)} کاربر انتخاب‌شده اطمینان دارید؟`}
confirmLabel={`حذف ${formatNumber(selected.length)} کاربر`}
danger
loading={bulkDeleting}
onConfirm={handleBulkDelete}
onCancel={() => setConfirmBulkDel(false)}
/>
{roleTarget && (
<ChangeRoleModal
user={roleTarget}