Refactor code structure for improved readability and maintainability
This commit is contained in:
hamed
@@ -1,22 +1,37 @@
|
||||
import React, { useEffect } from 'react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Outlet } from 'react-router-dom';
|
||||
import Sidebar from './Sidebar';
|
||||
import Topbar from './Topbar';
|
||||
import { useUiStore } from '../../stores/uiStore';
|
||||
|
||||
export default function AdminLayout() {
|
||||
const darkMode = useUiStore((s) => s.darkMode);
|
||||
const darkMode = useUiStore((s) => s.darkMode);
|
||||
const density = useUiStore((s) => s.density);
|
||||
const brandHue = useUiStore((s) => s.brandHue);
|
||||
const sidebarOpen = useUiStore((s) => s.sidebarOpen);
|
||||
const setSidebarOpen = useUiStore((s) => s.setSidebarOpen);
|
||||
const [mobileOpen, setMobileOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.classList.toggle('dark', darkMode);
|
||||
}, [darkMode]);
|
||||
const root = document.documentElement;
|
||||
root.classList.toggle('dark', darkMode);
|
||||
root.setAttribute('data-theme', darkMode ? 'dark' : 'light');
|
||||
root.setAttribute('data-density', density);
|
||||
root.style.setProperty('--brand-h', String(brandHue.h));
|
||||
root.style.setProperty('--brand-c', String(brandHue.c));
|
||||
}, [darkMode, density, brandHue]);
|
||||
|
||||
return (
|
||||
<div className="flex h-screen overflow-hidden bg-slate-100 dark:bg-gray-950 transition-colors duration-200">
|
||||
<Sidebar />
|
||||
<div className="flex flex-col flex-1 overflow-hidden min-w-0">
|
||||
<Topbar />
|
||||
<main className="flex-1 overflow-y-auto p-5 lg:p-6">
|
||||
<div
|
||||
className="app"
|
||||
data-collapsed={!sidebarOpen ? 'true' : 'false'}
|
||||
data-mobile-open={mobileOpen ? 'true' : 'false'}
|
||||
>
|
||||
<div className="scrim" onClick={() => setMobileOpen(false)} />
|
||||
<Sidebar mobileOpen={mobileOpen} onMobileClose={() => setMobileOpen(false)} />
|
||||
<div className="main">
|
||||
<Topbar onMobileMenuOpen={() => setMobileOpen(true)} />
|
||||
<main className="content">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
|
||||
@@ -1,21 +1,10 @@
|
||||
import React from 'react';
|
||||
import { NavLink, useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
ChartBarIcon,
|
||||
UserGroupIcon,
|
||||
HeartIcon,
|
||||
BuildingOffice2Icon,
|
||||
CalendarDaysIcon,
|
||||
CreditCardIcon,
|
||||
BanknotesIcon,
|
||||
UsersIcon,
|
||||
ChatBubbleLeftEllipsisIcon,
|
||||
StarIcon,
|
||||
DevicePhoneMobileIcon,
|
||||
TagIcon,
|
||||
DocumentTextIcon,
|
||||
KeyIcon,
|
||||
Bars3Icon,
|
||||
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';
|
||||
@@ -25,144 +14,111 @@ 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: 'کلینیکها' },
|
||||
{ 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: 'تسویهحساب' },
|
||||
{ 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: 'پیامک' },
|
||||
{ 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: 'منشیها' },
|
||||
{ to: '/admin/categories', icon: TagIcon, label: 'دستهبندیها' },
|
||||
{ to: '/admin/representations', icon: UsersIcon, label: 'نمایندگان' },
|
||||
{ to: '/admin/secretaries', icon: KeyIcon, label: 'منشیها' },
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
export default function Sidebar() {
|
||||
const open = useUiStore((s) => s.sidebarOpen);
|
||||
const toggle = useUiStore((s) => s.toggleSidebar);
|
||||
interface Props {
|
||||
mobileOpen?: boolean;
|
||||
onMobileClose?: () => void;
|
||||
}
|
||||
|
||||
export default function Sidebar({ mobileOpen: _mobileOpen, onMobileClose: _onMobileClose }: Props) {
|
||||
const sidebarOpen = useUiStore((s) => s.sidebarOpen);
|
||||
const toggleSidebar = useUiStore((s) => s.toggleSidebar);
|
||||
const logout = useAuthStore((s) => s.logout);
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<aside
|
||||
className={`
|
||||
${open ? 'w-64' : 'w-[70px]'}
|
||||
shrink-0 flex flex-col h-screen overflow-hidden
|
||||
transition-[width] duration-300 ease-in-out
|
||||
bg-[#100c22] dark:bg-gray-950
|
||||
border-l border-white/5
|
||||
`}
|
||||
>
|
||||
{/* ── Header ─────────────────────────────── */}
|
||||
<div className={`flex items-center h-16 px-3 shrink-0 border-b border-white/[0.06] ${open ? 'gap-3' : 'justify-center'}`}>
|
||||
{open && (
|
||||
<div className="flex items-center gap-2.5 flex-1 min-w-0">
|
||||
<div className="w-8 h-8 rounded-lg bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-lg shadow-violet-900/40 shrink-0">
|
||||
<HeartIcon className="w-4 h-4 text-white" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="text-white font-bold text-sm leading-none truncate">ClinicPro</p>
|
||||
<p className="text-slate-500 text-[10px] leading-none mt-0.5">پنل مدیریت</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<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={toggle}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-500 hover:text-slate-200 hover:bg-white/8 transition-colors shrink-0"
|
||||
title={open ? 'بستن منو' : 'باز کردن منو'}
|
||||
onClick={toggleSidebar}
|
||||
className="icon-btn"
|
||||
style={{ marginInlineStart: 'auto', width: 32, height: 32, flexShrink: 0 }}
|
||||
title={sidebarOpen ? 'جمع کردن منو' : 'باز کردن منو'}
|
||||
>
|
||||
<Bars3Icon className="w-5 h-5" />
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
|
||||
<line x1="3" y1="6" x2="21" y2="6" />
|
||||
<line x1="3" y1="12" x2="21" y2="12" />
|
||||
<line x1="3" y1="18" x2="21" y2="18" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Navigation ─────────────────────────── */}
|
||||
<nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
|
||||
{sections.map((section, si) => (
|
||||
<div key={section.label} className={si > 0 ? 'mt-4' : ''}>
|
||||
{open ? (
|
||||
<p className="text-[10px] font-semibold text-slate-600 uppercase tracking-widest px-3 py-1.5 mb-0.5">
|
||||
{section.label}
|
||||
</p>
|
||||
) : (
|
||||
<div className="border-t border-white/[0.06] mx-1 my-2" />
|
||||
)}
|
||||
{/* 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={!open ? label : undefined}
|
||||
className={({ isActive }) => `
|
||||
relative flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm
|
||||
transition-all duration-150 group
|
||||
${isActive
|
||||
? 'bg-violet-500/15 text-violet-300 font-semibold'
|
||||
: 'text-slate-500 hover:text-slate-200 hover:bg-white/[0.06]'}
|
||||
`}
|
||||
title={!sidebarOpen ? label : undefined}
|
||||
className={({ isActive }) => `nav-item${isActive ? ' active' : ''}`}
|
||||
>
|
||||
{({ isActive }) => (
|
||||
<>
|
||||
{isActive && (
|
||||
<span className="absolute right-0 top-1/2 -translate-y-1/2 w-[3px] h-5 bg-violet-400 rounded-l-full" />
|
||||
)}
|
||||
<Icon className={`w-5 h-5 shrink-0 transition-transform duration-150 group-hover:scale-105 ${isActive ? 'text-violet-400' : ''}`} />
|
||||
{open && <span className="truncate">{label}</span>}
|
||||
</>
|
||||
)}
|
||||
<Icon style={{ width: 19, height: 19, flexShrink: 0 }} />
|
||||
<span>{label}</span>
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
|
||||
{/* ── User footer ────────────────────────── */}
|
||||
<div className="shrink-0 border-t border-white/[0.06] p-2.5">
|
||||
{open ? (
|
||||
<div className="flex items-center gap-3 rounded-xl px-3 py-2.5 hover:bg-white/[0.06] transition-colors group">
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-white text-xs font-bold shrink-0 shadow-md shadow-violet-900/30">
|
||||
A
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-slate-300 truncate leading-none">Admin</p>
|
||||
<p className="text-[11px] text-slate-600 truncate mt-0.5">مدیر سیستم</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { logout(); navigate('/admin/login'); }}
|
||||
className="text-slate-600 hover:text-red-400 transition-colors p-1 rounded-lg hover:bg-red-400/10 opacity-0 group-hover:opacity-100"
|
||||
title="خروج"
|
||||
>
|
||||
<ArrowLeftOnRectangleIcon className="w-4 h-4" />
|
||||
</button>
|
||||
{/* 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>
|
||||
) : (
|
||||
<button
|
||||
onClick={() => { logout(); navigate('/admin/login'); }}
|
||||
className="w-full flex justify-center py-2.5 text-slate-600 hover:text-red-400 transition-colors rounded-xl hover:bg-red-400/10"
|
||||
title="خروج"
|
||||
>
|
||||
<ArrowLeftOnRectangleIcon className="w-5 h-5" />
|
||||
</button>
|
||||
)}
|
||||
<ArrowLeftOnRectangleIcon
|
||||
style={{ width: 16, height: 16, flexShrink: 0, color: 'var(--text-3)' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
);
|
||||
|
||||
@@ -1,57 +1,221 @@
|
||||
import React from 'react';
|
||||
import { BellIcon, SunIcon, MoonIcon, Bars3Icon } from '@heroicons/react/24/outline';
|
||||
import { useUiStore } from '../../stores/uiStore';
|
||||
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';
|
||||
|
||||
export default function Topbar() {
|
||||
const toggleSidebar = useUiStore((s) => s.toggleSidebar);
|
||||
const darkMode = useUiStore((s) => s.darkMode);
|
||||
const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
|
||||
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);
|
||||
const toggleSettingsPanel = useUiStore((s) => s.toggleSettingsPanel);
|
||||
|
||||
const crumbs = getCrumbs(location.pathname);
|
||||
|
||||
return (
|
||||
<header className="h-14 bg-white dark:bg-gray-900 border-b border-slate-200 dark:border-gray-700/50 flex items-center justify-between px-4 lg:px-6 shrink-0 transition-colors duration-200">
|
||||
{/* Left side (RTL: right side visually) */}
|
||||
<button
|
||||
onClick={toggleSidebar}
|
||||
className="lg:hidden w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<Bars3Icon className="w-5 h-5" />
|
||||
</button>
|
||||
<>
|
||||
<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>
|
||||
|
||||
<div className="flex-1" />
|
||||
{/* Mobile menu open — mobile only */}
|
||||
<button className="icon-btn grid lg:hidden" onClick={onMobileMenuOpen} title="منو">
|
||||
<Bars3Icon style={{ width: 20, height: 20 }} />
|
||||
</button>
|
||||
|
||||
{/* Right side actions */}
|
||||
<div className="flex items-center gap-1">
|
||||
{/* Dark mode toggle */}
|
||||
<button
|
||||
onClick={toggleDarkMode}
|
||||
className="w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
|
||||
title={darkMode ? 'حالت روشن' : 'حالت تاریک'}
|
||||
>
|
||||
{/* Search bar */}
|
||||
<div className="topbar-search">
|
||||
<MagnifyingGlassIcon style={{ width: 18, height: 18, 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 className="w-5 h-5 text-amber-400" />
|
||||
: <MoonIcon className="w-5 h-5" />}
|
||||
? <SunIcon style={{ width: 19, height: 19, color: '#f59e0b' }} />
|
||||
: <MoonIcon style={{ width: 19, height: 19 }} />}
|
||||
</button>
|
||||
|
||||
{/* Notifications */}
|
||||
<button className="relative w-9 h-9 flex items-center justify-center rounded-xl text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors">
|
||||
<BellIcon className="w-5 h-5" />
|
||||
<span className="absolute top-2 right-2 w-1.5 h-1.5 bg-red-500 rounded-full ring-2 ring-white dark:ring-gray-900" />
|
||||
{/* Bell */}
|
||||
<button className="icon-btn" title="اعلانها">
|
||||
<BellIcon style={{ width: 19, height: 19 }} />
|
||||
<span className="dot" />
|
||||
</button>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="w-px h-6 bg-slate-200 dark:bg-gray-700 mx-1" />
|
||||
|
||||
{/* Avatar */}
|
||||
<div className="flex items-center gap-2.5 cursor-pointer pl-1">
|
||||
<div className="w-8 h-8 rounded-full bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center text-white text-sm font-bold shadow-sm">
|
||||
A
|
||||
</div>
|
||||
<div className="hidden sm:block">
|
||||
<p className="text-sm font-semibold text-slate-700 dark:text-slate-200 leading-none">Admin</p>
|
||||
<p className="text-[11px] text-slate-400 dark:text-slate-500 leading-none mt-0.5">مدیر سیستم</p>
|
||||
<div className="cp-avatar" style={{ cursor: 'pointer' }}>A</div>
|
||||
</header>
|
||||
|
||||
{/* Settings Panel */}
|
||||
{settingsPanelOpen && (
|
||||
<div
|
||||
className="overlay"
|
||||
style={{ placeItems: 'stretch', justifyContent: 'flex-start' }}
|
||||
onClick={toggleSettingsPanel}
|
||||
>
|
||||
<div
|
||||
className="modal settings-panel"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="modal-head">
|
||||
<h2>شخصیسازی</h2>
|
||||
<button className="mini-btn" onClick={toggleSettingsPanel}>
|
||||
<XMarkIcon style={{ width: 18, height: 18 }} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body" style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
|
||||
|
||||
{/* Theme */}
|
||||
<div className="form-row">
|
||||
<label>حالت نمایش</label>
|
||||
<div className="seg" style={{ width: '100%' }}>
|
||||
<button
|
||||
className={!darkMode ? 'on' : ''}
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => { if (darkMode) toggleDarkMode(); }}
|
||||
>
|
||||
<SunIcon style={{ width: 15, height: 15, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 6 }} />
|
||||
روشن
|
||||
</button>
|
||||
<button
|
||||
className={darkMode ? 'on' : ''}
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => { if (!darkMode) toggleDarkMode(); }}
|
||||
>
|
||||
<MoonIcon style={{ width: 15, height: 15, display: 'inline', verticalAlign: 'middle', marginInlineEnd: 6 }} />
|
||||
تیره
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Brand color */}
|
||||
<div className="form-row">
|
||||
<label>رنگ اصلی</label>
|
||||
<div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
|
||||
{HUES.map((hue) => (
|
||||
<button
|
||||
key={hue.h}
|
||||
onClick={() => setBrandHue(hue as BrandHue)}
|
||||
title={hue.name}
|
||||
style={{
|
||||
width: 42, height: 42, borderRadius: 12,
|
||||
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 }} />}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Density */}
|
||||
<div className="form-row">
|
||||
<label>تراکم اطلاعات</label>
|
||||
<div className="seg" style={{ width: '100%' }}>
|
||||
<button
|
||||
className={density === 'comfortable' ? 'on' : ''}
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => setDensity('comfortable')}
|
||||
>جادار</button>
|
||||
<button
|
||||
className={density === 'compact' ? 'on' : ''}
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => setDensity('compact')}
|
||||
>فشرده</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="form-row">
|
||||
<label>سایدبار</label>
|
||||
<div className="seg" style={{ width: '100%' }}>
|
||||
<button
|
||||
className={sidebarOpen ? 'on' : ''}
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => { if (!sidebarOpen) toggleSidebar(); }}
|
||||
>کامل</button>
|
||||
<button
|
||||
className={!sidebarOpen ? 'on' : ''}
|
||||
style={{ flex: 1 }}
|
||||
onClick={() => { if (sidebarOpen) toggleSidebar(); }}
|
||||
>جمعشده</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
padding: 14, background: 'var(--surface-2)', borderRadius: 'var(--r)',
|
||||
fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.9, marginTop: 8,
|
||||
}}>
|
||||
<Cog6ToothIcon style={{ width: 15, height: 15, verticalAlign: 'middle', marginInlineEnd: 6 }} />
|
||||
تنظیمات شما بهصورت خودکار ذخیره میشود و در بازدید بعدی حفظ میماند.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
||||
import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
@@ -27,43 +27,36 @@ export default function ConfirmDialog({
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
|
||||
<div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" onClick={onCancel} />
|
||||
<div
|
||||
className="relative bg-white dark:bg-gray-900 rounded-2xl shadow-2xl dark:shadow-black/40 border border-slate-200/60 dark:border-gray-700/50 w-full max-w-sm p-6 animate-scale-in"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${danger ? 'bg-red-100 dark:bg-red-500/10' : 'bg-amber-100 dark:bg-amber-500/10'}`}>
|
||||
<ExclamationTriangleIcon className={`w-5 h-5 ${danger ? 'text-red-600 dark:text-red-400' : 'text-amber-600 dark:text-amber-400'}`} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100 text-base leading-snug">{title}</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed">{message}</p>
|
||||
<div className="overlay" onClick={onCancel}>
|
||||
<div className="modal" style={{ maxWidth: 420 }} onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-head">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<span style={{
|
||||
width: 36, height: 36, borderRadius: 10, display: 'grid', placeItems: 'center', flexShrink: 0,
|
||||
background: danger ? 'var(--danger-bg)' : 'var(--warning-bg)',
|
||||
color: danger ? 'var(--danger)' : 'var(--warning)',
|
||||
}}>
|
||||
<ExclamationTriangleIcon style={{ width: 18, height: 18 }} />
|
||||
</span>
|
||||
<h2 style={{ fontSize: 16 }}>{title}</h2>
|
||||
</div>
|
||||
<button className="mini-btn" onClick={onCancel}>
|
||||
<XMarkIcon style={{ width: 18, height: 18 }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 mt-6 justify-end">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
className="cp-btn-secondary px-5 py-2"
|
||||
>
|
||||
<div className="modal-body">
|
||||
<p style={{ color: 'var(--text-2)', lineHeight: 1.75, margin: 0 }}>{message}</p>
|
||||
</div>
|
||||
<div className="modal-foot" style={{ justifyContent: 'flex-end' }}>
|
||||
<button className="btn ghost sm" onClick={onCancel} disabled={loading}>
|
||||
{cancelLabel}
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${danger ? 'danger' : 'primary'} sm`}
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
className={`px-5 py-2 text-white font-medium ${danger ? 'cp-btn-danger' : 'cp-btn-primary'}`}
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
|
||||
</svg>
|
||||
در حال انجام...
|
||||
</span>
|
||||
) : confirmLabel}
|
||||
{loading ? 'در حال انجام...' : confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,8 +26,8 @@ function SkeletonRow({ cols }: { cols: number }) {
|
||||
return (
|
||||
<tr>
|
||||
{Array.from({ length: cols }).map((_, i) => (
|
||||
<td key={i} className="px-4 py-3.5">
|
||||
<div className="h-4 rounded-lg skeleton" style={{ width: `${60 + (i * 17) % 40}%` }} />
|
||||
<td key={i}>
|
||||
<div className="skeleton" style={{ height: 14, borderRadius: 6, width: `${55 + (i * 17) % 40}%` }} />
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
@@ -47,83 +47,78 @@ export default function DataTable<T extends object>({
|
||||
headerExtra,
|
||||
}: Props<T>) {
|
||||
const allColumns = actions
|
||||
? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-28' }]
|
||||
? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-[120px]' }]
|
||||
: columns;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Search + extras header bar */}
|
||||
{/* Toolbar row */}
|
||||
{(onSearchChange !== undefined || headerExtra) && (
|
||||
<div className="flex items-center justify-between gap-3 mb-4 flex-wrap">
|
||||
<div className="toolbar">
|
||||
{onSearchChange !== undefined && (
|
||||
<div className="relative w-full sm:w-72">
|
||||
<MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-slate-500 pointer-events-none" />
|
||||
<div className="field" style={{ flex: '0 0 auto', minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 16, height: 16, flexShrink: 0 }} />
|
||||
<input
|
||||
type="text"
|
||||
value={searchValue}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
placeholder={searchPlaceholder}
|
||||
className="cp-input pr-9"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{headerExtra && <div className="flex items-center gap-2">{headerExtra}</div>}
|
||||
{headerExtra && <>{headerExtra}</>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="overflow-x-auto rounded-xl border border-slate-200 dark:border-gray-700/50">
|
||||
<table className="w-full text-sm">
|
||||
<div className="table-wrap">
|
||||
<table className="t">
|
||||
<thead>
|
||||
<tr className="bg-slate-50 dark:bg-gray-800/60 border-b border-slate-200 dark:border-gray-700/50">
|
||||
<tr>
|
||||
{allColumns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
className={`px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap ${col.className ?? ''}`}
|
||||
>
|
||||
<th key={col.key} className={col.className ?? ''}>
|
||||
{col.header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
|
||||
<tbody>
|
||||
{loading ? (
|
||||
Array.from({ length: 6 }).map((_, i) => (
|
||||
<SkeletonRow key={i} cols={allColumns.length} />
|
||||
))
|
||||
) : data.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={allColumns.length} className="py-16 text-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-gray-800 flex items-center justify-center">
|
||||
<svg className="w-7 h-7 text-slate-400 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<td colSpan={allColumns.length}>
|
||||
<div style={{ textAlign: 'center', padding: '48px 20px' }}>
|
||||
<div style={{
|
||||
width: 56, height: 56, borderRadius: 16, background: 'var(--surface-2)',
|
||||
display: 'grid', placeItems: 'center', margin: '0 auto 12px',
|
||||
}}>
|
||||
<svg style={{ width: 28, height: 28, color: 'var(--text-3)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">{emptyMessage}</p>
|
||||
<p style={{ fontSize: 13.5, color: 'var(--text-3)', margin: '0 0 12px' }}>{emptyMessage}</p>
|
||||
{emptyAction}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
data.map((row, rowIdx) => (
|
||||
<tr
|
||||
key={rowIdx}
|
||||
className="hover:bg-slate-50/80 dark:hover:bg-gray-800/40 transition-colors"
|
||||
>
|
||||
<tr key={rowIdx}>
|
||||
{columns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
className="px-4 py-3.5 text-slate-700 dark:text-slate-300 whitespace-nowrap"
|
||||
>
|
||||
<td key={col.key} className={col.className ?? ''}>
|
||||
{col.render
|
||||
? col.render(row)
|
||||
: ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
|
||||
</td>
|
||||
))}
|
||||
{actions && (
|
||||
<td className="px-4 py-3.5 whitespace-nowrap">
|
||||
<div className="flex items-center gap-1">{actions(row)}</div>
|
||||
<td>
|
||||
<div className="row-actions">
|
||||
{actions(row)}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
|
||||
@@ -4,10 +4,10 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
|
||||
|
||||
const sizeMap: Record<ModalSize, string> = {
|
||||
sm: 'max-w-sm',
|
||||
md: 'max-w-lg',
|
||||
lg: 'max-w-2xl',
|
||||
xl: 'max-w-4xl',
|
||||
sm: '420px',
|
||||
md: '540px',
|
||||
lg: '720px',
|
||||
xl: '960px',
|
||||
};
|
||||
|
||||
interface Props {
|
||||
@@ -30,43 +30,20 @@ export default function Modal({ open, title, size = 'md', onClose, children, foo
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
|
||||
{/* Backdrop */}
|
||||
<div className="overlay" onClick={onClose}>
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Panel */}
|
||||
<div
|
||||
className={`
|
||||
relative bg-white dark:bg-gray-900
|
||||
rounded-2xl shadow-2xl dark:shadow-black/40
|
||||
border border-slate-200/60 dark:border-gray-700/50
|
||||
w-full ${sizeMap[size]} flex flex-col max-h-[90vh]
|
||||
animate-scale-in
|
||||
`}
|
||||
className="modal"
|
||||
style={{ maxWidth: sizeMap[size] }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-gray-700/50 shrink-0">
|
||||
<h2 className="font-semibold text-slate-900 dark:text-slate-100 text-base">{title}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<XMarkIcon className="w-5 h-5" />
|
||||
<div className="modal-head">
|
||||
<h2>{title}</h2>
|
||||
<button className="mini-btn" onClick={onClose}>
|
||||
<XMarkIcon style={{ width: 18, height: 18 }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5">{children}</div>
|
||||
|
||||
{/* Footer */}
|
||||
{footer && (
|
||||
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-100 dark:border-gray-700/50 shrink-0 bg-slate-50/50 dark:bg-gray-800/30 rounded-b-2xl">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
<div className="modal-body">{children}</div>
|
||||
{footer && <div className="modal-foot">{footer}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -16,30 +16,33 @@ interface Props {
|
||||
|
||||
export default function PageHeader({ title, breadcrumbs, action, description }: Props) {
|
||||
return (
|
||||
<div className="flex items-start justify-between mb-6 gap-4">
|
||||
<div className="min-w-0">
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, marginBottom: 24 }}>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
{breadcrumbs && breadcrumbs.length > 0 && (
|
||||
<nav className="flex items-center gap-0.5 mb-1.5 text-xs text-slate-500 dark:text-slate-400">
|
||||
<nav style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 6, fontSize: 12, color: 'var(--text-3)' }}>
|
||||
{breadcrumbs.map((crumb, i) => (
|
||||
<React.Fragment key={i}>
|
||||
{i > 0 && <ChevronLeftIcon className="w-3 h-3 text-slate-300 dark:text-slate-600 mx-0.5 shrink-0" />}
|
||||
{i > 0 && <ChevronLeftIcon style={{ width: 12, height: 12 }} />}
|
||||
{crumb.to ? (
|
||||
<Link to={crumb.to} className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors truncate">
|
||||
<Link to={crumb.to} style={{ color: 'var(--text-3)', textDecoration: 'none' }}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--primary)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-3)')}
|
||||
>
|
||||
{crumb.label}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-slate-700 dark:text-slate-300 font-medium truncate">{crumb.label}</span>
|
||||
<span style={{ color: 'var(--text)', fontWeight: 600 }}>{crumb.label}</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-tight">{title}</h1>
|
||||
<h1 className="section-title">{title}</h1>
|
||||
{description && (
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1">{description}</p>
|
||||
<p style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 4 }}>{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{action && <div className="shrink-0">{action}</div>}
|
||||
{action && <div style={{ flexShrink: 0 }}>{action}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
const from = (page - 1) * limit + 1;
|
||||
const to = Math.min(page * limit, total);
|
||||
const to = Math.min(page * limit, total);
|
||||
|
||||
const pages: (number | '...')[] = [];
|
||||
if (totalPages <= 7) {
|
||||
@@ -28,32 +28,29 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between mt-5 pt-4 border-t border-slate-100 dark:border-gray-700/40 text-sm flex-wrap gap-3">
|
||||
<span className="text-slate-500 dark:text-slate-400 text-xs">
|
||||
<div className="pagination">
|
||||
<span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
|
||||
نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)} مورد
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="page-btns">
|
||||
<button
|
||||
onClick={() => onPageChange(page - 1)}
|
||||
disabled={page === 1}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronRightIcon className="w-4 h-4" />
|
||||
<ChevronRightIcon style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
|
||||
{pages.map((p, i) =>
|
||||
p === '...' ? (
|
||||
<span key={`dots-${i}`} className="w-8 text-center text-slate-400 dark:text-slate-500 text-xs">…</span>
|
||||
<span key={`d-${i}`} style={{ minWidth: 36, height: 36, display: 'grid', placeItems: 'center', fontSize: 13, color: 'var(--text-3)' }}>
|
||||
…
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => onPageChange(p as number)}
|
||||
className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
|
||||
p === page
|
||||
? 'bg-primary-600 text-white shadow-sm shadow-primary-500/30'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
className={p === page ? 'on' : ''}
|
||||
>
|
||||
{formatNumber(p as number)}
|
||||
</button>
|
||||
@@ -63,9 +60,8 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
|
||||
<button
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
disabled={page === totalPages}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronLeftIcon className="w-4 h-4" />
|
||||
<ChevronLeftIcon style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,63 +1,41 @@
|
||||
import React from 'react';
|
||||
import type { AppointmentStatus, PaymentStatus, SmsTemplateStatus, SettlementStatus } from '../../types';
|
||||
|
||||
const variants: Record<string, string> = {
|
||||
yellow: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-800 dark:text-yellow-300',
|
||||
blue: 'bg-blue-100 dark:bg-blue-400/10 text-blue-800 dark:text-blue-300',
|
||||
purple: 'bg-purple-100 dark:bg-purple-400/10 text-purple-800 dark:text-purple-300',
|
||||
orange: 'bg-orange-100 dark:bg-orange-400/10 text-orange-800 dark:text-orange-300',
|
||||
indigo: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-800 dark:text-indigo-300',
|
||||
green: 'bg-green-100 dark:bg-green-400/10 text-green-800 dark:text-green-300',
|
||||
red: 'bg-red-100 dark:bg-red-400/10 text-red-800 dark:text-red-300',
|
||||
gray: 'bg-slate-100 dark:bg-slate-400/10 text-slate-700 dark:text-slate-400',
|
||||
rose: 'bg-rose-100 dark:bg-rose-400/10 text-rose-800 dark:text-rose-300',
|
||||
};
|
||||
type BadgeColor = 'green' | 'amber' | 'red' | 'blue' | 'violet' | 'gray';
|
||||
|
||||
const dots: Record<string, string> = {
|
||||
yellow: 'bg-yellow-500',
|
||||
blue: 'bg-blue-500',
|
||||
purple: 'bg-purple-500',
|
||||
orange: 'bg-orange-500',
|
||||
indigo: 'bg-indigo-500',
|
||||
green: 'bg-green-500',
|
||||
red: 'bg-red-500',
|
||||
gray: 'bg-slate-400',
|
||||
rose: 'bg-rose-500',
|
||||
};
|
||||
|
||||
const appointmentMap: Record<AppointmentStatus, { color: string; label: string }> = {
|
||||
waiting_for_payment: { color: 'yellow', label: 'انتظار پرداخت' },
|
||||
const appointmentMap: Record<AppointmentStatus, { color: BadgeColor; label: string }> = {
|
||||
waiting_for_payment: { color: 'amber', label: 'انتظار پرداخت' },
|
||||
reserved: { color: 'blue', label: 'رزرو شده' },
|
||||
checked_in: { color: 'purple', label: 'ورود به مطب' },
|
||||
waiting: { color: 'orange', label: 'صف انتظار' },
|
||||
in_progress: { color: 'indigo', label: 'در حال ویزیت' },
|
||||
checked_in: { color: 'violet', label: 'ورود به مطب' },
|
||||
waiting: { color: 'amber', label: 'صف انتظار' },
|
||||
in_progress: { color: 'blue', label: 'در حال ویزیت' },
|
||||
visited: { color: 'green', label: 'ویزیت شده' },
|
||||
completed: { color: 'green', label: 'تکمیل شده' },
|
||||
cancelled_by_user: { color: 'red', label: 'لغو بیمار' },
|
||||
cancelled_by_doctor: { color: 'red', label: 'لغو پزشک' },
|
||||
cancelled_by_admin: { color: 'red', label: 'لغو ادمین' },
|
||||
auto_cancel_unpaid: { color: 'gray', label: 'لغو خودکار' },
|
||||
no_show: { color: 'rose', label: 'غیبت' },
|
||||
no_show: { color: 'gray', label: 'غیبت' },
|
||||
};
|
||||
|
||||
const paymentMap: Record<PaymentStatus, { color: string; label: string }> = {
|
||||
pending: { color: 'yellow', label: 'در انتظار' },
|
||||
received: { color: 'green', label: 'موفق' },
|
||||
canceled: { color: 'red', label: 'لغو شده' },
|
||||
refund: { color: 'blue', label: 'استرداد' },
|
||||
const paymentMap: Record<PaymentStatus, { color: BadgeColor; label: string }> = {
|
||||
pending: { color: 'amber', label: 'در انتظار' },
|
||||
received: { color: 'green', label: 'موفق' },
|
||||
canceled: { color: 'red', label: 'لغو شده' },
|
||||
refund: { color: 'blue', label: 'استرداد' },
|
||||
};
|
||||
|
||||
const smsMap: Record<SmsTemplateStatus, { color: string; label: string }> = {
|
||||
draft: { color: 'gray', label: 'پیشنویس' },
|
||||
pending: { color: 'yellow', label: 'در انتظار تأیید' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
const smsMap: Record<SmsTemplateStatus, { color: BadgeColor; label: string }> = {
|
||||
draft: { color: 'gray', label: 'پیشنویس' },
|
||||
pending: { color: 'amber', label: 'در انتظار تأیید' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
};
|
||||
|
||||
const settlementMap: Record<SettlementStatus, { color: string; label: string }> = {
|
||||
pending: { color: 'yellow', label: 'در انتظار' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
const settlementMap: Record<SettlementStatus, { color: BadgeColor; label: string }> = {
|
||||
pending: { color: 'amber', label: 'در انتظار' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
};
|
||||
|
||||
interface Props {
|
||||
@@ -66,7 +44,7 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function StatusBadge({ type, value }: Props) {
|
||||
let color = 'gray';
|
||||
let color: BadgeColor = 'gray';
|
||||
let label = value;
|
||||
|
||||
if (type === 'appointment') {
|
||||
@@ -87,8 +65,8 @@ export default function StatusBadge({ type, value }: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium ${variants[color] ?? variants.gray}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dots[color] ?? dots.gray}`} />
|
||||
<span className={`badge ${color}`}>
|
||||
<span className="bdot" />
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user