Refactor code structure for improved readability and maintainability
This commit is contained in:
hamed
@@ -53,3 +53,4 @@
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
###< symfony/webpack-encore-bundle ###
|
||||
clinicpro/*
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
@@ -128,7 +128,7 @@ export default function AppointmentDetailPage() {
|
||||
<button
|
||||
onClick={() => newStatus && statusMutation.mutate(newStatus)}
|
||||
disabled={!newStatus || statusMutation.isPending}
|
||||
className="cp-btn-primary"
|
||||
className="btn primary sm"
|
||||
>
|
||||
اعمال
|
||||
</button>
|
||||
|
||||
@@ -1,27 +1,24 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { EyeIcon } from '@heroicons/react/24/outline';
|
||||
import {
|
||||
MagnifyingGlassIcon, EyeIcon,
|
||||
CalendarIcon, ClockIcon, CheckCircleIcon, XCircleIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { api } from '../lib/api';
|
||||
import type { PaginatedResponse } from '../lib/api';
|
||||
import type { Appointment, AppointmentStatus } from '../types';
|
||||
import type { Appointment } from '../types';
|
||||
import { formatDate, formatRial, maskMobile } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import StatusBadge from '../components/ui/StatusBadge';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
|
||||
const STATUS_FILTERS: { value: string; label: string }[] = [
|
||||
const STATUS_FILTERS = [
|
||||
{ value: '', label: 'همه' },
|
||||
{ value: 'waiting_for_payment', label: 'در انتظار پرداخت' },
|
||||
{ value: 'reserved', label: 'رزرو شده' },
|
||||
{ value: 'checked_in', label: 'ورود به مطب' },
|
||||
{ value: 'waiting', label: 'در صف انتظار' },
|
||||
{ value: 'in_progress', label: 'در حال ویزیت' },
|
||||
{ value: 'visited', label: 'ویزیت شده' },
|
||||
{ value: 'completed', label: 'تکمیل شده' },
|
||||
{ value: 'cancelled_by_user', label: 'لغو توسط بیمار' },
|
||||
{ value: 'no_show', label: 'غیبت' },
|
||||
{ value: 'cancelled_by_user', label: 'لغو شده' },
|
||||
];
|
||||
|
||||
export default function AppointmentsPage() {
|
||||
@@ -46,21 +43,28 @@ export default function AppointmentsPage() {
|
||||
key: 'patient',
|
||||
header: 'بیمار',
|
||||
render: (a) => (
|
||||
<div>
|
||||
<p className="font-medium text-slate-800 dark:text-slate-100">{a.patient_name || '—'}</p>
|
||||
<p className="text-xs text-gray-400" dir="ltr">{maskMobile(a.patient_mobile)}</p>
|
||||
<div className="cell-user">
|
||||
<div className="avatar sm" style={{
|
||||
background: `linear-gradient(145deg, oklch(0.62 0.15 222), oklch(0.48 0.16 222))`,
|
||||
}}>
|
||||
{(a.patient_name ?? '؟').slice(0, 2)}
|
||||
</div>
|
||||
<div>
|
||||
<b>{a.patient_name || '—'}</b>
|
||||
<br /><small dir="ltr">{maskMobile(a.patient_mobile)}</small>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ key: 'doctor_name', header: 'پزشک', render: (a) => `دکتر ${a.doctor_name}` },
|
||||
{ key: 'clinic_name', header: 'کلینیک', render: (a) => a.clinic_name ?? '—' },
|
||||
{ key: 'clinic_name', header: 'کلینیک', render: (a) => <span className="muted">{a.clinic_name ?? '—'}</span> },
|
||||
{
|
||||
key: 'appointment_date',
|
||||
header: 'تاریخ نوبت',
|
||||
render: (a) => (
|
||||
<div>
|
||||
<p>{formatDate(a.appointment_date)}</p>
|
||||
<p className="text-xs text-gray-400">{a.appointment_time}</p>
|
||||
<span>{formatDate(a.appointment_date)}</span>
|
||||
<br /><small className="muted">{a.appointment_time}</small>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
@@ -72,53 +76,90 @@ export default function AppointmentsPage() {
|
||||
{
|
||||
key: 'amount',
|
||||
header: 'مبلغ',
|
||||
render: (a) => <span className="text-sm">{formatRial(a.amount)}</span>,
|
||||
render: (a) => <><b>{formatRial(a.amount)}</b> <span className="muted" style={{ fontSize: 11 }}>تومان</span></>,
|
||||
},
|
||||
{ key: 'created_at', header: 'تاریخ ثبت', render: (a) => formatDate(a.created_at) },
|
||||
{ key: 'created_at', header: 'تاریخ ثبت', render: (a) => <span className="muted">{formatDate(a.created_at)}</span> },
|
||||
];
|
||||
|
||||
const items = data?.data ?? [];
|
||||
const total = data?.meta?.totalRecords ?? 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="نوبتها"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نوبتها' }]}
|
||||
/>
|
||||
const statCards = [
|
||||
{ label: 'کل نوبتها', value: total > 0 ? String(total) : null, bg: 'var(--info-bg)', color: 'var(--info)', Icon: CalendarIcon },
|
||||
{ label: 'در انتظار', value: null, bg: 'var(--warning-bg)', color: 'var(--warning)', Icon: ClockIcon },
|
||||
{ label: 'ویزیت شده', value: null, bg: 'var(--success-bg)', color: 'var(--success)', Icon: CheckCircleIcon },
|
||||
{ label: 'لغو شده', value: null, bg: 'var(--danger-bg)', color: 'var(--danger)', Icon: XCircleIcon },
|
||||
];
|
||||
|
||||
<div className="cp-card p-6">
|
||||
<div className="flex items-center gap-3 mb-4 overflow-x-auto pb-1 flex-nowrap sm:flex-wrap">
|
||||
{STATUS_FILTERS.map((f) => (
|
||||
<button
|
||||
key={f.value}
|
||||
onClick={() => { setStatusFilter(f.value); setPage(1); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
|
||||
statusFilter === f.value
|
||||
? 'bg-primary-600 text-white'
|
||||
: 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
return (
|
||||
<div className="fade-in">
|
||||
{/* Header */}
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">نوبتها</h1>
|
||||
<div className="muted" style={{ fontSize: 13, marginTop: 3 }}>مدیریت و پیگیری نوبتهای درمانی</div>
|
||||
</div>
|
||||
<button className="btn primary sm">
|
||||
<CalendarIcon style={{ width: 15, height: 15 }} />
|
||||
ثبت نوبت جدید
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stat cards */}
|
||||
<div className="stat-grid" style={{ gridTemplateColumns: 'repeat(4,1fr)' }}>
|
||||
{statCards.map((c) => (
|
||||
<div key={c.label} className="stat">
|
||||
<div className="ico" style={{ background: c.bg, color: c.color }}>
|
||||
<c.Icon style={{ width: 20, height: 20 }} />
|
||||
</div>
|
||||
<div className="lbl">{c.label}</div>
|
||||
<div className="val">
|
||||
{isLoading
|
||||
? <span className="skeleton" style={{ display: 'inline-block', width: 48, height: 26, borderRadius: 4 }} />
|
||||
: c.value ?? '—'}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Main card */}
|
||||
<div className="card">
|
||||
<div className="card-pad" style={{ paddingBottom: 0 }}>
|
||||
<div className="toolbar">
|
||||
<div className="field" style={{ minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
|
||||
<input
|
||||
placeholder="جستجو بر اساس موبایل یا نام..."
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
/>
|
||||
</div>
|
||||
<div className="seg">
|
||||
{STATUS_FILTERS.map((f) => (
|
||||
<button
|
||||
key={f.value}
|
||||
className={statusFilter === f.value ? 'on' : ''}
|
||||
onClick={() => { setStatusFilter(f.value); setPage(1); }}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable<Appointment>
|
||||
columns={columns}
|
||||
data={items}
|
||||
loading={isLoading}
|
||||
searchValue={search}
|
||||
onSearchChange={(v) => { setSearch(v); setPage(1); }}
|
||||
searchPlaceholder="جستجو بر اساس موبایل یا نام پزشک..."
|
||||
emptyMessage="هیچ نوبتی یافت نشد"
|
||||
actions={(appt) => (
|
||||
<button
|
||||
className="mini-btn"
|
||||
onClick={() => navigate(`/admin/appointments/${appt.uuid}`)}
|
||||
className="cp-action-view"
|
||||
title="مشاهده"
|
||||
>
|
||||
<EyeIcon className="w-4 h-4" />
|
||||
<EyeIcon style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -107,29 +107,29 @@ export default function BlogFormPage() {
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2 space-y-5">
|
||||
<div>
|
||||
<label className="cp-label">عنوان مقاله *</label>
|
||||
<label className="">عنوان مقاله *</label>
|
||||
<input {...register('title')} placeholder="عنوان جذاب بنویسید..."
|
||||
className="cp-input h-11" />
|
||||
{errors.title && <p className="text-red-500 text-xs mt-1">{errors.title.message}</p>}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="cp-label">خلاصه</label>
|
||||
<label className="">خلاصه</label>
|
||||
<textarea {...register('summary')} rows={2} placeholder="خلاصه کوتاه مقاله..."
|
||||
className="cp-textarea resize-none" />
|
||||
className="input resize-none" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="cp-label">محتوا *</label>
|
||||
<label className="">محتوا *</label>
|
||||
<textarea {...register('content')} rows={16} placeholder="محتوای مقاله را بنویسید..."
|
||||
className="cp-textarea resize-none font-mono" />
|
||||
className="input resize-none font-mono" />
|
||||
{errors.content && <p className="text-red-500 text-xs mt-1">{errors.content.message}</p>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-5">
|
||||
<div>
|
||||
<label className="cp-label">وضعیت انتشار</label>
|
||||
<label className="">وضعیت انتشار</label>
|
||||
<Controller
|
||||
control={control}
|
||||
name="status"
|
||||
@@ -144,7 +144,7 @@ export default function BlogFormPage() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="cp-label">تگها (با ویرگول جدا کنید)</label>
|
||||
<label className="">تگها (با ویرگول جدا کنید)</label>
|
||||
<input {...register('tags')} dir="ltr" placeholder="tag1, tag2, tag3"
|
||||
className="cp-input h-11" />
|
||||
</div>
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { EyeIcon, PencilIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
|
||||
import { EyeIcon, PencilIcon, TrashIcon, PlusIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse, PaginatedResponse } from '../lib/api';
|
||||
import type { Blog } from '../types';
|
||||
import { formatDate, formatNumber } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
@@ -52,13 +51,15 @@ export default function BlogsPage() {
|
||||
key: 'title',
|
||||
header: 'عنوان',
|
||||
render: (b) => (
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="cell-user">
|
||||
{b.cover_image ? (
|
||||
<img src={b.cover_image} alt="" className="w-10 h-7 rounded object-cover shrink-0" />
|
||||
<img src={b.cover_image} alt="" style={{ width: 40, height: 28, borderRadius: 6, objectFit: 'cover', flexShrink: 0 }} />
|
||||
) : (
|
||||
<div className="w-10 h-7 rounded bg-slate-100 dark:bg-slate-700 shrink-0" />
|
||||
<div style={{ width: 40, height: 28, borderRadius: 6, background: 'var(--surface-3)', flexShrink: 0 }} />
|
||||
)}
|
||||
<span className="font-medium text-gray-900 line-clamp-1">{b.title}</span>
|
||||
<div>
|
||||
<b style={{ display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth: 220 }}>{b.title}</b>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
@@ -67,11 +68,8 @@ export default function BlogsPage() {
|
||||
key: 'status',
|
||||
header: 'وضعیت',
|
||||
render: (b) => (
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
|
||||
b.status === 'published'
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-gray-100 text-gray-600'
|
||||
}`}>
|
||||
<span className={`badge ${b.status === 'published' ? 'green' : 'gray'}`}>
|
||||
<span className="bdot" />
|
||||
{b.status === 'published' ? 'منتشرشده' : 'پیشنویس'}
|
||||
</span>
|
||||
),
|
||||
@@ -80,70 +78,76 @@ export default function BlogsPage() {
|
||||
key: 'tags',
|
||||
header: 'تگها',
|
||||
render: (b) => (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 4 }}>
|
||||
{b.tags?.slice(0, 3).map((tag, i) => (
|
||||
<span key={i} className="text-xs bg-blue-50 text-blue-600 px-2 py-0.5 rounded-full">{tag}</span>
|
||||
<span key={i} className="chip">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{ key: 'views_count', header: 'بازدید', render: (b) => formatNumber(b.views_count) },
|
||||
{ key: 'published_at', header: 'انتشار', render: (b) => formatDate(b.published_at) },
|
||||
{ key: 'created_at', header: 'تاریخ ثبت', render: (b) => formatDate(b.created_at) },
|
||||
];
|
||||
|
||||
const items = data?.data ?? [];
|
||||
const total = data?.meta?.totalRecords ?? 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="بلاگ"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'بلاگ' }]}
|
||||
action={
|
||||
<button onClick={() => navigate('/admin/blogs/new')}
|
||||
className="cp-btn-primary">
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
نوشتن مقاله
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="cp-card p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
{STATUS_FILTERS.map((f) => (
|
||||
<button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
|
||||
statusFilter === f.value ? 'bg-primary-600 text-white' : 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
|
||||
}`}>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
<div className="fade-in">
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">بلاگ</h1>
|
||||
<div className="muted">{total} مقاله</div>
|
||||
</div>
|
||||
<button onClick={() => navigate('/admin/blogs/new')} className="btn primary sm">
|
||||
<PlusIcon style={{ width: 16, height: 16 }} />
|
||||
نوشتن مقاله
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="card-pad" style={{ paddingBottom: 0 }}>
|
||||
<div className="toolbar">
|
||||
<div className="field" style={{ minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
placeholder="جستجو بر اساس عنوان..."
|
||||
/>
|
||||
</div>
|
||||
<div className="seg">
|
||||
{STATUS_FILTERS.map((f) => (
|
||||
<button
|
||||
key={f.value}
|
||||
className={statusFilter === f.value ? 'on' : ''}
|
||||
onClick={() => { setStatusFilter(f.value); setPage(1); }}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DataTable<Blog>
|
||||
columns={columns}
|
||||
data={items}
|
||||
loading={isLoading}
|
||||
searchValue={search}
|
||||
onSearchChange={(v) => { setSearch(v); setPage(1); }}
|
||||
searchPlaceholder="جستجو بر اساس عنوان..."
|
||||
emptyMessage="هیچ مقالهای یافت نشد"
|
||||
emptyAction={
|
||||
<button onClick={() => navigate('/admin/blogs/new')}
|
||||
className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors">
|
||||
<button onClick={() => navigate('/admin/blogs/new')} className="btn primary sm">
|
||||
نوشتن اولین مقاله
|
||||
</button>
|
||||
}
|
||||
actions={(blog) => (
|
||||
<>
|
||||
<button onClick={() => navigate(`/admin/blogs/${blog.uuid}/edit`)}
|
||||
className="cp-action-edit" title="ویرایش">
|
||||
<PencilIcon className="w-4 h-4" />
|
||||
className="mini-btn" title="ویرایش">
|
||||
<PencilIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
<button onClick={() => setDeleteTarget(blog)}
|
||||
className="cp-action-delete" title="حذف">
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
className="mini-btn danger" title="حذف">
|
||||
<TrashIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import {
|
||||
TrashIcon, PlusIcon, PencilIcon, TagIcon, MapPinIcon,
|
||||
BuildingOffice2Icon, HeartIcon, ShieldCheckIcon, WrenchScrewdriverIcon,
|
||||
CheckCircleIcon, XCircleIcon, PhotoIcon, XMarkIcon,
|
||||
PhotoIcon, XMarkIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
@@ -13,77 +13,33 @@ import { api } from '../lib/api';
|
||||
import type { PaginatedResponse } from '../lib/api';
|
||||
import type { Province, City, SpecialtyFull, DoctorService, Insurance, Tag, Representation } from '../types';
|
||||
import { useAuthStore } from '../stores/authStore';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
import Modal from '../components/ui/Modal';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
import SearchableSelect from '../components/ui/SearchableSelect';
|
||||
|
||||
// ── Tab types ────────────────────────────────────────────────────────────────
|
||||
|
||||
type TabKey = 'provinces' | 'cities' | 'specialties' | 'doctor_services' | 'insurances' | 'tags';
|
||||
|
||||
interface TabConfig {
|
||||
key: TabKey;
|
||||
label: string;
|
||||
icon: React.ElementType;
|
||||
color: string;
|
||||
description: string;
|
||||
hue: number;
|
||||
}
|
||||
|
||||
const TABS: TabConfig[] = [
|
||||
{
|
||||
key: 'provinces',
|
||||
label: 'استانها',
|
||||
icon: MapPinIcon,
|
||||
color: 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-400/10',
|
||||
description: 'مدیریت استانها',
|
||||
},
|
||||
{
|
||||
key: 'cities',
|
||||
label: 'شهرها',
|
||||
icon: BuildingOffice2Icon,
|
||||
color: 'text-indigo-600 dark:text-indigo-400 bg-indigo-50 dark:bg-indigo-400/10',
|
||||
description: 'مدیریت شهرها و اطلاعات تفصیلی هر شهر',
|
||||
},
|
||||
{
|
||||
key: 'specialties',
|
||||
label: 'تخصصها',
|
||||
icon: HeartIcon,
|
||||
color: 'text-rose-600 dark:text-rose-400 bg-rose-50 dark:bg-rose-400/10',
|
||||
description: 'تخصصهای پزشکی',
|
||||
},
|
||||
{
|
||||
key: 'doctor_services',
|
||||
label: 'خدمات پزشک',
|
||||
icon: WrenchScrewdriverIcon,
|
||||
color: 'text-orange-600 dark:text-orange-400 bg-orange-50 dark:bg-orange-400/10',
|
||||
description: 'خدمات قابل ارائه توسط پزشکان',
|
||||
},
|
||||
{
|
||||
key: 'insurances',
|
||||
label: 'بیمهها',
|
||||
icon: ShieldCheckIcon,
|
||||
color: 'text-teal-600 dark:text-teal-400 bg-teal-50 dark:bg-teal-400/10',
|
||||
description: 'بیمههای پایه و تکمیلی',
|
||||
},
|
||||
{
|
||||
key: 'tags',
|
||||
label: 'تگها',
|
||||
icon: TagIcon,
|
||||
color: 'text-violet-600 dark:text-violet-400 bg-violet-50 dark:bg-violet-400/10',
|
||||
description: 'تگهای مورد استفاده در مطالب بلاگ',
|
||||
},
|
||||
{ key: 'provinces', label: 'استانها', icon: MapPinIcon, hue: 256 },
|
||||
{ key: 'cities', label: 'شهرها', icon: BuildingOffice2Icon, hue: 205 },
|
||||
{ key: 'specialties', label: 'تخصصها', icon: HeartIcon, hue: 295 },
|
||||
{ key: 'doctor_services', label: 'خدمات پزشک', icon: WrenchScrewdriverIcon, hue: 162 },
|
||||
{ key: 'insurances', label: 'بیمهها', icon: ShieldCheckIcon, hue: 205 },
|
||||
{ key: 'tags', label: 'تگها', icon: TagIcon, hue: 272 },
|
||||
];
|
||||
|
||||
// ── Logo uploader ─────────────────────────────────────────────────────────────
|
||||
// ── Logo uploader ──────────────────────────────────────────────────────────────
|
||||
|
||||
function LogoUploadField({
|
||||
value,
|
||||
onChange,
|
||||
uploadUrl,
|
||||
}: {
|
||||
function LogoUploadField({ value, onChange, uploadUrl }: {
|
||||
value: string | null;
|
||||
onChange: (url: string | null) => void;
|
||||
uploadUrl: string;
|
||||
@@ -121,60 +77,57 @@ function LogoUploadField({
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
|
||||
{value ? (
|
||||
<div className="relative group">
|
||||
<img src={value} alt="logo" className="w-16 h-16 object-contain rounded-xl border border-slate-200 dark:border-gray-600 bg-white dark:bg-gray-800 p-1" />
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(null)}
|
||||
className="absolute -top-1.5 -right-1.5 w-5 h-5 bg-red-500 hover:bg-red-600 rounded-full text-white flex items-center justify-center shadow transition-colors"
|
||||
>
|
||||
<XMarkIcon className="w-3 h-3" />
|
||||
<div style={{ position: 'relative' }}>
|
||||
<img src={value} alt="logo" style={{ width: 64, height: 64, objectFit: 'contain', borderRadius: 12, border: '1px solid var(--border)', background: 'var(--surface)', padding: 4 }} />
|
||||
<button type="button" onClick={() => onChange(null)} style={{
|
||||
position: 'absolute', top: -6, right: -6, width: 20, height: 20, borderRadius: 10,
|
||||
background: 'var(--danger)', color: '#fff', border: 'none', cursor: 'pointer',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
}}>
|
||||
<XMarkIcon style={{ width: 12, height: 12 }} />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-16 h-16 rounded-xl border-2 border-dashed border-slate-300 dark:border-gray-600 flex items-center justify-center bg-slate-50 dark:bg-gray-800">
|
||||
<PhotoIcon className="w-6 h-6 text-slate-300 dark:text-gray-600" />
|
||||
<div style={{ width: 64, height: 64, borderRadius: 12, border: '2px dashed var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', background: 'var(--surface-2)' }}>
|
||||
<PhotoIcon style={{ width: 24, height: 24, color: 'var(--text-3)' }} />
|
||||
</div>
|
||||
)}
|
||||
<label className={`cursor-pointer cp-btn-secondary text-sm ${uploading ? 'opacity-60 pointer-events-none' : ''}`}>
|
||||
{uploading ? (
|
||||
<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>
|
||||
) : (
|
||||
<span className="flex items-center gap-2">
|
||||
<PhotoIcon className="w-4 h-4" />
|
||||
{value ? 'تغییر لگو' : 'انتخاب لگو'}
|
||||
</span>
|
||||
)}
|
||||
<input type="file" accept="image/jpeg,image/png,image/webp" className="hidden" onChange={handleFile} disabled={uploading} />
|
||||
<label className={`btn ghost sm ${uploading ? 'disabled' : ''}`} style={{ cursor: uploading ? 'not-allowed' : 'pointer' }}>
|
||||
<PhotoIcon style={{ width: 15, height: 15 }} />
|
||||
{uploading ? 'در حال آپلود...' : (value ? 'تغییر لگو' : 'انتخاب لگو')}
|
||||
<input type="file" accept="image/jpeg,image/png,image/webp" style={{ display: 'none' }} onChange={handleFile} disabled={uploading} />
|
||||
</label>
|
||||
<p className="text-xs text-slate-400 dark:text-slate-500">JPG، PNG یا WebP</p>
|
||||
<span className="muted" style={{ fontSize: 11 }}>JPG، PNG یا WebP</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── StatusBadge helper ────────────────────────────────────────────────────────
|
||||
// ── Status badge ───────────────────────────────────────────────────────────────
|
||||
|
||||
function StatusBadge({ status }: { status: number }) {
|
||||
return status === 1 ? (
|
||||
<span className="inline-flex items-center gap-1 text-xs font-medium text-green-700 dark:text-green-400 bg-green-50 dark:bg-green-400/10 px-2 py-0.5 rounded-full">
|
||||
<CheckCircleIcon className="w-3 h-3" /> فعال
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 text-xs font-medium text-slate-500 dark:text-slate-400 bg-slate-100 dark:bg-slate-400/10 px-2 py-0.5 rounded-full">
|
||||
<XCircleIcon className="w-3 h-3" /> غیرفعال
|
||||
function SBadge({ status }: { status: number }) {
|
||||
return (
|
||||
<span className={`badge ${status === 1 ? 'green' : 'gray'}`}>
|
||||
<span className="bdot" />
|
||||
{status === 1 ? 'فعال' : 'غیرفعال'}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Provinces Tab ─────────────────────────────────────────────────────────────
|
||||
// ── Tab sub-component wrapper ──────────────────────────────────────────────────
|
||||
|
||||
function TabActions({ label, onClick }: { label: string; onClick: () => void }) {
|
||||
return (
|
||||
<div style={{ display: 'flex', justifyContent: 'flex-end', padding: 'var(--card-pad)' }}>
|
||||
<button onClick={onClick} className="btn primary sm">
|
||||
<PlusIcon style={{ width: 15, height: 15 }} /> {label}
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Provinces Tab ──────────────────────────────────────────────────────────────
|
||||
|
||||
const provinceSchema = z.object({
|
||||
name: z.string().min(1, 'نام الزامی است'),
|
||||
@@ -230,56 +183,44 @@ function ProvincesTab() {
|
||||
};
|
||||
|
||||
const columns: Column<Province>[] = [
|
||||
{ key: 'id', header: 'شناسه', className: 'w-16', render: (p) => <span className="text-xs text-slate-400 font-mono">{p.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (p) => <span className="font-medium text-slate-800 dark:text-slate-100">{p.name}</span> },
|
||||
{ key: 'weight', header: 'ترتیب', className: 'w-20', render: (p) => <span className="text-xs text-slate-400">{p.weight}</span> },
|
||||
{ key: 'status', header: 'وضعیت', className: 'w-24', render: (p) => <StatusBadge status={p.status} /> },
|
||||
{ key: 'id', header: 'شناسه', render: (p) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{p.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (p) => <b>{p.name}</b> },
|
||||
{ key: 'weight', header: 'ترتیب', render: (p) => <span className="muted">{p.weight}</span> },
|
||||
{ key: 'status', header: 'وضعیت', render: (p) => <SBadge status={p.status} /> },
|
||||
];
|
||||
|
||||
const formBody = (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="cp-label">نام <span className="text-red-500">*</span></label>
|
||||
<input {...register('name')} className="cp-input h-11" placeholder="نام استان" />
|
||||
{errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">ترتیب نمایش</label>
|
||||
<input {...register('weight')} type="number" dir="ltr" className="cp-input h-11 w-32" placeholder="0" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">وضعیت</label>
|
||||
<Controller name="status" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
|
||||
)} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-end px-5 pt-4">
|
||||
<button onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} className="cp-btn-primary">
|
||||
<PlusIcon className="w-4 h-4" /> افزودن استان
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<DataTable<Province> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در استانها..." emptyMessage="هیچ استانی یافت نشد"
|
||||
actions={(p) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(p)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
|
||||
<button onClick={() => setDeleteTarget(p)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
</div>
|
||||
<TabActions label="افزودن استان" onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} />
|
||||
<DataTable<Province> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در استانها..." emptyMessage="هیچ استانی یافت نشد"
|
||||
actions={(p) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(p)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
|
||||
<button onClick={() => setDeleteTarget(p)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
|
||||
<Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن استان'} size="sm" onClose={closeModal}
|
||||
footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="province-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="province-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
>
|
||||
<form id="province-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
|
||||
{formBody}
|
||||
<div className="form-row">
|
||||
<label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
|
||||
<input {...register('name')} className="input" placeholder="نام استان" />
|
||||
{errors.name && <p className="err-text">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>ترتیب نمایش</label>
|
||||
<input {...register('weight')} type="number" dir="ltr" className="input" placeholder="0" style={{ maxWidth: 120 }} />
|
||||
</div>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>وضعیت</label>
|
||||
<Controller name="status" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
|
||||
)} />
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
@@ -289,7 +230,7 @@ function ProvincesTab() {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Cities Tab ────────────────────────────────────────────────────────────────
|
||||
// ── Cities Tab ─────────────────────────────────────────────────────────────────
|
||||
|
||||
const citySchema = z.object({
|
||||
name: z.string().min(1, 'نام الزامی است'),
|
||||
@@ -399,92 +340,86 @@ function CitiesTab() {
|
||||
};
|
||||
|
||||
const columns: Column<City>[] = [
|
||||
{ key: 'id', header: 'شناسه', className: 'w-16', render: (c) => <span className="text-xs text-slate-400 font-mono">{c.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (c) => <span className="font-medium text-slate-800 dark:text-slate-100">{c.name}</span> },
|
||||
{ key: 'province_id', header: 'استان', render: (c) => c.province_id ? <span className="text-xs bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-2 py-0.5 rounded-full">{provinceMap[c.province_id] ?? `#${c.province_id}`}</span> : <span className="text-slate-300">—</span> },
|
||||
{ key: 'representation_id', header: 'نماینده', render: (c) => c.representation_id ? <span className="text-xs text-slate-500 dark:text-slate-400">{representationMap[c.representation_id] ?? `#${c.representation_id}`}</span> : <span className="text-slate-300">—</span> },
|
||||
{ key: 'domain', header: 'دامنه', render: (c) => c.domain ? <span className="text-xs font-mono text-slate-500">{c.domain}</span> : <span className="text-slate-300">—</span> },
|
||||
{ key: 'weight', header: 'ترتیب', className: 'w-20', render: (c) => <span className="text-xs text-slate-400">{c.weight}</span> },
|
||||
{ key: 'status', header: 'وضعیت', className: 'w-24', render: (c) => <StatusBadge status={c.status} /> },
|
||||
{ key: 'id', header: 'شناسه', render: (c) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{c.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (c) => <b>{c.name}</b> },
|
||||
{ key: 'province_id', header: 'استان', render: (c) => c.province_id ? <span className="chip">{provinceMap[c.province_id] ?? `#${c.province_id}`}</span> : <span className="muted">—</span> },
|
||||
{ key: 'representation_id', header: 'نماینده', render: (c) => c.representation_id ? <span className="muted" style={{ fontSize: 12 }}>{representationMap[c.representation_id] ?? `#${c.representation_id}`}</span> : <span className="muted">—</span> },
|
||||
{ key: 'domain', header: 'دامنه', render: (c) => c.domain ? <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{c.domain}</span> : <span className="muted">—</span> },
|
||||
{ key: 'weight', header: 'ترتیب', render: (c) => <span className="muted">{c.weight}</span> },
|
||||
{ key: 'status', header: 'وضعیت', render: (c) => <SBadge status={c.status} /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-end px-5 pt-4">
|
||||
<button onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} className="cp-btn-primary">
|
||||
<PlusIcon className="w-4 h-4" /> افزودن شهر
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<DataTable<City> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در شهرها..." emptyMessage="هیچ شهری یافت نشد"
|
||||
actions={(c) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(c)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
|
||||
<button onClick={() => setDeleteTarget(c)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
</div>
|
||||
<TabActions label="افزودن شهر" onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} />
|
||||
<DataTable<City> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در شهرها..." emptyMessage="هیچ شهری یافت نشد"
|
||||
actions={(c) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(c)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
|
||||
<button onClick={() => setDeleteTarget(c)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
|
||||
<Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن شهر'} size="lg" onClose={closeModal}
|
||||
footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="city-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="city-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
>
|
||||
<form id="city-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="cp-label">نام <span className="text-red-500">*</span></label>
|
||||
<input {...register('name')} className="cp-input h-11" placeholder="نام شهر" />
|
||||
{errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">استان</label>
|
||||
<div className="form-row">
|
||||
<label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
|
||||
<input {...register('name')} className="input" placeholder="نام شهر" />
|
||||
{errors.name && <p className="err-text">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
|
||||
<div className="form-row">
|
||||
<label>استان</label>
|
||||
<Controller name="province_id" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={provinceOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- انتخاب استان --" isClearable isLoading={provincesQuery.isLoading} noOptionsMessage="استانی یافت نشد" />
|
||||
)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">نماینده</label>
|
||||
<div className="form-row">
|
||||
<label>نماینده</label>
|
||||
<Controller name="representation_id" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={representationOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="انتخاب نماینده..." isClearable isLoading={representationsQuery.isLoading} noOptionsMessage="هیچ نمایندهای یافت نشد" />
|
||||
)} />
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label className="cp-label">تلفن تماس</label>
|
||||
<input {...register('contact_phone')} className="cp-input h-10" dir="ltr" placeholder="021xxxxxxxx" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">ایمیل</label>
|
||||
<input {...register('email')} type="email" className="cp-input h-10" dir="ltr" />
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label>تلفن تماس</label>
|
||||
<input {...register('contact_phone')} className="input" dir="ltr" placeholder="021xxxxxxxx" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">دامنه</label>
|
||||
<input {...register('domain')} className="cp-input h-10" dir="ltr" />
|
||||
<div className="form-row">
|
||||
<label>ایمیل</label>
|
||||
<input {...register('email')} type="email" className="input" dir="ltr" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">شعار</label>
|
||||
<input {...register('slogan')} className="cp-input h-10" />
|
||||
</div>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>دامنه</label>
|
||||
<input {...register('domain')} className="input" dir="ltr" />
|
||||
</div>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>شعار</label>
|
||||
<input {...register('slogan')} className="input" />
|
||||
</div>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>کلیدواژهها</label>
|
||||
<input {...register('keywords')} className="input" />
|
||||
</div>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>توضیحات</label>
|
||||
<textarea {...register('description')} rows={3} className="input" style={{ height: 'auto', resize: 'none' }} />
|
||||
</div>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>توضیحات فوتر</label>
|
||||
<textarea {...register('footer_description')} rows={2} className="input" style={{ height: 'auto', resize: 'none' }} />
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
|
||||
<div className="form-row">
|
||||
<label>ترتیب نمایش</label>
|
||||
<input {...register('weight')} type="number" dir="ltr" className="input" placeholder="0" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">کلیدواژهها</label>
|
||||
<input {...register('keywords')} className="cp-input h-10" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">توضیحات</label>
|
||||
<textarea {...register('description')} rows={3} className="cp-textarea" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">توضیحات فوتر</label>
|
||||
<textarea {...register('footer_description')} rows={2} className="cp-textarea" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">ترتیب نمایش</label>
|
||||
<input {...register('weight')} type="number" dir="ltr" className="cp-input h-11 w-32" placeholder="0" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">وضعیت</label>
|
||||
<div className="form-row">
|
||||
<label>وضعیت</label>
|
||||
<Controller name="status" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
|
||||
)} />
|
||||
@@ -499,7 +434,7 @@ function CitiesTab() {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Specialties Tab ───────────────────────────────────────────────────────────
|
||||
// ── Specialties Tab ────────────────────────────────────────────────────────────
|
||||
|
||||
const specialtySchema = z.object({
|
||||
name: z.string().min(1, 'نام الزامی است'),
|
||||
@@ -559,55 +494,49 @@ function SpecialtiesTab() {
|
||||
const parentOptions = items.filter((s) => s.parent_id === null).map((s) => ({ value: s.id, label: s.name }));
|
||||
|
||||
const columns: Column<SpecialtyFull>[] = [
|
||||
{ key: 'id', header: 'شناسه', className: 'w-16', render: (s) => <span className="text-xs text-slate-400 font-mono">{s.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (s) => <span className="font-medium text-slate-800 dark:text-slate-100">{s.name}</span> },
|
||||
{ key: 'slug', header: 'slug', render: (s) => <span className="text-xs font-mono text-slate-400">{s.slug}</span> },
|
||||
{ key: 'parent_id', header: 'والد', render: (s) => s.parent_id ? <span className="text-xs bg-slate-100 dark:bg-slate-700 px-2 py-0.5 rounded-full">{parentMap[s.parent_id] ?? `#${s.parent_id}`}</span> : <span className="text-slate-300">—</span> },
|
||||
{ key: 'weight', header: 'ترتیب', className: 'w-20', render: (s) => <span className="text-xs text-slate-400">{s.weight}</span> },
|
||||
{ key: 'status', header: 'وضعیت', className: 'w-24', render: (s) => <StatusBadge status={s.status} /> },
|
||||
{ key: 'id', header: 'شناسه', render: (s) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (s) => <b>{s.name}</b> },
|
||||
{ key: 'slug', header: 'slug', render: (s) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.slug}</span> },
|
||||
{ key: 'parent_id', header: 'والد', render: (s) => s.parent_id ? <span className="chip">{parentMap[s.parent_id] ?? `#${s.parent_id}`}</span> : <span className="muted">—</span> },
|
||||
{ key: 'weight', header: 'ترتیب', render: (s) => <span className="muted">{s.weight}</span> },
|
||||
{ key: 'status', header: 'وضعیت', render: (s) => <SBadge status={s.status} /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-end px-5 pt-4">
|
||||
<button onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} className="cp-btn-primary">
|
||||
<PlusIcon className="w-4 h-4" /> افزودن تخصص
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<DataTable<SpecialtyFull> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در تخصصها..." emptyMessage="هیچ تخصصی یافت نشد"
|
||||
actions={(s) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(s)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
|
||||
<button onClick={() => setDeleteTarget(s)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
</div>
|
||||
<TabActions label="افزودن تخصص" onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} />
|
||||
<DataTable<SpecialtyFull> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در تخصصها..." emptyMessage="هیچ تخصصی یافت نشد"
|
||||
actions={(s) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(s)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
|
||||
<button onClick={() => setDeleteTarget(s)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
|
||||
<Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن تخصص'} size="sm" onClose={closeModal}
|
||||
footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="specialty-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="specialty-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
>
|
||||
<form id="specialty-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="cp-label">نام <span className="text-red-500">*</span></label>
|
||||
<input {...register('name')} className="cp-input h-11" placeholder="نام تخصص" />
|
||||
{errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
|
||||
<div className="form-row">
|
||||
<label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
|
||||
<input {...register('name')} className="input" placeholder="نام تخصص" />
|
||||
{errors.name && <p className="err-text">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>تخصص والد</label>
|
||||
<Controller name="parent_id" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={parentOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- بدون والد --" isClearable noOptionsMessage="موردی یافت نشد" />
|
||||
)} />
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
|
||||
<div className="form-row">
|
||||
<label>ترتیب نمایش</label>
|
||||
<input {...register('weight')} type="number" dir="ltr" className="input" placeholder="0" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">تخصص والد</label>
|
||||
<Controller name="parent_id" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={parentOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- بدون والد --" isClearable noOptionsMessage="موردی یافت نشد" />
|
||||
)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">ترتیب نمایش</label>
|
||||
<input {...register('weight')} type="number" dir="ltr" className="cp-input h-11 w-32" placeholder="0" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">وضعیت</label>
|
||||
<div className="form-row">
|
||||
<label>وضعیت</label>
|
||||
<Controller name="status" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
|
||||
)} />
|
||||
@@ -622,7 +551,7 @@ function SpecialtiesTab() {
|
||||
);
|
||||
}
|
||||
|
||||
// ── DoctorServices Tab ────────────────────────────────────────────────────────
|
||||
// ── DoctorServices Tab ─────────────────────────────────────────────────────────
|
||||
|
||||
const serviceSchema = z.object({
|
||||
name: z.string().min(1, 'نام الزامی است'),
|
||||
@@ -687,54 +616,48 @@ function DoctorServicesTab() {
|
||||
};
|
||||
|
||||
const columns: Column<DoctorService>[] = [
|
||||
{ key: 'id', header: 'شناسه', className: 'w-16', render: (s) => <span className="text-xs text-slate-400 font-mono">{s.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (s) => <span className="font-medium text-slate-800 dark:text-slate-100">{s.name}</span> },
|
||||
{ key: 'specialty_id', header: 'تخصص', render: (s) => s.specialty_id ? <span className="text-xs bg-rose-50 dark:bg-rose-400/10 text-rose-600 dark:text-rose-400 px-2 py-0.5 rounded-full">{specialtyMap[s.specialty_id] ?? `#${s.specialty_id}`}</span> : <span className="text-slate-300">—</span> },
|
||||
{ key: 'weight', header: 'ترتیب', className: 'w-20', render: (s) => <span className="text-xs text-slate-400">{s.weight}</span> },
|
||||
{ key: 'status', header: 'وضعیت', className: 'w-24', render: (s) => <StatusBadge status={s.status} /> },
|
||||
{ key: 'id', header: 'شناسه', render: (s) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (s) => <b>{s.name}</b> },
|
||||
{ key: 'specialty_id', header: 'تخصص', render: (s) => s.specialty_id ? <span className="badge violet"><span className="bdot" />{specialtyMap[s.specialty_id] ?? `#${s.specialty_id}`}</span> : <span className="muted">—</span> },
|
||||
{ key: 'weight', header: 'ترتیب', render: (s) => <span className="muted">{s.weight}</span> },
|
||||
{ key: 'status', header: 'وضعیت', render: (s) => <SBadge status={s.status} /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-end px-5 pt-4">
|
||||
<button onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} className="cp-btn-primary">
|
||||
<PlusIcon className="w-4 h-4" /> افزودن خدمت
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<DataTable<DoctorService> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در خدمات..." emptyMessage="هیچ خدمتی یافت نشد"
|
||||
actions={(s) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(s)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
|
||||
<button onClick={() => setDeleteTarget(s)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
</div>
|
||||
<TabActions label="افزودن خدمت" onClick={() => { reset({ status: '1', weight: '0' }); setAddOpen(true); }} />
|
||||
<DataTable<DoctorService> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در خدمات..." emptyMessage="هیچ خدمتی یافت نشد"
|
||||
actions={(s) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(s)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
|
||||
<button onClick={() => setDeleteTarget(s)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
|
||||
<Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن خدمت'} size="sm" onClose={closeModal}
|
||||
footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="service-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="service-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
>
|
||||
<form id="service-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="cp-label">نام <span className="text-red-500">*</span></label>
|
||||
<input {...register('name')} className="cp-input h-11" placeholder="نام خدمت" />
|
||||
{errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
|
||||
<div className="form-row">
|
||||
<label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
|
||||
<input {...register('name')} className="input" placeholder="نام خدمت" />
|
||||
{errors.name && <p className="err-text">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>تخصص مرتبط</label>
|
||||
<Controller name="specialty_id" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={specialtyOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- انتخاب تخصص --" isClearable isLoading={specialtiesQuery.isLoading} noOptionsMessage="تخصصی یافت نشد" />
|
||||
)} />
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
|
||||
<div className="form-row">
|
||||
<label>ترتیب نمایش</label>
|
||||
<input {...register('weight')} type="number" dir="ltr" className="input" placeholder="0" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">تخصص مرتبط</label>
|
||||
<Controller name="specialty_id" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={specialtyOptions} value={field.value ?? null} onChange={(v) => field.onChange(v as number | null)} placeholder="-- انتخاب تخصص --" isClearable isLoading={specialtiesQuery.isLoading} noOptionsMessage="تخصصی یافت نشد" />
|
||||
)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">ترتیب نمایش</label>
|
||||
<input {...register('weight')} type="number" dir="ltr" className="cp-input h-11 w-32" placeholder="0" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">وضعیت</label>
|
||||
<div className="form-row">
|
||||
<label>وضعیت</label>
|
||||
<Controller name="status" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
|
||||
)} />
|
||||
@@ -749,7 +672,7 @@ function DoctorServicesTab() {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Insurances Tab ────────────────────────────────────────────────────────────
|
||||
// ── Insurances Tab ─────────────────────────────────────────────────────────────
|
||||
|
||||
const insuranceSchema = z.object({
|
||||
name: z.string().min(1, 'نام الزامی است'),
|
||||
@@ -809,72 +732,62 @@ function InsurancesTab() {
|
||||
};
|
||||
|
||||
const columns: Column<Insurance>[] = [
|
||||
{ key: 'id', header: 'شناسه', className: 'w-16', render: (i) => <span className="text-xs text-slate-400 font-mono">{i.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (i) => (
|
||||
<div className="flex items-center gap-2.5">
|
||||
{ key: 'id', header: 'شناسه', render: (i) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{i.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (i) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
{i.logo_url ? (
|
||||
<img src={i.logo_url} alt={i.name} className="w-8 h-8 object-contain rounded-lg border border-slate-200 dark:border-gray-600 bg-white p-0.5 shrink-0" />
|
||||
<img src={i.logo_url} alt={i.name} style={{ width: 32, height: 32, objectFit: 'contain', borderRadius: 8, border: '1px solid var(--border)', background: 'var(--surface)', padding: 2, flexShrink: 0 }} />
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-lg border border-dashed border-slate-200 dark:border-gray-600 flex items-center justify-center shrink-0">
|
||||
<PhotoIcon className="w-4 h-4 text-slate-300" />
|
||||
<div style={{ width: 32, height: 32, borderRadius: 8, border: '1px dashed var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
|
||||
<PhotoIcon style={{ width: 14, height: 14, color: 'var(--text-3)' }} />
|
||||
</div>
|
||||
)}
|
||||
<span className="font-medium text-slate-800 dark:text-slate-100">{i.name}</span>
|
||||
<b>{i.name}</b>
|
||||
</div>
|
||||
)},
|
||||
{ key: 'type', header: 'نوع', render: (i) => (
|
||||
<span className={`text-xs font-medium px-2 py-0.5 rounded-full ${i.type === 'basic' ? 'bg-teal-50 dark:bg-teal-400/10 text-teal-700 dark:text-teal-400' : 'bg-cyan-50 dark:bg-cyan-400/10 text-cyan-700 dark:text-cyan-400'}`}>
|
||||
{i.type === 'basic' ? 'پایه' : 'تکمیلی'}
|
||||
</span>
|
||||
)},
|
||||
{ key: 'status', header: 'وضعیت', className: 'w-24', render: (i) => <StatusBadge status={i.status} /> },
|
||||
{ key: 'type', header: 'نوع', render: (i) => <span className={`badge ${i.type === 'basic' ? 'green' : 'blue'}`}><span className="bdot" />{i.type === 'basic' ? 'پایه' : 'تکمیلی'}</span> },
|
||||
{ key: 'status', header: 'وضعیت', render: (i) => <SBadge status={i.status} /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-end px-5 pt-4">
|
||||
<button onClick={() => { reset({ status: '1', type: 'basic' }); setLogoUrl(null); setUploadTarget(null); setAddOpen(true); }} className="cp-btn-primary">
|
||||
<PlusIcon className="w-4 h-4" /> افزودن بیمه
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<DataTable<Insurance> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در بیمهها..." emptyMessage="هیچ بیمهای یافت نشد"
|
||||
actions={(i) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(i)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
|
||||
<button onClick={() => setDeleteTarget(i)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
</div>
|
||||
<TabActions label="افزودن بیمه" onClick={() => { reset({ status: '1', type: 'basic' }); setLogoUrl(null); setUploadTarget(null); setAddOpen(true); }} />
|
||||
<DataTable<Insurance> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در بیمهها..." emptyMessage="هیچ بیمهای یافت نشد"
|
||||
actions={(i) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(i)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
|
||||
<button onClick={() => setDeleteTarget(i)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
|
||||
<Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن بیمه'} size="sm" onClose={closeModal}
|
||||
footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="insurance-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="insurance-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
>
|
||||
<form id="insurance-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="cp-label">لگو</label>
|
||||
<LogoUploadField
|
||||
value={logoUrl}
|
||||
onChange={setLogoUrl}
|
||||
uploadUrl={uploadTarget ? `/api/v1/admin/insurance/${uploadTarget}/upload-logo` : '/api/v1/admin/insurance/0/upload-logo'}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">نام <span className="text-red-500">*</span></label>
|
||||
<input {...register('name')} className="cp-input h-11" placeholder="نام بیمه" />
|
||||
{errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">نوع <span className="text-red-500">*</span></label>
|
||||
<div className="form-row">
|
||||
<label>لگو</label>
|
||||
<LogoUploadField
|
||||
value={logoUrl}
|
||||
onChange={setLogoUrl}
|
||||
uploadUrl={uploadTarget ? `/api/v1/admin/insurance/${uploadTarget}/upload-logo` : '/api/v1/admin/insurance/0/upload-logo'}
|
||||
/>
|
||||
</div>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
|
||||
<input {...register('name')} className="input" placeholder="نام بیمه" />
|
||||
{errors.name && <p className="err-text">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 12 }}>
|
||||
<div className="form-row">
|
||||
<label>نوع <span style={{ color: 'var(--danger)' }}>*</span></label>
|
||||
<Controller name="type" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={[{ value: 'basic', label: 'بیمه پایه' }, { value: 'supplementary', label: 'بیمه تکمیلی' }]} value={field.value} onChange={(v) => field.onChange(v ?? 'basic')} isClearable={false} />
|
||||
)} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">وضعیت</label>
|
||||
<div className="form-row">
|
||||
<label>وضعیت</label>
|
||||
<Controller name="status" control={control} render={({ field }) => (
|
||||
<SearchableSelect options={[{ value: '1', label: 'فعال' }, { value: '0', label: 'غیرفعال' }]} value={field.value ?? '1'} onChange={(v) => field.onChange(v ?? '1')} isClearable={false} />
|
||||
)} />
|
||||
@@ -889,7 +802,7 @@ function InsurancesTab() {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Tags Tab ──────────────────────────────────────────────────────────────────
|
||||
// ── Tags Tab ───────────────────────────────────────────────────────────────────
|
||||
|
||||
const tagSchema = z.object({
|
||||
name: z.string().min(1, 'نام الزامی است'),
|
||||
@@ -944,45 +857,33 @@ function TagsTab() {
|
||||
};
|
||||
|
||||
const columns: Column<Tag>[] = [
|
||||
{ key: 'id', header: 'شناسه', className: 'w-16', render: (t) => <span className="text-xs text-slate-400 font-mono">{t.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (t) => <span className="font-medium text-slate-800 dark:text-slate-100">{t.name}</span> },
|
||||
{ key: 'slug', header: 'slug', render: (t) => <span className="text-xs font-mono text-slate-400">{t.slug}</span> },
|
||||
{ key: 'status', header: 'وضعیت', className: 'w-24', render: (t) => <StatusBadge status={t.status} /> },
|
||||
{ key: 'id', header: 'شناسه', render: (t) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{t.id}</span> },
|
||||
{ key: 'name', header: 'نام', render: (t) => <span className="chip">{t.name}</span> },
|
||||
{ key: 'slug', header: 'slug', render: (t) => <span className="muted" style={{ fontFamily: 'monospace', fontSize: 12 }}>{t.slug}</span> },
|
||||
{ key: 'status', header: 'وضعیت', render: (t) => <SBadge status={t.status} /> },
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-end px-5 pt-4">
|
||||
<button onClick={() => { reset({ status: '1' }); setAddOpen(true); }} className="cp-btn-primary">
|
||||
<PlusIcon className="w-4 h-4" /> افزودن تگ
|
||||
</button>
|
||||
</div>
|
||||
<div className="p-5">
|
||||
<DataTable<Tag> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در تگها..." emptyMessage="هیچ تگی یافت نشد"
|
||||
actions={(t) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(t)} className="cp-action-edit" title="ویرایش"><PencilIcon className="w-4 h-4" /></button>
|
||||
<button onClick={() => setDeleteTarget(t)} className="cp-action-delete" title="حذف"><TrashIcon className="w-4 h-4" /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div className="mt-4"><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
</div>
|
||||
<TabActions label="افزودن تگ" onClick={() => { reset({ status: '1' }); setAddOpen(true); }} />
|
||||
<DataTable<Tag> columns={columns} data={items} loading={isLoading} searchValue={search} onSearchChange={(v) => { setSearch(v); setPage(1); }} searchPlaceholder="جستجو در تگها..." emptyMessage="هیچ تگی یافت نشد"
|
||||
actions={(t) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(t)} className="mini-btn" title="ویرایش"><PencilIcon style={{ width: 14, height: 14 }} /></button>
|
||||
<button onClick={() => setDeleteTarget(t)} className="mini-btn danger" title="حذف"><TrashIcon style={{ width: 14, height: 14 }} /></button>
|
||||
</>
|
||||
)}
|
||||
/>
|
||||
{total > 20 && <div style={{ padding: 'var(--card-pad)' }}><Pagination page={page} total={total} limit={20} onPageChange={setPage} /></div>}
|
||||
|
||||
<Modal open={addOpen || !!editTarget} title={editTarget ? `ویرایش — ${editTarget.name}` : 'افزودن تگ'} size="sm" onClose={closeModal}
|
||||
footer={<><button onClick={closeModal} className="cp-btn-secondary">لغو</button><button form="tag-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="cp-btn-primary">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
footer={<><button onClick={closeModal} className="btn ghost sm">لغو</button><button form="tag-form" type="submit" disabled={createMutation.isPending || updateMutation.isPending} className="btn primary sm">{(createMutation.isPending || updateMutation.isPending) ? 'در حال ذخیره...' : (editTarget ? 'ذخیره' : 'افزودن')}</button></>}
|
||||
>
|
||||
<form id="tag-form" onSubmit={handleSubmit((d) => editTarget ? updateMutation.mutate({ id: editTarget.id, d }) : createMutation.mutate(d))}>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="cp-label">نام <span className="text-red-500">*</span></label>
|
||||
<input {...register('name')} className="cp-input h-11" placeholder="نام تگ" />
|
||||
{errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">وضعیت</label>
|
||||
<input {...register('status')} className="hidden" />
|
||||
</div>
|
||||
<div className="form-row">
|
||||
<label>نام <span style={{ color: 'var(--danger)' }}>*</span></label>
|
||||
<input {...register('name')} className="input" placeholder="نام تگ" />
|
||||
{errors.name && <p className="err-text">{errors.name.message}</p>}
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
@@ -993,24 +894,24 @@ function TagsTab() {
|
||||
);
|
||||
}
|
||||
|
||||
// ── Main Page ─────────────────────────────────────────────────────────────────
|
||||
// ── Main Page ──────────────────────────────────────────────────────────────────
|
||||
|
||||
export default function CategoriesPage() {
|
||||
const [activeTab, setActiveTab] = useState<TabKey>('provinces');
|
||||
|
||||
const tab = TABS.find((t) => t.key === activeTab)!;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="دستهبندیها"
|
||||
description={tab.description}
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'دستهبندیها' }]}
|
||||
/>
|
||||
<div className="fade-in">
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">دستهبندیها</h1>
|
||||
<div className="muted">{tab.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="cp-card overflow-hidden">
|
||||
{/* ── Tab bar ── */}
|
||||
<div className="flex overflow-x-auto border-b border-slate-200 dark:border-gray-700 px-2 pt-2 gap-1 scrollbar-none">
|
||||
<div className="card">
|
||||
{/* Tab bar */}
|
||||
<div style={{ display: 'flex', overflowX: 'auto', borderBottom: '1px solid var(--border)', padding: '0 var(--card-pad)' }}>
|
||||
{TABS.map((t) => {
|
||||
const Icon = t.icon;
|
||||
const isActive = t.key === activeTab;
|
||||
@@ -1018,37 +919,37 @@ export default function CategoriesPage() {
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => setActiveTab(t.key)}
|
||||
className={`flex items-center gap-2 px-3.5 py-2.5 text-sm font-medium rounded-t-xl whitespace-nowrap border-b-2 -mb-px transition-all ${
|
||||
isActive
|
||||
? 'border-primary-600 text-primary-600 dark:text-primary-400 bg-primary-50/50 dark:bg-primary-400/5'
|
||||
: 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-50 dark:hover:bg-gray-800/50'
|
||||
}`}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 6,
|
||||
padding: '14px 14px', whiteSpace: 'nowrap',
|
||||
fontSize: 13, fontWeight: 500,
|
||||
border: 'none', background: 'none', cursor: 'pointer',
|
||||
borderBottom: `2px solid ${isActive ? 'var(--primary)' : 'transparent'}`,
|
||||
color: isActive ? 'var(--primary)' : 'var(--text-2)',
|
||||
marginBottom: -1, transition: 'color .15s',
|
||||
}}
|
||||
>
|
||||
<Icon className="w-4 h-4 shrink-0" />
|
||||
<span style={{
|
||||
width: 26, height: 26, borderRadius: 8, display: 'grid', placeItems: 'center',
|
||||
background: isActive ? `oklch(0.62 0.15 ${t.hue} / 0.12)` : 'var(--surface-2)',
|
||||
color: isActive ? `oklch(0.55 0.15 ${t.hue})` : 'var(--text-3)',
|
||||
flexShrink: 0, transition: 'all .15s',
|
||||
}}>
|
||||
<Icon style={{ width: 14, height: 14 }} />
|
||||
</span>
|
||||
{t.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* ── Bundle info bar ── */}
|
||||
<div className="flex items-center gap-3 px-6 py-3 border-b border-slate-100 dark:border-gray-700/50 bg-slate-50/50 dark:bg-gray-800/30">
|
||||
<div className={`w-7 h-7 rounded-lg flex items-center justify-center ${tab.color}`}>
|
||||
<tab.icon className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-slate-700 dark:text-slate-300">{tab.label}</p>
|
||||
<p className="text-[11px] text-slate-400 dark:text-slate-500">{tab.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Tab content ── */}
|
||||
{activeTab === 'provinces' && <ProvincesTab />}
|
||||
{activeTab === 'cities' && <CitiesTab />}
|
||||
{activeTab === 'specialties' && <SpecialtiesTab />}
|
||||
{/* Content */}
|
||||
{activeTab === 'provinces' && <ProvincesTab />}
|
||||
{activeTab === 'cities' && <CitiesTab />}
|
||||
{activeTab === 'specialties' && <SpecialtiesTab />}
|
||||
{activeTab === 'doctor_services' && <DoctorServicesTab />}
|
||||
{activeTab === 'insurances' && <InsurancesTab />}
|
||||
{activeTab === 'tags' && <TagsTab />}
|
||||
{activeTab === 'insurances' && <InsurancesTab />}
|
||||
{activeTab === 'tags' && <TagsTab />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,18 +1,19 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { EyeIcon, TrashIcon, PencilIcon } from '@heroicons/react/24/outline';
|
||||
import { EyeIcon, TrashIcon, PencilIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse, PaginatedResponse } from '../lib/api';
|
||||
import type { Clinic } from '../types';
|
||||
import { formatDate, formatNumber } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import { ActiveBadge } from '../components/ui/StatusBadge';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
|
||||
const HUES_LIST = [256, 205, 162, 295, 272];
|
||||
|
||||
export default function ClinicsPage() {
|
||||
const navigate = useNavigate();
|
||||
const qc = useQueryClient();
|
||||
@@ -43,25 +44,33 @@ export default function ClinicsPage() {
|
||||
{
|
||||
key: 'name',
|
||||
header: 'نام کلینیک',
|
||||
render: (c) => (
|
||||
<div className="flex items-center gap-3">
|
||||
{c.logo ? (
|
||||
<img src={c.logo} alt="" className="w-8 h-8 rounded-lg object-cover" />
|
||||
) : (
|
||||
<div className="w-8 h-8 rounded-lg bg-blue-100 flex items-center justify-center text-blue-700 text-xs font-bold">
|
||||
{c.name?.[0]}
|
||||
render: (c) => {
|
||||
const hue = HUES_LIST[(c.uuid?.charCodeAt(0) ?? 0) % HUES_LIST.length];
|
||||
return (
|
||||
<div className="cell-user">
|
||||
{c.logo ? (
|
||||
<img src={c.logo} alt="" className="avatar sm" style={{ objectFit: 'cover' }} />
|
||||
) : (
|
||||
<div className="avatar sm" style={{
|
||||
background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))`,
|
||||
}}>
|
||||
{c.name?.[0] ?? '?'}
|
||||
</div>
|
||||
)}
|
||||
<div>
|
||||
<b>{c.name}</b>
|
||||
</div>
|
||||
)}
|
||||
<span className="font-medium text-slate-800 dark:text-slate-100">{c.name}</span>
|
||||
</div>
|
||||
),
|
||||
</div>
|
||||
);
|
||||
},
|
||||
},
|
||||
{ key: 'phone', header: 'تلفن', render: (c) => c.phone ? <span dir="ltr">{c.phone}</span> : '—' },
|
||||
{
|
||||
key: 'doctors_count',
|
||||
header: 'پزشکان',
|
||||
render: (c) => (
|
||||
<span className="text-xs bg-indigo-50 text-indigo-700 px-2 py-0.5 rounded-full">
|
||||
<span className="badge blue">
|
||||
<span className="bdot" />
|
||||
{formatNumber(c.doctors_count ?? 0)} پزشک
|
||||
</span>
|
||||
),
|
||||
@@ -74,34 +83,45 @@ export default function ClinicsPage() {
|
||||
const total = data?.meta?.totalRecords ?? 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="کلینیکها"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'کلینیکها' }]}
|
||||
/>
|
||||
<div className="fade-in">
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">کلینیکها</h1>
|
||||
<div className="muted">{total} کلینیک ثبتشده</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="cp-card p-6">
|
||||
<div className="card">
|
||||
<div className="card-pad" style={{ paddingBottom: 0 }}>
|
||||
<div className="toolbar">
|
||||
<div className="field" style={{ minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
placeholder="جستجو بر اساس نام کلینیک..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DataTable<Clinic>
|
||||
columns={columns}
|
||||
data={items}
|
||||
loading={isLoading}
|
||||
searchValue={search}
|
||||
onSearchChange={(v) => { setSearch(v); setPage(1); }}
|
||||
searchPlaceholder="جستجو بر اساس نام کلینیک..."
|
||||
emptyMessage="هیچ کلینیکی یافت نشد"
|
||||
actions={(clinic) => (
|
||||
<>
|
||||
<button onClick={() => navigate(`/admin/clinics/${clinic.uuid}`)}
|
||||
className="cp-action-view" title="مشاهده">
|
||||
<EyeIcon className="w-4 h-4" />
|
||||
className="mini-btn" title="مشاهده">
|
||||
<EyeIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
<button onClick={() => navigate(`/admin/clinics/${clinic.uuid}?edit=1`)}
|
||||
className="cp-action-edit" title="ویرایش">
|
||||
<PencilIcon className="w-4 h-4" />
|
||||
className="mini-btn" title="ویرایش">
|
||||
<PencilIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
<button onClick={() => setDeleteTarget(clinic)}
|
||||
className="cp-action-delete" title="حذف">
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
className="mini-btn danger" title="حذف">
|
||||
<TrashIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { CheckIcon, TrashIcon } from '@heroicons/react/24/outline';
|
||||
import { CheckIcon, TrashIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse, PaginatedResponse } from '../lib/api';
|
||||
import type { Comment } from '../types';
|
||||
import { formatDate } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import { ActiveBadge } from '../components/ui/StatusBadge';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
@@ -14,7 +13,7 @@ import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
|
||||
const FILTERS = [
|
||||
{ value: '', label: 'همه' },
|
||||
{ value: 'pending', label: 'در انتظار تأیید' },
|
||||
{ value: 'pending', label: 'در انتظار' },
|
||||
{ value: 'approved', label: 'تأییدشده' },
|
||||
];
|
||||
|
||||
@@ -61,7 +60,7 @@ export default function CommentsPage() {
|
||||
{
|
||||
key: 'patient_name',
|
||||
header: 'کاربر',
|
||||
render: (c) => <span className="font-medium text-slate-800 dark:text-slate-100">{c.patient_name}</span>,
|
||||
render: (c) => <b>{c.patient_name}</b>,
|
||||
},
|
||||
{ key: 'doctor_name', header: 'پزشک', render: (c) => `دکتر ${c.doctor_name}` },
|
||||
{ key: 'title', header: 'عنوان' },
|
||||
@@ -69,7 +68,9 @@ export default function CommentsPage() {
|
||||
key: 'body',
|
||||
header: 'متن',
|
||||
render: (c) => (
|
||||
<span className="text-slate-500 dark:text-slate-400 text-xs line-clamp-2 max-w-xs block">{c.body}</span>
|
||||
<span className="muted" style={{ fontSize: 12, display: 'block', maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
|
||||
{c.body}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
@@ -84,46 +85,57 @@ export default function CommentsPage() {
|
||||
const total = data?.meta?.totalRecords ?? 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="نظرات"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نظرات' }]}
|
||||
/>
|
||||
|
||||
<div className="cp-card p-6">
|
||||
<div className="flex items-center gap-3 mb-4">
|
||||
{FILTERS.map((f) => (
|
||||
<button key={f.value} onClick={() => { setApprovedFilter(f.value); setPage(1); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
|
||||
approvedFilter === f.value ? 'bg-primary-600 text-white' : 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
|
||||
}`}>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
<div className="fade-in">
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">نظرات</h1>
|
||||
<div className="muted">{total} نظر ثبتشده</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="card-pad" style={{ paddingBottom: 0 }}>
|
||||
<div className="toolbar">
|
||||
<div className="field" style={{ minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
placeholder="جستجو بر اساس نام پزشک یا متن..."
|
||||
/>
|
||||
</div>
|
||||
<div className="seg">
|
||||
{FILTERS.map((f) => (
|
||||
<button
|
||||
key={f.value}
|
||||
className={approvedFilter === f.value ? 'on' : ''}
|
||||
onClick={() => { setApprovedFilter(f.value); setPage(1); }}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DataTable<Comment>
|
||||
columns={columns}
|
||||
data={items}
|
||||
loading={isLoading}
|
||||
searchValue={search}
|
||||
onSearchChange={(v) => { setSearch(v); setPage(1); }}
|
||||
searchPlaceholder="جستجو بر اساس نام پزشک یا متن..."
|
||||
emptyMessage="هیچ نظری یافت نشد"
|
||||
actions={(comment) => (
|
||||
<>
|
||||
{!comment.is_approved && (
|
||||
<button
|
||||
onClick={() => setApproveTarget(comment)}
|
||||
className="cp-action-approve"
|
||||
className="mini-btn"
|
||||
title="تأیید"
|
||||
>
|
||||
<CheckIcon className="w-4 h-4" />
|
||||
<CheckIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
)}
|
||||
<button onClick={() => setDeleteTarget(comment)}
|
||||
className="cp-action-delete" title="حذف">
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
className="mini-btn danger" title="حذف">
|
||||
<TrashIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -1,14 +1,9 @@
|
||||
import React, { useMemo, useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { Link } from 'react-router-dom';
|
||||
import {
|
||||
AreaChart, Area, BarChart, Bar, PieChart, Pie, Cell,
|
||||
XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer,
|
||||
} from 'recharts';
|
||||
import {
|
||||
UserGroupIcon, HeartIcon, BuildingOffice2Icon, CalendarDaysIcon,
|
||||
CreditCardIcon, ArrowPathIcon, BellAlertIcon, UserPlusIcon,
|
||||
ChatBubbleLeftEllipsisIcon,
|
||||
CreditCardIcon, ArrowPathIcon, BellAlertIcon, ChatBubbleLeftEllipsisIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse } from '../lib/api';
|
||||
@@ -58,140 +53,200 @@ interface RecentData {
|
||||
|
||||
// ── Status maps ───────────────────────────────────────────────────────────
|
||||
|
||||
const APPT: Record<string, { label: string; cls: string; color: string }> = {
|
||||
waiting_for_payment: { label: 'انتظار پرداخت', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300', color: '#f59e0b' },
|
||||
reserved: { label: 'رزرو شده', cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300', color: '#3b82f6' },
|
||||
checked_in: { label: 'ورود به مطب', cls: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-700 dark:text-indigo-300', color: '#6366f1' },
|
||||
waiting: { label: 'صف انتظار', cls: 'bg-orange-100 dark:bg-orange-400/10 text-orange-700 dark:text-orange-300', color: '#f97316' },
|
||||
in_progress: { label: 'در حال ویزیت', cls: 'bg-purple-100 dark:bg-purple-400/10 text-purple-700 dark:text-purple-300', color: '#8b5cf6' },
|
||||
visited: { label: 'ویزیت شده', cls: 'bg-emerald-100 dark:bg-emerald-400/10 text-emerald-700 dark:text-emerald-300', color: '#10b981' },
|
||||
completed: { label: 'تکمیل شده', cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300', color: '#22c55e' },
|
||||
cancelled_by_doctor: { label: 'لغو پزشک', cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300', color: '#ef4444' },
|
||||
cancelled_by_user: { label: 'لغو بیمار', cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300', color: '#f43f5e' },
|
||||
auto_cancel_unpaid: { label: 'لغو خودکار', cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400', color: '#94a3b8' },
|
||||
no_show: { label: 'غیبت', cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400', color: '#64748b' },
|
||||
const APPT_LABEL: Record<string, string> = {
|
||||
waiting_for_payment: 'انتظار پرداخت', reserved: 'رزرو شده', checked_in: 'ورود به مطب',
|
||||
waiting: 'صف انتظار', in_progress: 'در حال ویزیت', visited: 'ویزیت شده',
|
||||
completed: 'تکمیل شده', cancelled_by_doctor: 'لغو پزشک', cancelled_by_user: 'لغو بیمار',
|
||||
auto_cancel_unpaid: 'لغو خودکار', no_show: 'غیبت',
|
||||
};
|
||||
const APPT_COLOR: Record<string, string> = {
|
||||
waiting_for_payment: '#f59e0b', reserved: '#3b82f6', checked_in: '#6366f1',
|
||||
waiting: '#f97316', in_progress: '#8b5cf6', visited: '#10b981',
|
||||
completed: '#22c55e', cancelled_by_doctor: '#ef4444', cancelled_by_user: '#f43f5e',
|
||||
auto_cancel_unpaid: '#94a3b8', no_show: '#64748b',
|
||||
};
|
||||
const APPT_CLS: Record<string, string> = {
|
||||
waiting_for_payment: 'amber', reserved: 'blue', checked_in: 'violet',
|
||||
waiting: 'amber', in_progress: 'violet', visited: 'green', completed: 'green',
|
||||
cancelled_by_doctor: 'red', cancelled_by_user: 'red', auto_cancel_unpaid: 'gray', no_show: 'gray',
|
||||
};
|
||||
const PAY_LABEL: Record<string, string> = {
|
||||
pending: 'در انتظار', received: 'موفق', canceled: 'لغو شده', refund: 'استرداد',
|
||||
};
|
||||
const PAY_COLOR: Record<string, string> = {
|
||||
pending: '#f59e0b', received: '#22c55e', canceled: '#ef4444', refund: '#3b82f6',
|
||||
};
|
||||
const PAY_CLS: Record<string, string> = {
|
||||
pending: 'amber', received: 'green', canceled: 'red', refund: 'blue',
|
||||
};
|
||||
|
||||
const PAY: Record<string, { label: string; cls: string; color: string }> = {
|
||||
pending: { label: 'در انتظار', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300', color: '#f59e0b' },
|
||||
received: { label: 'موفق', cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300', color: '#22c55e' },
|
||||
canceled: { label: 'لغو شده', cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300', color: '#ef4444' },
|
||||
refund: { label: 'استرداد', cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300', color: '#3b82f6' },
|
||||
};
|
||||
// ── SVG Chart Components ──────────────────────────────────────────────────
|
||||
|
||||
// ── Skeletons ─────────────────────────────────────────────────────────────
|
||||
|
||||
function KpiSkeleton() {
|
||||
function SvgLineChart({ data, color, h = 220 }: { data: number[]; color: string; h?: number }) {
|
||||
if (data.length < 2) return null;
|
||||
const w = 760, pad = 8;
|
||||
const max = Math.max(...data) * 1.15 || 1;
|
||||
const stepX = (w - pad * 2) / (data.length - 1);
|
||||
const pts: [number, number][] = data.map((v, i) => [
|
||||
pad + i * stepX,
|
||||
h - pad - (v / max) * (h - pad * 2 - 18),
|
||||
]);
|
||||
const d = pts.map((p, i) => {
|
||||
if (i === 0) return `M${p[0]},${p[1]}`;
|
||||
const prev = pts[i - 1];
|
||||
const cx = (prev[0] + p[0]) / 2;
|
||||
return `C${cx},${prev[1]} ${cx},${p[1]} ${p[0]},${p[1]}`;
|
||||
}).join(' ');
|
||||
const area = `${d} L${pts[pts.length - 1][0]},${h - pad} L${pts[0][0]},${h - pad} Z`;
|
||||
const gid = 'lg' + color.replace(/[^a-z0-9]/gi, '');
|
||||
return (
|
||||
<div className="cp-card p-5 flex items-start gap-4">
|
||||
<div className="w-11 h-11 rounded-xl skeleton shrink-0" />
|
||||
<div className="flex-1 space-y-2 pt-0.5">
|
||||
<div className="h-3 rounded skeleton w-2/3" />
|
||||
<div className="h-6 rounded skeleton w-1/2" />
|
||||
<div className="h-3 rounded skeleton w-3/4" />
|
||||
</div>
|
||||
</div>
|
||||
<svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none" style={{ overflow: 'visible' }}>
|
||||
<defs>
|
||||
<linearGradient id={gid} x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="0%" stopColor={color} stopOpacity={0.22} />
|
||||
<stop offset="100%" stopColor={color} stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
{[0.25, 0.5, 0.75, 1].map((g, i) => (
|
||||
<line key={i} x1={pad} x2={w - pad} y1={(h - pad * 2) * g} y2={(h - pad * 2) * g}
|
||||
stroke="var(--border)" strokeDasharray="4 6" strokeWidth={1} />
|
||||
))}
|
||||
<path d={area} fill={`url(#${gid})`} className="ln-area" />
|
||||
<path d={d} fill="none" stroke={color} strokeWidth={2.6} strokeLinecap="round" className="ln-path" />
|
||||
{pts.map((p, i) => i % 4 === 0 && (
|
||||
<circle key={i} cx={p[0]} cy={p[1]} r={3.2} fill="var(--surface)" stroke={color} strokeWidth={2.2} />
|
||||
))}
|
||||
<style>{`.ln-path{stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 1.4s cubic-bezier(.22,.61,.36,1) forwards}.ln-area{opacity:0;animation:fadein .9s .5s forwards}@keyframes draw{to{stroke-dashoffset:0}}`}</style>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ChartSkeleton({ h = 'h-56' }: { h?: string }) {
|
||||
return <div className={`${h} rounded-xl skeleton w-full`} />;
|
||||
function SvgDonut({ data, size = 190 }: { data: { value: number; color: string; label: string }[]; size?: number }) {
|
||||
const total = data.reduce((s, d) => s + d.value, 0);
|
||||
if (!total) return null;
|
||||
const r = size / 2 - 16;
|
||||
const c = 2 * Math.PI * r;
|
||||
let off = 0;
|
||||
return (
|
||||
<svg viewBox={`0 0 ${size} ${size}`} width={size} height={size}>
|
||||
<g transform={`rotate(-90 ${size / 2} ${size / 2})`}>
|
||||
{data.map((d, i) => {
|
||||
const frac = d.value / total;
|
||||
const seg = (
|
||||
<circle key={i} cx={size / 2} cy={size / 2} r={r} fill="none"
|
||||
stroke={d.color} strokeWidth={20} strokeLinecap="round"
|
||||
strokeDasharray={`${Math.max(frac * c - 4, 0)} ${c}`}
|
||||
strokeDashoffset={-off * c} />
|
||||
);
|
||||
off += frac;
|
||||
return seg;
|
||||
})}
|
||||
</g>
|
||||
<text x="50%" y="46%" textAnchor="middle" fontSize="13" fill="var(--text-3)" fontFamily="Vazirmatn">مجموع</text>
|
||||
<text x="50%" y="60%" textAnchor="middle" fontSize="22" fontWeight="800" fill="var(--text)" fontFamily="Vazirmatn">{formatNumber(total)}</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function ListSkeleton() {
|
||||
function SvgHBars({ data }: { data: { label: string; value: number }[] }) {
|
||||
const max = Math.max(...data.map(d => d.value)) || 1;
|
||||
return (
|
||||
<div className="space-y-3">
|
||||
{Array.from({ length: 4 }).map((_, i) => (
|
||||
<div key={i} className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full skeleton shrink-0" />
|
||||
<div className="flex-1 space-y-1.5">
|
||||
<div className="h-3 rounded skeleton w-3/4" />
|
||||
<div className="h-3 rounded skeleton w-1/2" />
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
{data.map((d, i) => (
|
||||
<div key={i} style={{ display: 'grid', gridTemplateColumns: '160px 1fr 52px', alignItems: 'center', gap: 12 }}>
|
||||
<div style={{ fontSize: 12.5, color: 'var(--text-2)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{d.label}</div>
|
||||
<div className="bar" style={{ height: 12 }}>
|
||||
<i style={{ width: `${(d.value / max) * 100}%`, animation: `growbar 1s ${i * 0.07}s cubic-bezier(.22,.61,.36,1) both` }} />
|
||||
</div>
|
||||
<div style={{ fontSize: 12.5, fontWeight: 700 }}>{formatNumber(d.value)}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Badge ─────────────────────────────────────────────────────────────────
|
||||
// ── Colored Avatar ────────────────────────────────────────────────────────
|
||||
|
||||
function Badge({ status, map }: { status: string; map: Record<string, { label: string; cls: string }> }) {
|
||||
const s = map[status] ?? { label: status, cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600' };
|
||||
function AvatarEl({ initials, hue = 222, size }: { initials: string; hue?: number; size?: 'sm' | 'lg' }) {
|
||||
const cls = 'avatar' + (size === 'sm' ? ' sm' : size === 'lg' ? ' lg' : '');
|
||||
return (
|
||||
<span className={`shrink-0 text-[10px] font-medium px-2 py-0.5 rounded-full ${s.cls}`}>{s.label}</span>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Chart helpers ─────────────────────────────────────────────────────────
|
||||
|
||||
const RADIAN = Math.PI / 180;
|
||||
|
||||
function PieLabelInside({ cx, cy, midAngle, innerRadius, outerRadius, percent }: {
|
||||
cx: number; cy: number; midAngle: number; innerRadius: number; outerRadius: number; percent: number;
|
||||
}) {
|
||||
if (percent < 0.06) return null;
|
||||
const r = innerRadius + (outerRadius - innerRadius) * 0.5;
|
||||
const x = cx + r * Math.cos(-midAngle * RADIAN);
|
||||
const y = cy + r * Math.sin(-midAngle * RADIAN);
|
||||
return (
|
||||
<text x={x} y={y} fill="white" textAnchor="middle" dominantBaseline="central" fontSize={10} fontWeight="600">
|
||||
{`${(percent * 100).toFixed(0)}٪`}
|
||||
</text>
|
||||
);
|
||||
}
|
||||
|
||||
function TipBox({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div
|
||||
className="bg-white dark:bg-gray-800 rounded-xl border border-slate-200 dark:border-gray-700 shadow-lg px-3 py-2 text-sm"
|
||||
dir="rtl"
|
||||
>
|
||||
{children}
|
||||
<div className={cls} style={{ background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))` }}>
|
||||
{initials}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ApptTooltip({ active, payload, label }: { active?: boolean; payload?: { value: number }[]; label?: string }) {
|
||||
if (!active || !payload?.length) return null;
|
||||
// ── MiniList ──────────────────────────────────────────────────────────────
|
||||
|
||||
interface MiniRow {
|
||||
title: string;
|
||||
sub: string;
|
||||
meta: string;
|
||||
badgeLabel: string;
|
||||
badgeCls: string;
|
||||
initials: string;
|
||||
hue: number;
|
||||
}
|
||||
|
||||
function MiniList({ title, to, rows, loading }: { title: string; to: string; rows: MiniRow[]; loading?: boolean }) {
|
||||
return (
|
||||
<TipBox>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mb-0.5">{label}</p>
|
||||
<p className="font-bold text-violet-600 dark:text-violet-400">{formatNumber(payload[0]?.value ?? 0)} نوبت</p>
|
||||
</TipBox>
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row">
|
||||
<h3 style={{ fontSize: 16 }}>{title}</h3>
|
||||
<Link to={to} className="link">همه</Link>
|
||||
</div>
|
||||
{loading ? (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} style={{ display: 'flex', gap: 11, alignItems: 'center' }}>
|
||||
<div className="skeleton" style={{ width: 32, height: 32, borderRadius: '50%', flexShrink: 0 }} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="skeleton" style={{ height: 13, borderRadius: 5, width: '70%', marginBottom: 5 }} />
|
||||
<div className="skeleton" style={{ height: 11, borderRadius: 5, width: '50%' }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : !rows.length ? (
|
||||
<p className="muted" style={{ textAlign: 'center', padding: '32px 0', fontSize: 13.5 }}>موردی ثبت نشده</p>
|
||||
) : (
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{rows.map((r, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '10px 0', borderBottom: i < rows.length - 1 ? '1px solid var(--border)' : 'none' }}>
|
||||
<AvatarEl initials={r.initials} hue={r.hue} size="sm" />
|
||||
<div style={{ flex: 1, minWidth: 0 }}>
|
||||
<b style={{ fontSize: 13.5, display: 'block', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{r.title}</b>
|
||||
<span className="muted" style={{ fontSize: 11.5 }}>{r.sub}</span>
|
||||
</div>
|
||||
<div style={{ textAlign: 'start', flexShrink: 0 }}>
|
||||
<span className={`badge ${r.badgeCls}`}><span className="bdot" />{r.badgeLabel}</span>
|
||||
<div className="muted" style={{ fontSize: 10.5, marginTop: 3 }}>{r.meta}</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function RevTooltip({ active, payload, label }: { active?: boolean; payload?: { value: number }[]; label?: string }) {
|
||||
if (!active || !payload?.length) return null;
|
||||
// ── Skeleton ──────────────────────────────────────────────────────────────
|
||||
|
||||
function KpiSkeleton() {
|
||||
return (
|
||||
<TipBox>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mb-0.5">{label}</p>
|
||||
<p className="font-bold text-pink-600 dark:text-pink-400">{formatRial(payload[0]?.value ?? 0)}</p>
|
||||
</TipBox>
|
||||
<div className="stat">
|
||||
<div className="skeleton" style={{ width: 40, height: 40, borderRadius: 12, marginBottom: 14 }} />
|
||||
<div className="skeleton" style={{ height: 13, borderRadius: 6, width: '60%', marginBottom: 6 }} />
|
||||
<div className="skeleton" style={{ height: 26, borderRadius: 6, width: '45%', marginBottom: 4 }} />
|
||||
<div className="skeleton" style={{ height: 12, borderRadius: 6, width: '75%' }} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function BarTip({ active, payload, label }: { active?: boolean; payload?: { value: number }[]; label?: string }) {
|
||||
if (!active || !payload?.length) return null;
|
||||
return (
|
||||
<TipBox>
|
||||
<p className="font-medium text-slate-700 dark:text-slate-200 mb-0.5">{label}</p>
|
||||
<p className="font-bold text-violet-600 dark:text-violet-400">{formatNumber(payload[0]?.value ?? 0)} نوبت</p>
|
||||
</TipBox>
|
||||
);
|
||||
}
|
||||
|
||||
const revAxisFmt = (v: number) =>
|
||||
v >= 1_000_000_000 ? `${(v / 1_000_000_000).toFixed(1)}B`
|
||||
: v >= 1_000_000 ? `${(v / 1_000_000).toFixed(0)}M`
|
||||
: v >= 1_000 ? `${Math.round(v / 1_000)}K`
|
||||
: String(v);
|
||||
|
||||
// ── Main Component ────────────────────────────────────────────────────────
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [chartTab, setChartTab] = useState<'appointments' | 'revenue'>('appointments');
|
||||
const [chartMode, setChartMode] = useState<'appts' | 'rev'>('appts');
|
||||
|
||||
const statsQ = useQuery({
|
||||
queryKey: ['dashboard-stats'],
|
||||
@@ -209,280 +264,248 @@ export default function DashboardPage() {
|
||||
staleTime: 30_000,
|
||||
});
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const stats = useMemo<DashboardStats | undefined>(() => (statsQ.data?.data as any)?.data ?? statsQ.data?.data, [statsQ.data]);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const charts = useMemo<ChartData | undefined>( () => (chartsQ.data?.data as any)?.data ?? chartsQ.data?.data, [chartsQ.data]);
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const recent = useMemo<RecentData | undefined>( () => (recentQ.data?.data as any)?.data ?? recentQ.data?.data, [recentQ.data]);
|
||||
|
||||
const fn = (n?: number) => n !== undefined ? formatNumber(n) : '—';
|
||||
const fr = (n?: number) => n !== undefined ? formatRial(n) : '—';
|
||||
const today = new Date().toLocaleDateString('fa-IR', { year: 'numeric', month: 'long', day: 'numeric' });
|
||||
const isFetching = statsQ.isFetching || chartsQ.isFetching || recentQ.isFetching;
|
||||
|
||||
// Chart data transformations
|
||||
const apptSeries = useMemo(() => charts?.appointments_30d?.map(d => d.count) ?? [], [charts]);
|
||||
const revSeries = useMemo(() => charts?.revenue_30d?.map(d => d.amount) ?? [], [charts]);
|
||||
const donutData = useMemo(() =>
|
||||
(charts?.appointment_status ?? []).slice(0, 7).map(s => ({
|
||||
label: APPT_LABEL[s.status] ?? s.status,
|
||||
value: s.count,
|
||||
color: APPT_COLOR[s.status] ?? '#94a3b8',
|
||||
})), [charts]);
|
||||
const hbarsData = useMemo(() =>
|
||||
(charts?.top_specialties ?? []).map(s => ({ label: s.name, value: s.count })), [charts]);
|
||||
|
||||
// KPI cards
|
||||
const kpiCards = [
|
||||
{ label: 'کل کاربران', value: fn(stats?.total_users), sub: undefined, icon: UserGroupIcon, iconBg: 'bg-violet-100 dark:bg-violet-400/10', iconColor: 'text-violet-600 dark:text-violet-400' },
|
||||
{ label: 'پزشکان فعال', value: fn(stats?.active_doctors), sub: stats ? `از ${fn(stats.total_doctors)} پزشک` : undefined, icon: HeartIcon, iconBg: 'bg-emerald-100 dark:bg-emerald-400/10', iconColor: 'text-emerald-600 dark:text-emerald-400' },
|
||||
{ label: 'کلینیکها', value: fn(stats?.total_clinics), sub: undefined, icon: BuildingOffice2Icon, iconBg: 'bg-blue-100 dark:bg-blue-400/10', iconColor: 'text-blue-600 dark:text-blue-400' },
|
||||
{ label: 'نوبتهای امروز', value: fn(stats?.today_appointments), sub: stats ? `ماه جاری: ${fn(stats.this_month_appointments)}` : undefined, icon: CalendarDaysIcon, iconBg: 'bg-orange-100 dark:bg-orange-400/10', iconColor: 'text-orange-600 dark:text-orange-400' },
|
||||
{ label: 'درآمد این ماه', value: fr(stats?.this_month_revenue), sub: stats ? `کل: ${fr(stats.total_payments_amount)}` : undefined, icon: CreditCardIcon, iconBg: 'bg-pink-100 dark:bg-pink-400/10', iconColor: 'text-pink-600 dark:text-pink-400' },
|
||||
{ label: 'در انتظار بررسی', value: fn(stats ? stats.pending_comments + stats.pending_settlements : undefined), sub: stats ? `${fn(stats.pending_comments)} نظر · ${fn(stats.pending_settlements)} تسویه` : undefined, icon: BellAlertIcon, iconBg: 'bg-amber-100 dark:bg-amber-400/10', iconColor: 'text-amber-600 dark:text-amber-400' },
|
||||
{ label: 'کل کاربران', value: fn(stats?.total_users), hint: 'رشد نسبت به ماه قبل', icon: UserGroupIcon, color: 'var(--violet)', bg: 'var(--violet-bg)' },
|
||||
{ label: 'پزشکان فعال', value: fn(stats?.active_doctors), hint: stats ? `از ${fn(stats.total_doctors)} پزشک` : '', icon: HeartIcon, color: 'var(--success)', bg: 'var(--success-bg)' },
|
||||
{ label: 'کلینیکها', value: fn(stats?.total_clinics), hint: '', icon: BuildingOffice2Icon, color: 'var(--info)', bg: 'var(--info-bg)' },
|
||||
{ label: 'نوبتهای امروز', value: fn(stats?.today_appointments), hint: stats ? `ماه جاری: ${fn(stats.this_month_appointments)}` : '', icon: CalendarDaysIcon, color: 'var(--warning)', bg: 'var(--warning-bg)' },
|
||||
{ label: 'درآمد این ماه', value: fr(stats?.this_month_revenue), hint: 'تومان', icon: CreditCardIcon, color: 'var(--primary)', bg: 'var(--primary-soft)' },
|
||||
{ label: 'در انتظار بررسی', value: fn(stats ? stats.pending_comments + stats.pending_settlements : undefined), hint: stats ? `${fn(stats.pending_comments)} نظر · ${fn(stats.pending_settlements)} تسویه` : '', icon: BellAlertIcon, color: 'var(--danger)', bg: 'var(--danger-bg)' },
|
||||
];
|
||||
|
||||
// Activity timeline
|
||||
const timelineEvents = useMemo(() => {
|
||||
if (!recent) return [];
|
||||
const evs: { title: string; sub?: string; time: string; color: string }[] = [];
|
||||
(recent.appointments ?? []).slice(0, 4).forEach((a) => {
|
||||
evs.push({ title: `نوبت ${APPT[a.status]?.label ?? a.status}`, sub: `${a.user_name || a.user_mobile} · دکتر ${a.doctor_name}`, time: a.created_at, color: APPT[a.status]?.color ?? '#94a3b8' });
|
||||
});
|
||||
(recent.payments ?? []).slice(0, 3).forEach((p) => {
|
||||
evs.push({ title: `پرداخت ${PAY[p.status]?.label ?? p.status}`, sub: `${p.user_name || p.user_mobile} · ${formatRial(p.amount)}`, time: p.created_at, color: PAY[p.status]?.color ?? '#94a3b8' });
|
||||
});
|
||||
(recent.users ?? []).slice(0, 3).forEach((u) => {
|
||||
evs.push({ title: 'ثبتنام کاربر جدید', sub: u.name || u.mobile, time: u.created_at, color: '#8b5cf6' });
|
||||
});
|
||||
return evs.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()).slice(0, 10);
|
||||
}, [recent]);
|
||||
|
||||
// Quick actions
|
||||
const quickActions = [
|
||||
{ label: 'پزشکان', to: '/admin/doctors', icon: HeartIcon, iconBg: 'bg-emerald-100 dark:bg-emerald-400/10', iconColor: 'text-emerald-600 dark:text-emerald-400' },
|
||||
{ label: 'کلینیکها', to: '/admin/clinics', icon: BuildingOffice2Icon, iconBg: 'bg-blue-100 dark:bg-blue-400/10', iconColor: 'text-blue-600 dark:text-blue-400' },
|
||||
{ label: 'نوبتها', to: '/admin/appointments', icon: CalendarDaysIcon, iconBg: 'bg-orange-100 dark:bg-orange-400/10', iconColor: 'text-orange-600 dark:text-orange-400' },
|
||||
{ label: 'پرداختها', to: '/admin/payments', icon: CreditCardIcon, iconBg: 'bg-pink-100 dark:bg-pink-400/10', iconColor: 'text-pink-600 dark:text-pink-400' },
|
||||
{ label: 'کاربران', to: '/admin/users', icon: UserGroupIcon, iconBg: 'bg-violet-100 dark:bg-violet-400/10', iconColor: 'text-violet-600 dark:text-violet-400' },
|
||||
{ label: 'نظرات', to: '/admin/comments', icon: ChatBubbleLeftEllipsisIcon, iconBg: 'bg-amber-100 dark:bg-amber-400/10', iconColor: 'text-amber-600 dark:text-amber-400' },
|
||||
{ label: 'پزشکان', to: '/admin/doctors', icon: HeartIcon, color: 'var(--success)', bg: 'var(--success-bg)' },
|
||||
{ label: 'کلینیکها', to: '/admin/clinics', icon: BuildingOffice2Icon, color: 'var(--info)', bg: 'var(--info-bg)' },
|
||||
{ label: 'نوبتها', to: '/admin/appointments', icon: CalendarDaysIcon, color: 'var(--warning)', bg: 'var(--warning-bg)' },
|
||||
{ label: 'پرداختها', to: '/admin/payments', icon: CreditCardIcon, color: 'var(--danger)', bg: 'var(--danger-bg)' },
|
||||
{ label: 'نظرات', to: '/admin/comments', icon: ChatBubbleLeftEllipsisIcon, color: 'var(--violet)', bg: 'var(--violet-bg)' },
|
||||
{ label: 'کاربران', to: '/admin/users', icon: UserGroupIcon, color: 'var(--primary)', bg: 'var(--primary-soft)' },
|
||||
];
|
||||
|
||||
const isFetching = statsQ.isFetching || chartsQ.isFetching || recentQ.isFetching;
|
||||
// Timeline events
|
||||
const timelineEvents = useMemo(() => {
|
||||
if (!recent) return [];
|
||||
const evs: { title: string; sub: string; time: string; color: string }[] = [];
|
||||
(recent.appointments ?? []).slice(0, 4).forEach(a => {
|
||||
evs.push({ title: `نوبت ${APPT_LABEL[a.status] ?? a.status}`, sub: `${a.user_name || a.user_mobile} · دکتر ${a.doctor_name}`, time: a.created_at, color: APPT_COLOR[a.status] ?? '#94a3b8' });
|
||||
});
|
||||
(recent.payments ?? []).slice(0, 3).forEach(p => {
|
||||
evs.push({ title: `پرداخت ${PAY_LABEL[p.status] ?? p.status}`, sub: `${p.user_name || p.user_mobile} · ${formatRial(p.amount)}`, time: p.created_at, color: PAY_COLOR[p.status] ?? '#94a3b8' });
|
||||
});
|
||||
(recent.users ?? []).slice(0, 3).forEach(u => {
|
||||
evs.push({ title: 'ثبتنام کاربر جدید', sub: u.name || u.mobile, time: u.created_at, color: '#8b5cf6' });
|
||||
});
|
||||
return evs.sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime()).slice(0, 8);
|
||||
}, [recent]);
|
||||
|
||||
// MiniList rows
|
||||
const apptRows = useMemo<MiniRow[]>(() =>
|
||||
(recent?.appointments ?? []).slice(0, 5).map(a => ({
|
||||
title: a.user_name || a.user_mobile,
|
||||
sub: `دکتر ${a.doctor_name}`,
|
||||
meta: formatDateTime(a.slot_start),
|
||||
badgeLabel: APPT_LABEL[a.status] ?? a.status,
|
||||
badgeCls: APPT_CLS[a.status] ?? 'gray',
|
||||
initials: (a.user_name || a.user_mobile).slice(0, 2),
|
||||
hue: 222,
|
||||
})), [recent]);
|
||||
|
||||
const payRows = useMemo<MiniRow[]>(() =>
|
||||
(recent?.payments ?? []).slice(0, 5).map(p => ({
|
||||
title: p.user_name || p.user_mobile,
|
||||
sub: formatRial(p.amount),
|
||||
meta: formatDateTime(p.created_at),
|
||||
badgeLabel: PAY_LABEL[p.status] ?? p.status,
|
||||
badgeCls: PAY_CLS[p.status] ?? 'gray',
|
||||
initials: (p.user_name || p.user_mobile).slice(0, 2),
|
||||
hue: 162,
|
||||
})), [recent]);
|
||||
|
||||
const userRows = useMemo<MiniRow[]>(() =>
|
||||
(recent?.users ?? []).slice(0, 5).map(u => ({
|
||||
title: u.name || u.mobile,
|
||||
sub: u.name ? u.mobile : '',
|
||||
meta: formatDateTime(u.created_at),
|
||||
badgeLabel: 'فعال',
|
||||
badgeCls: 'green',
|
||||
initials: (u.name || u.mobile).slice(0, 2),
|
||||
hue: 256,
|
||||
})), [recent]);
|
||||
|
||||
return (
|
||||
<div className="animate-slide-up space-y-5">
|
||||
<div className="fade-in">
|
||||
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
{/* Page header */}
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-50">داشبورد</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">{today}</p>
|
||||
<h1 className="section-title">داشبورد</h1>
|
||||
<div className="muted" style={{ fontSize: 13, marginTop: 2 }}>{today} · نمای کلی عملکرد مجموعه</div>
|
||||
</div>
|
||||
<div style={{ display: 'flex', gap: 10 }}>
|
||||
<button className="btn ghost sm">گزارش</button>
|
||||
<button className="btn primary sm" disabled={isFetching}
|
||||
onClick={() => { statsQ.refetch(); chartsQ.refetch(); recentQ.refetch(); }}>
|
||||
<ArrowPathIcon style={{ width: 14, height: 14 }} />
|
||||
بهروزرسانی
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => { statsQ.refetch(); chartsQ.refetch(); recentQ.refetch(); }}
|
||||
disabled={isFetching}
|
||||
className="flex items-center gap-1.5 text-sm text-slate-500 dark:text-slate-400 hover:text-primary-600 dark:hover:text-primary-400 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<ArrowPathIcon className={`w-4 h-4 ${isFetching ? 'animate-spin' : ''}`} />
|
||||
بهروزرسانی
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── Section 1: KPI Cards ─────────────────────────────────── */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-3">
|
||||
{/* Stat cards (6-col grid) */}
|
||||
<div className="stat-grid">
|
||||
{statsQ.isLoading
|
||||
? Array.from({ length: 6 }).map((_, i) => <KpiSkeleton key={i} />)
|
||||
: kpiCards.map((c) => (
|
||||
<div key={c.label} className="cp-card p-4 flex items-start gap-3">
|
||||
<div className={`cp-stat-icon ${c.iconBg} shrink-0`}>
|
||||
<c.icon className={`w-5 h-5 ${c.iconColor}`} />
|
||||
: kpiCards.map(c => (
|
||||
<div key={c.label} className="stat">
|
||||
<div className="ico" style={{ background: c.bg, color: c.color }}>
|
||||
<c.icon style={{ width: 21, height: 21 }} />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mb-1 truncate">{c.label}</p>
|
||||
<p className="text-lg font-bold text-slate-900 dark:text-slate-50 leading-none">{c.value}</p>
|
||||
{c.sub && <p className="text-[11px] text-slate-400 dark:text-slate-500 mt-1.5 leading-tight">{c.sub}</p>}
|
||||
<div className="lbl">{c.label}</div>
|
||||
<div className="val">{c.value}</div>
|
||||
<div style={{ display: 'flex', gap: 8, justifyContent: 'space-between' }}>
|
||||
<span className="hint">{c.hint}</span>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
|
||||
{/* ── Section 2: Charts ───────────────────────────────────── */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
|
||||
{/* Trend chart with tab toggle */}
|
||||
<div className="cp-card p-5 lg:col-span-2">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">
|
||||
{chartTab === 'appointments' ? 'نوبتها — ۳۰ روز اخیر' : 'درآمد — ۳۰ روز اخیر'}
|
||||
</h3>
|
||||
<div className="flex gap-0.5 bg-slate-100 dark:bg-gray-800 rounded-lg p-0.5">
|
||||
{(['appointments', 'revenue'] as const).map((tab) => (
|
||||
<button
|
||||
key={tab}
|
||||
onClick={() => setChartTab(tab)}
|
||||
className={`text-xs px-3 py-1 rounded-md transition-all ${
|
||||
chartTab === tab
|
||||
? 'bg-white dark:bg-gray-700 text-slate-800 dark:text-slate-200 shadow-sm font-medium'
|
||||
: 'text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-300'
|
||||
}`}
|
||||
>
|
||||
{tab === 'appointments' ? 'نوبتها' : 'درآمد'}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{chartsQ.isLoading ? <ChartSkeleton h="h-52" /> : (
|
||||
<div dir="ltr" className="w-full h-52">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
{chartTab === 'appointments' ? (
|
||||
<AreaChart data={charts?.appointments_30d ?? []} margin={{ top: 4, right: 4, left: -16, bottom: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id="apptGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#8b5cf6" stopOpacity={0.25} />
|
||||
<stop offset="95%" stopColor="#8b5cf6" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" strokeOpacity={0.6} />
|
||||
<XAxis dataKey="date" tick={{ fontSize: 10, fill: '#94a3b8' }} interval={4} tickLine={false} axisLine={false} />
|
||||
<YAxis tick={{ fontSize: 10, fill: '#94a3b8' }} tickLine={false} axisLine={false} />
|
||||
<Tooltip content={<ApptTooltip />} cursor={{ stroke: '#8b5cf6', strokeWidth: 1, strokeDasharray: '4 4' }} />
|
||||
<Area type="monotone" dataKey="count" stroke="#8b5cf6" strokeWidth={2.5} fill="url(#apptGrad)" dot={false} activeDot={{ r: 4, fill: '#8b5cf6', strokeWidth: 0 }} />
|
||||
</AreaChart>
|
||||
) : (
|
||||
<AreaChart data={charts?.revenue_30d ?? []} margin={{ top: 4, right: 4, left: -4, bottom: 0 }}>
|
||||
<defs>
|
||||
<linearGradient id="revGrad" x1="0" y1="0" x2="0" y2="1">
|
||||
<stop offset="5%" stopColor="#ec4899" stopOpacity={0.25} />
|
||||
<stop offset="95%" stopColor="#ec4899" stopOpacity={0} />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" strokeOpacity={0.6} />
|
||||
<XAxis dataKey="date" tick={{ fontSize: 10, fill: '#94a3b8' }} interval={4} tickLine={false} axisLine={false} />
|
||||
<YAxis tick={{ fontSize: 10, fill: '#94a3b8' }} tickLine={false} axisLine={false} tickFormatter={revAxisFmt} />
|
||||
<Tooltip content={<RevTooltip />} cursor={{ stroke: '#ec4899', strokeWidth: 1, strokeDasharray: '4 4' }} />
|
||||
<Area type="monotone" dataKey="amount" stroke="#ec4899" strokeWidth={2.5} fill="url(#revGrad)" dot={false} activeDot={{ r: 4, fill: '#ec4899', strokeWidth: 0 }} />
|
||||
</AreaChart>
|
||||
)}
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
{/* dash-main: Donut (360px) + LineChart (1fr) */}
|
||||
<div className="dash-main">
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row"><h3 style={{ fontSize: 16 }}>وضعیت نوبتها</h3></div>
|
||||
{chartsQ.isLoading ? (
|
||||
<>
|
||||
<div className="skeleton" style={{ width: 190, height: 190, borderRadius: '50%', margin: '6px auto 18px' }} />
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} className="skeleton" style={{ height: 14, borderRadius: 5 }} />
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div style={{ display: 'flex', justifyContent: 'center', margin: '6px 0 18px' }}>
|
||||
<SvgDonut data={donutData} />
|
||||
</div>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
|
||||
{donutData.map((d, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', fontSize: 13 }}>
|
||||
<span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
|
||||
<span style={{ width: 9, height: 9, borderRadius: 3, background: d.color, flexShrink: 0, display: 'inline-block' }} />
|
||||
<span style={{ color: 'var(--text-2)' }}>{d.label}</span>
|
||||
</span>
|
||||
<b>{formatNumber(d.value)}</b>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Donut chart — appointment status */}
|
||||
<div className="cp-card p-5">
|
||||
<h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">وضعیت نوبتها</h3>
|
||||
{chartsQ.isLoading ? <ChartSkeleton h="h-40" /> : (
|
||||
<div dir="ltr" className="w-full h-40">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<PieChart>
|
||||
<Pie
|
||||
data={charts?.appointment_status?.slice(0, 7) ?? []}
|
||||
dataKey="count"
|
||||
nameKey="status"
|
||||
cx="50%" cy="50%"
|
||||
innerRadius={42} outerRadius={68}
|
||||
labelLine={false}
|
||||
label={PieLabelInside as any}
|
||||
>
|
||||
{(charts?.appointment_status?.slice(0, 7) ?? []).map((entry: { status: string }) => (
|
||||
<Cell key={entry.status} fill={APPT[entry.status]?.color ?? '#94a3b8'} />
|
||||
))}
|
||||
</Pie>
|
||||
<Tooltip
|
||||
formatter={(value, name) => [formatNumber(Number(value)), APPT[String(name)]?.label ?? String(name)]}
|
||||
/>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row">
|
||||
<h3 style={{ fontSize: 16 }}>{chartMode === 'appts' ? 'نوبتها' : 'درآمد'} — ۳۰ روز اخیر</h3>
|
||||
<div className="seg">
|
||||
<button className={chartMode === 'appts' ? 'on' : ''} onClick={() => setChartMode('appts')}>نوبتها</button>
|
||||
<button className={chartMode === 'rev' ? 'on' : ''} onClick={() => setChartMode('rev')}>درآمد</button>
|
||||
</div>
|
||||
)}
|
||||
{!chartsQ.isLoading && (
|
||||
<ul className="mt-3 space-y-1.5">
|
||||
{(charts?.appointment_status ?? []).slice(0, 5).map((s: { status: string; count: number }) => (
|
||||
<li key={s.status} className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: APPT[s.status]?.color ?? '#94a3b8' }} />
|
||||
<span className="text-xs text-slate-600 dark:text-slate-400">{APPT[s.status]?.label ?? s.status}</span>
|
||||
</div>
|
||||
<span className="text-xs font-semibold text-slate-800 dark:text-slate-200">{formatNumber(s.count)}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
{chartsQ.isLoading ? (
|
||||
<div className="skeleton" style={{ height: 236, borderRadius: 'var(--r)' }} />
|
||||
) : (
|
||||
<SvgLineChart key={chartMode}
|
||||
data={chartMode === 'appts' ? apptSeries : revSeries}
|
||||
color={chartMode === 'appts' ? 'var(--primary)' : 'var(--success)'}
|
||||
h={236} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Section 3: Top Specialties Bar Chart ─────────────────── */}
|
||||
<div className="cp-card p-5">
|
||||
<h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">پرتکرارترین تخصصها</h3>
|
||||
{chartsQ.isLoading ? <ChartSkeleton h="h-64" /> : !charts?.top_specialties?.length ? (
|
||||
<p className="text-center py-10 text-sm text-slate-400 dark:text-slate-500">دادهای موجود نیست</p>
|
||||
{/* Top specialties (HBars) */}
|
||||
<div className="card card-pad" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div className="card-title-row">
|
||||
<h3 style={{ fontSize: 16 }}>پرتکرارترین تخصصها</h3>
|
||||
<span className="muted" style={{ fontSize: 12 }}>بر اساس تعداد نوبت</span>
|
||||
</div>
|
||||
{chartsQ.isLoading ? (
|
||||
<div className="skeleton" style={{ height: 200, borderRadius: 'var(--r)' }} />
|
||||
) : !hbarsData.length ? (
|
||||
<p className="muted" style={{ textAlign: 'center', padding: '40px 0', fontSize: 13.5 }}>دادهای موجود نیست</p>
|
||||
) : (
|
||||
<div dir="ltr" className="w-full h-64">
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
<BarChart
|
||||
data={charts.top_specialties}
|
||||
layout="vertical"
|
||||
margin={{ top: 0, right: 16, left: 0, bottom: 0 }}
|
||||
>
|
||||
<CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" strokeOpacity={0.6} horizontal={false} />
|
||||
<XAxis type="number" tick={{ fontSize: 10, fill: '#94a3b8' }} tickLine={false} axisLine={false} />
|
||||
<YAxis type="category" dataKey="name" width={140} tick={{ fontSize: 11, fill: '#64748b' }} tickLine={false} axisLine={false} />
|
||||
<Tooltip content={<BarTip />} cursor={{ fill: 'rgba(139,92,246,0.08)' }} />
|
||||
<Bar dataKey="count" fill="#8b5cf6" radius={[0, 5, 5, 0]} maxBarSize={22} />
|
||||
</BarChart>
|
||||
</ResponsiveContainer>
|
||||
</div>
|
||||
<SvgHBars data={hbarsData} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* ── Sections 4 & 5: Quick Actions + Activity Timeline ─────── */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
|
||||
{/* Quick actions */}
|
||||
<div className="cp-card p-5">
|
||||
<h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">دسترسی سریع</h3>
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
{quickActions.map((a) => (
|
||||
<Link
|
||||
key={a.to}
|
||||
to={a.to}
|
||||
className="flex flex-col items-center gap-2 p-3 rounded-xl hover:bg-slate-50 dark:hover:bg-gray-800 border border-transparent hover:border-slate-200 dark:hover:border-gray-700 transition-all group"
|
||||
>
|
||||
<div className={`w-10 h-10 rounded-xl ${a.iconBg} flex items-center justify-center`}>
|
||||
<a.icon className={`w-5 h-5 ${a.iconColor}`} />
|
||||
</div>
|
||||
<span className="text-xs font-medium text-slate-700 dark:text-slate-300 text-center group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
{a.label}
|
||||
{/* grid-2: Quick access + Timeline */}
|
||||
<div className="grid-2" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row"><h3 style={{ fontSize: 16 }}>دسترسی سریع</h3></div>
|
||||
<div className="quick-grid" style={{ gridTemplateColumns: 'repeat(3,1fr)' }}>
|
||||
{quickActions.map(a => (
|
||||
<Link key={a.to} to={a.to} className="quick">
|
||||
<span className="qi" style={{ background: a.bg, color: a.color }}>
|
||||
<a.icon style={{ width: 22, height: 22 }} />
|
||||
</span>
|
||||
<b>{a.label}</b>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Activity timeline */}
|
||||
<div className="cp-card p-5 lg:col-span-2">
|
||||
<h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200 mb-4">آخرین رویدادها</h3>
|
||||
<div className="card card-pad">
|
||||
<div className="card-title-row">
|
||||
<h3 style={{ fontSize: 16 }}>آخرین رویدادها</h3>
|
||||
</div>
|
||||
{recentQ.isLoading ? (
|
||||
<div className="space-y-4">
|
||||
{Array.from({ length: 6 }).map((_, i) => (
|
||||
<div key={i} className="flex gap-3">
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="w-2.5 h-2.5 rounded-full skeleton mt-1 shrink-0" />
|
||||
{i < 5 && <div className="w-px h-8 skeleton mt-1.5" />}
|
||||
</div>
|
||||
<div className="flex-1 pb-4 space-y-1.5">
|
||||
<div className="h-3 rounded skeleton w-3/4" />
|
||||
<div className="h-3 rounded skeleton w-1/2" />
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
|
||||
{Array.from({ length: 5 }).map((_, i) => (
|
||||
<div key={i} style={{ display: 'flex', gap: 13, alignItems: 'flex-start' }}>
|
||||
<div className="skeleton" style={{ width: 9, height: 9, borderRadius: '50%', marginTop: 7, flexShrink: 0 }} />
|
||||
<div style={{ flex: 1 }}>
|
||||
<div className="skeleton" style={{ height: 13, borderRadius: 5, width: '70%', marginBottom: 5 }} />
|
||||
<div className="skeleton" style={{ height: 11, borderRadius: 5, width: '50%' }} />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : !timelineEvents.length ? (
|
||||
<p className="text-center py-8 text-sm text-slate-400 dark:text-slate-500">رویدادی ثبت نشده</p>
|
||||
<p className="muted" style={{ textAlign: 'center', padding: '32px 0', fontSize: 13.5 }}>رویدادی ثبت نشده</p>
|
||||
) : (
|
||||
<div>
|
||||
{timelineEvents.map((ev, i) => (
|
||||
<div key={i} className="flex gap-3">
|
||||
<div className="flex flex-col items-center">
|
||||
<div
|
||||
className="w-2.5 h-2.5 rounded-full shrink-0 mt-1.5 ring-2 ring-white dark:ring-gray-900"
|
||||
style={{ backgroundColor: ev.color }}
|
||||
/>
|
||||
{i < timelineEvents.length - 1 && (
|
||||
<div className="w-px flex-1 bg-slate-200 dark:bg-gray-700 mt-1 mb-1" />
|
||||
)}
|
||||
</div>
|
||||
<div className={`flex-1 min-w-0 ${i < timelineEvents.length - 1 ? 'pb-3.5' : ''}`}>
|
||||
<p className="text-sm font-medium text-slate-800 dark:text-slate-200">{ev.title}</p>
|
||||
{ev.sub && <p className="text-xs text-slate-500 dark:text-slate-400 mt-0.5 truncate">{ev.sub}</p>}
|
||||
<p className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">{formatDateTime(ev.time)}</p>
|
||||
{timelineEvents.map((e, i) => (
|
||||
<div className="timeline-item" key={i}>
|
||||
<span className="tl-dot" style={{ background: e.color }}></span>
|
||||
<div className="tl-body">
|
||||
<b>{e.title}</b>
|
||||
{e.sub && <p>{e.sub}</p>}
|
||||
<time>{formatDateTime(e.time)}</time>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -491,94 +514,11 @@ export default function DashboardPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Section 6: Recent Data ───────────────────────────────── */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
||||
|
||||
{/* Recent appointments */}
|
||||
<div className="cp-card p-5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">آخرین نوبتها</h3>
|
||||
<Link to="/admin/appointments" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">همه</Link>
|
||||
</div>
|
||||
{recentQ.isLoading ? <ListSkeleton /> : !recent?.appointments?.length ? (
|
||||
<p className="text-center py-6 text-sm text-slate-400 dark:text-slate-500">نوبتی ثبت نشده</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{recent.appointments.map((a) => (
|
||||
<li key={a.uuid}>
|
||||
<Link to={`/admin/appointments/${a.uuid}`} className="flex items-start justify-between gap-2 group">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
{a.user_name || a.user_mobile}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 truncate">دکتر {a.doctor_name}</p>
|
||||
<p className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">{formatDateTime(a.slot_start)}</p>
|
||||
</div>
|
||||
<Badge status={a.status} map={APPT} />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Recent payments */}
|
||||
<div className="cp-card p-5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">آخرین پرداختها</h3>
|
||||
<Link to="/admin/payments" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">همه</Link>
|
||||
</div>
|
||||
{recentQ.isLoading ? <ListSkeleton /> : !recent?.payments?.length ? (
|
||||
<p className="text-center py-6 text-sm text-slate-400 dark:text-slate-500">پرداختی ثبت نشده</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{recent.payments.map((p) => (
|
||||
<li key={p.uuid}>
|
||||
<Link to={`/admin/payments/${p.uuid}`} className="flex items-start justify-between gap-2 group">
|
||||
<div className="min-w-0">
|
||||
<p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
{p.user_name || p.user_mobile}
|
||||
</p>
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400">{formatRial(p.amount)}</p>
|
||||
<p className="text-[11px] text-slate-400 dark:text-slate-500 mt-0.5">{formatDateTime(p.created_at)}</p>
|
||||
</div>
|
||||
<Badge status={p.status} map={PAY} />
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Recent users */}
|
||||
<div className="cp-card p-5">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">کاربران جدید</h3>
|
||||
<Link to="/admin/users" className="text-xs text-primary-600 dark:text-primary-400 hover:underline">همه</Link>
|
||||
</div>
|
||||
{recentQ.isLoading ? <ListSkeleton /> : !recent?.users?.length ? (
|
||||
<p className="text-center py-6 text-sm text-slate-400 dark:text-slate-500">کاربری ثبت نشده</p>
|
||||
) : (
|
||||
<ul className="space-y-3">
|
||||
{recent.users.map((u) => (
|
||||
<li key={u.uuid}>
|
||||
<Link to={`/admin/users/${u.uuid}`} className="flex items-center gap-3 group">
|
||||
<div className="w-8 h-8 rounded-full bg-violet-100 dark:bg-violet-400/10 flex items-center justify-center shrink-0">
|
||||
<UserPlusIcon className="w-4 h-4 text-violet-600 dark:text-violet-400" />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium text-slate-800 dark:text-slate-200 truncate group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
{u.name || u.mobile}
|
||||
</p>
|
||||
{u.name && <p className="text-xs text-slate-500 dark:text-slate-400 truncate" dir="ltr">{u.mobile}</p>}
|
||||
<p className="text-[11px] text-slate-400 dark:text-slate-500">{formatDateTime(u.created_at)}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
{/* dash-3: Three MiniLists */}
|
||||
<div className="dash-3">
|
||||
<MiniList title="آخرین نوبتها" to="/admin/appointments" rows={apptRows} loading={recentQ.isLoading} />
|
||||
<MiniList title="آخرین پرداختها" to="/admin/payments" rows={payRows} loading={recentQ.isLoading} />
|
||||
<MiniList title="کاربران جدید" to="/admin/users" rows={userRows} loading={recentQ.isLoading} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@@ -835,7 +835,7 @@ function AddressModal({ open, onClose, existing, doctorUuid, onSaved }: {
|
||||
footer={
|
||||
<>
|
||||
<button type="button" onClick={onClose} className="cp-btn-secondary px-5">لغو</button>
|
||||
<button form="addr-form" type="submit" disabled={saveMut.isPending} className="cp-btn-primary">
|
||||
<button form="addr-form" type="submit" disabled={saveMut.isPending} className="btn primary sm">
|
||||
{saveMut.isPending ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</button>
|
||||
</>
|
||||
@@ -847,7 +847,7 @@ function AddressModal({ open, onClose, existing, doctorUuid, onSaved }: {
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">نام مطب / کلینیک</label>
|
||||
<input type="text" className="cp-input" placeholder="مثال: کلینیک مهر" {...register('name')} />
|
||||
<input type="text" className="input" placeholder="مثال: کلینیک مهر" {...register('name')} />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">تلفن</label>
|
||||
@@ -1364,7 +1364,7 @@ function DateOverrideModal({ open, onClose, existing, doctorUuid, onSaved }: {
|
||||
<>
|
||||
<button type="button" onClick={onClose} className="cp-btn-secondary px-5">لغو</button>
|
||||
<button type="button" onClick={() => saveMut.mutate()} disabled={saveMut.isPending || !dateStr}
|
||||
className="cp-btn-primary">
|
||||
className="btn primary sm">
|
||||
{saveMut.isPending ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</button>
|
||||
</>
|
||||
@@ -1405,7 +1405,7 @@ function DateOverrideModal({ open, onClose, existing, doctorUuid, onSaved }: {
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">دلیل (اختیاری)</label>
|
||||
<input type="text" value={reason} onChange={e => setReason(e.target.value)}
|
||||
placeholder={overrideType === 'closed' ? 'مثال: سفر، مریضی، کنگره...' : 'مثال: شیفت اضطراری، ویزیت خاص...'}
|
||||
className="cp-input" />
|
||||
className="input" />
|
||||
</div>
|
||||
|
||||
{overrideType === 'custom' && (
|
||||
@@ -1555,7 +1555,7 @@ function HolidayModal({ open, onClose, existing, doctorUuid, onSaved }: {
|
||||
<>
|
||||
<button type="button" onClick={onClose} className="cp-btn-secondary px-5">لغو</button>
|
||||
<button type="button" onClick={() => saveMut.mutate()} disabled={saveMut.isPending || invalid}
|
||||
className="cp-btn-primary">
|
||||
className="btn primary sm">
|
||||
{saveMut.isPending ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</button>
|
||||
</>
|
||||
@@ -1578,7 +1578,7 @@ function HolidayModal({ open, onClose, existing, doctorUuid, onSaved }: {
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">دلیل (اختیاری)</label>
|
||||
<input type="text" value={reason} onChange={e => setReason(e.target.value)}
|
||||
placeholder="مثال: سفر، کنگره پزشکی..." className="cp-input" />
|
||||
placeholder="مثال: سفر، کنگره پزشکی..." className="input" />
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
@@ -2174,7 +2174,7 @@ export default function DoctorDetailPage() {
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => setEditOpen(false)} className="cp-btn-secondary px-5">لغو</button>
|
||||
<button form="edit-doctor-form" type="submit" disabled={updateMut.isPending} className="cp-btn-primary">
|
||||
<button form="edit-doctor-form" type="submit" disabled={updateMut.isPending} className="btn primary sm">
|
||||
{updateMut.isPending ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
|
||||
</button>
|
||||
</>
|
||||
@@ -2185,7 +2185,7 @@ export default function DoctorDetailPage() {
|
||||
<p className="text-xs font-semibold text-slate-400 uppercase tracking-wide">اطلاعات پایه</p>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5">نام کامل *</label>
|
||||
<input type="text" className="cp-input" {...register('name')} />
|
||||
<input type="text" className="input" {...register('name')} />
|
||||
</div>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<div>
|
||||
|
||||
+257
-645
File diff suppressed because it is too large
Load Diff
@@ -3,9 +3,8 @@ import { useForm } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
import { toast } from 'sonner';
|
||||
import { EyeIcon, EyeSlashIcon, HeartIcon, SunIcon, MoonIcon } from '@heroicons/react/24/outline';
|
||||
import { EyeIcon, EyeSlashIcon } from '@heroicons/react/24/outline';
|
||||
import { useAuthStore } from '../stores/authStore';
|
||||
import { useUiStore } from '../stores/uiStore';
|
||||
|
||||
const schema = z.object({
|
||||
mobile: z.string().min(10, 'شماره موبایل معتبر نیست'),
|
||||
@@ -16,18 +15,12 @@ type FormData = z.infer<typeof schema>;
|
||||
|
||||
export default function LoginPage() {
|
||||
const login = useAuthStore((s) => s.login);
|
||||
const darkMode = useUiStore((s) => s.darkMode);
|
||||
const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
|
||||
const [showPass, setShowPass] = useState(false);
|
||||
|
||||
const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>({
|
||||
resolver: zodResolver(schema),
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
document.documentElement.classList.toggle('dark', darkMode);
|
||||
}, [darkMode]);
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
try {
|
||||
const res = await fetch('/api/v1/user/login', {
|
||||
@@ -51,140 +44,81 @@ export default function LoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex bg-slate-50 dark:bg-gray-950 transition-colors duration-200">
|
||||
|
||||
{/* ── Left panel: branding ───────────────── */}
|
||||
<div className="hidden lg:flex flex-col flex-1 relative overflow-hidden bg-[#100c22]">
|
||||
{/* Gradient orbs */}
|
||||
<div className="absolute top-1/4 right-1/4 w-72 h-72 bg-violet-600/30 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-1/4 left-1/4 w-96 h-96 bg-purple-800/20 rounded-full blur-3xl" />
|
||||
|
||||
<div className="relative z-10 flex flex-col h-full p-12">
|
||||
{/* Logo */}
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-lg shadow-violet-900/50">
|
||||
<HeartIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<span className="text-white font-bold text-xl tracking-tight">ClinicPro</span>
|
||||
<div style={{
|
||||
minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
background: 'var(--bg)', padding: 20,
|
||||
}}>
|
||||
<div className="card card-pad" style={{ width: '100%', maxWidth: 420 }}>
|
||||
{/* Logo */}
|
||||
<div style={{ textAlign: 'center', marginBottom: 28 }}>
|
||||
<div className="brand-logo" style={{
|
||||
margin: '0 auto 16px', width: 54, height: 54, borderRadius: 16,
|
||||
fontSize: 26,
|
||||
}}>
|
||||
♥
|
||||
</div>
|
||||
|
||||
{/* Center content */}
|
||||
<div className="flex-1 flex flex-col items-center justify-center text-center px-8">
|
||||
<div className="w-20 h-20 rounded-3xl bg-gradient-to-br from-violet-500/20 to-purple-700/20 border border-violet-500/20 flex items-center justify-center mb-8">
|
||||
<HeartIcon className="w-10 h-10 text-violet-400" />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-white mb-4 leading-snug">
|
||||
سیستم مدیریت<br />کلینیک هوشمند
|
||||
</h2>
|
||||
<p className="text-slate-400 text-base leading-relaxed max-w-sm">
|
||||
مدیریت نوبتدهی، پزشکان، کلینیکها و پرداختها در یک پنل یکپارچه
|
||||
</p>
|
||||
|
||||
{/* Feature pills */}
|
||||
<div className="flex flex-wrap justify-center gap-2 mt-8">
|
||||
{['نوبتدهی آنلاین', 'مدیریت پزشکان', 'گزارشگیری', 'پرداخت امن'].map((f) => (
|
||||
<span key={f} className="px-3 py-1.5 rounded-full text-xs font-medium bg-white/5 text-slate-300 border border-white/10">
|
||||
{f}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom note */}
|
||||
<p className="text-slate-600 text-xs text-center">نسخه ۱.۰.۰ — تمامی حقوق محفوظ است</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* ── Right panel: form ──────────────────── */}
|
||||
<div className="flex flex-col w-full lg:w-[480px] shrink-0 relative">
|
||||
{/* Dark mode toggle */}
|
||||
<div className="absolute top-5 left-5">
|
||||
<button
|
||||
onClick={toggleDarkMode}
|
||||
className="w-9 h-9 flex items-center justify-center rounded-xl bg-slate-200/70 dark:bg-gray-800 hover:bg-slate-300 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 transition-colors"
|
||||
title={darkMode ? 'حالت روشن' : 'حالت تاریک'}
|
||||
>
|
||||
{darkMode
|
||||
? <SunIcon className="w-5 h-5 text-amber-400" />
|
||||
: <MoonIcon className="w-5 h-5" />}
|
||||
</button>
|
||||
<h1 style={{ fontSize: 22, fontWeight: 800, marginBottom: 6 }}>ورود به پنل ادمین</h1>
|
||||
<p className="muted" style={{ fontSize: 13 }}>اطلاعات حساب مدیریتی خود را وارد کنید</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col flex-1 items-center justify-center px-8 sm:px-12 py-12">
|
||||
{/* Mobile logo */}
|
||||
<div className="lg:hidden flex items-center gap-3 mb-10">
|
||||
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-violet-500 to-purple-700 flex items-center justify-center shadow-md">
|
||||
<HeartIcon className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
<span className="text-slate-900 dark:text-white font-bold text-xl">ClinicPro</span>
|
||||
<form onSubmit={handleSubmit(onSubmit)} noValidate>
|
||||
{/* Mobile */}
|
||||
<div className="form-row">
|
||||
<label>شماره موبایل</label>
|
||||
<input
|
||||
{...register('mobile')}
|
||||
className={`input${errors.mobile ? ' err' : ''}`}
|
||||
type="tel"
|
||||
dir="ltr"
|
||||
placeholder="09xxxxxxxxx"
|
||||
autoComplete="username"
|
||||
style={{ textAlign: 'right' }}
|
||||
/>
|
||||
{errors.mobile && <div className="err-text">{errors.mobile.message}</div>}
|
||||
</div>
|
||||
|
||||
<div className="w-full max-w-sm">
|
||||
<div className="mb-8">
|
||||
<h1 className="text-2xl font-bold text-slate-900 dark:text-slate-50">ورود به پنل</h1>
|
||||
<p className="text-slate-500 dark:text-slate-400 text-sm mt-1.5">اطلاعات حساب مدیریتی خود را وارد کنید</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5" noValidate>
|
||||
{/* Mobile number */}
|
||||
<div>
|
||||
<label className="cp-label">شماره موبایل</label>
|
||||
<input
|
||||
{...register('mobile')}
|
||||
type="tel"
|
||||
dir="ltr"
|
||||
placeholder="09xxxxxxxxx"
|
||||
autoComplete="username"
|
||||
className={`cp-input text-left placeholder:text-right placeholder:dir-rtl ${errors.mobile ? 'border-red-400 dark:border-red-500 focus:ring-red-400/30' : ''}`}
|
||||
/>
|
||||
{errors.mobile && (
|
||||
<p className="text-red-500 dark:text-red-400 text-xs mt-1.5">{errors.mobile.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Password */}
|
||||
<div>
|
||||
<label className="cp-label">رمز عبور</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
{...register('password')}
|
||||
type={showPass ? 'text' : 'password'}
|
||||
placeholder="••••••••"
|
||||
autoComplete="current-password"
|
||||
className={`cp-input pl-10 ${errors.password ? 'border-red-400 dark:border-red-500 focus:ring-red-400/30' : ''}`}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPass((v) => !v)}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 transition-colors"
|
||||
>
|
||||
{showPass ? <EyeSlashIcon className="w-4 h-4" /> : <EyeIcon className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
{errors.password && (
|
||||
<p className="text-red-500 dark:text-red-400 text-xs mt-1.5">{errors.password.message}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Submit */}
|
||||
{/* Password */}
|
||||
<div className="form-row">
|
||||
<label>رمز عبور</label>
|
||||
<div style={{ position: 'relative' }}>
|
||||
<input
|
||||
{...register('password')}
|
||||
className={`input${errors.password ? ' err' : ''}`}
|
||||
type={showPass ? 'text' : 'password'}
|
||||
placeholder="••••••••"
|
||||
autoComplete="current-password"
|
||||
style={{ paddingLeft: 44 }}
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full h-11 bg-primary-600 hover:bg-primary-700 active:bg-primary-800 disabled:opacity-60 text-white font-semibold rounded-xl transition-all duration-150 shadow-md shadow-primary-500/25 hover:shadow-lg hover:shadow-primary-500/30 mt-2"
|
||||
type="button"
|
||||
onClick={() => setShowPass((v) => !v)}
|
||||
style={{
|
||||
position: 'absolute', left: 12, top: '50%', transform: 'translateY(-50%)',
|
||||
color: 'var(--text-3)', background: 'none', border: 'none', cursor: 'pointer',
|
||||
display: 'flex', alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<span className="flex items-center justify-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>
|
||||
) : 'ورود به سیستم'}
|
||||
{showPass
|
||||
? <EyeSlashIcon style={{ width: 18, height: 18 }} />
|
||||
: <EyeIcon style={{ width: 18, height: 18 }} />}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{errors.password && <div className="err-text">{errors.password.message}</div>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="btn primary block"
|
||||
disabled={isSubmitting}
|
||||
style={{ marginTop: 8, height: 46, fontSize: 15 }}
|
||||
>
|
||||
{isSubmitting ? 'در حال ورود...' : 'ورود به سیستم'}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<p className="muted" style={{ textAlign: 'center', fontSize: 12, marginTop: 20 }}>
|
||||
ClinicPro — نسخه ۱.۰.۰
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { EyeIcon } from '@heroicons/react/24/outline';
|
||||
import {
|
||||
MagnifyingGlassIcon, EyeIcon,
|
||||
BanknotesIcon, ClockIcon, CreditCardIcon, ArrowDownTrayIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { api } from '../lib/api';
|
||||
import type { PaginatedResponse } from '../lib/api';
|
||||
import type { Payment } from '../types';
|
||||
import { formatDate, formatRial, maskMobile } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import StatusBadge from '../components/ui/StatusBadge';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
@@ -39,13 +41,22 @@ export default function PaymentsPage() {
|
||||
const columns: Column<Payment>[] = [
|
||||
{
|
||||
key: 'patient_mobile',
|
||||
header: 'موبایل',
|
||||
render: (p) => <span dir="ltr">{maskMobile(p.patient_mobile)}</span>,
|
||||
header: 'بیمار',
|
||||
render: (p) => (
|
||||
<div className="cell-user">
|
||||
<div className="avatar sm" style={{
|
||||
background: `linear-gradient(145deg, oklch(0.62 0.15 162), oklch(0.48 0.16 162))`,
|
||||
}}>
|
||||
{maskMobile(p.patient_mobile).slice(0, 2)}
|
||||
</div>
|
||||
<span dir="ltr">{maskMobile(p.patient_mobile)}</span>
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'amount',
|
||||
header: 'مبلغ',
|
||||
render: (p) => <span className="font-medium">{formatRial(p.amount)}</span>,
|
||||
render: (p) => <><b>{formatRial(p.amount)}</b> <span className="muted" style={{ fontSize: 11 }}>تومان</span></>,
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
@@ -55,65 +66,106 @@ export default function PaymentsPage() {
|
||||
{
|
||||
key: 'gateway',
|
||||
header: 'درگاه',
|
||||
render: (p) => (
|
||||
<span className="text-xs bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-200 px-2 py-0.5 rounded-full uppercase">
|
||||
{p.gateway}
|
||||
</span>
|
||||
),
|
||||
render: (p) => <span className="chip" style={{ fontSize: 12 }}>{p.gateway}</span>,
|
||||
},
|
||||
{
|
||||
key: 'ref_id',
|
||||
header: 'شماره مرجع',
|
||||
render: (p) => p.ref_id ? <span dir="ltr" className="font-mono text-xs">{p.ref_id}</span> : '—',
|
||||
render: (p) => p.ref_id
|
||||
? <span dir="ltr" style={{ fontFamily: 'monospace', fontSize: 12.5, color: 'var(--text-2)' }}>{p.ref_id}</span>
|
||||
: <span className="muted">—</span>,
|
||||
},
|
||||
{
|
||||
key: 'paid_at',
|
||||
header: 'تاریخ پرداخت',
|
||||
render: (p) => formatDate(p.paid_at),
|
||||
render: (p) => <span className="muted">{formatDate(p.paid_at)}</span>,
|
||||
},
|
||||
{
|
||||
key: 'created_at',
|
||||
header: 'تاریخ ثبت',
|
||||
render: (p) => formatDate(p.created_at),
|
||||
render: (p) => <span className="muted">{formatDate(p.created_at)}</span>,
|
||||
},
|
||||
];
|
||||
|
||||
const items = data?.data ?? [];
|
||||
const total = data?.meta?.totalRecords ?? 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="پرداختها"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پرداختها' }]}
|
||||
/>
|
||||
const statCards = [
|
||||
{ label: 'کل تراکنشها', value: total > 0 ? String(total) : null, bg: 'var(--primary-soft)', color: 'var(--primary)', Icon: CreditCardIcon },
|
||||
{ label: 'تأییدشده', value: null, bg: 'var(--success-bg)', color: 'var(--success)', Icon: BanknotesIcon },
|
||||
{ label: 'در انتظار', value: null, bg: 'var(--warning-bg)', color: 'var(--warning)', Icon: ClockIcon },
|
||||
{ label: 'استرداد شده', value: null, bg: 'var(--info-bg)', color: 'var(--info)', Icon: ArrowDownTrayIcon },
|
||||
];
|
||||
|
||||
<div className="cp-card p-6">
|
||||
<div className="flex items-center gap-3 mb-4 flex-wrap">
|
||||
{STATUS_FILTERS.map((f) => (
|
||||
<button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
|
||||
statusFilter === f.value
|
||||
? 'bg-primary-600 text-white'
|
||||
: 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
|
||||
}`}>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
return (
|
||||
<div className="fade-in">
|
||||
{/* Header */}
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">پرداختها</h1>
|
||||
<div className="muted" style={{ fontSize: 13, marginTop: 3 }}>مدیریت تراکنشهای مالی</div>
|
||||
</div>
|
||||
<button className="btn ghost sm">
|
||||
<ArrowDownTrayIcon style={{ width: 15, height: 15 }} />
|
||||
خروجی اکسل
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Stat cards */}
|
||||
<div className="stat-grid" style={{ gridTemplateColumns: 'repeat(4,1fr)' }}>
|
||||
{statCards.map((c) => (
|
||||
<div key={c.label} className="stat">
|
||||
<div className="ico" style={{ background: c.bg, color: c.color }}>
|
||||
<c.Icon style={{ width: 20, height: 20 }} />
|
||||
</div>
|
||||
<div className="lbl">{c.label}</div>
|
||||
<div className="val">
|
||||
{isLoading
|
||||
? <span className="skeleton" style={{ display: 'inline-block', width: 48, height: 26, borderRadius: 4 }} />
|
||||
: c.value ?? '—'}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Main card */}
|
||||
<div className="card">
|
||||
<div className="card-pad" style={{ paddingBottom: 0 }}>
|
||||
<div className="toolbar">
|
||||
<div className="field" style={{ minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
|
||||
<input
|
||||
placeholder="جستجو بر اساس موبایل یا شماره مرجع..."
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
/>
|
||||
</div>
|
||||
<div className="seg">
|
||||
{STATUS_FILTERS.map((f) => (
|
||||
<button
|
||||
key={f.value}
|
||||
className={statusFilter === f.value ? 'on' : ''}
|
||||
onClick={() => { setStatusFilter(f.value); setPage(1); }}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataTable<Payment>
|
||||
columns={columns}
|
||||
data={items}
|
||||
loading={isLoading}
|
||||
searchValue={search}
|
||||
onSearchChange={(v) => { setSearch(v); setPage(1); }}
|
||||
searchPlaceholder="جستجو بر اساس موبایل یا شماره مرجع..."
|
||||
emptyMessage="هیچ پرداختی یافت نشد"
|
||||
actions={(payment) => (
|
||||
<button onClick={() => navigate(`/admin/payments/${payment.uuid}`)}
|
||||
className="cp-action-view" title="مشاهده">
|
||||
<EyeIcon className="w-4 h-4" />
|
||||
<button
|
||||
className="mini-btn"
|
||||
onClick={() => navigate(`/admin/payments/${payment.uuid}`)}
|
||||
title="مشاهده"
|
||||
>
|
||||
<EyeIcon style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -1,26 +1,25 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { TrashIcon, StarIcon } from '@heroicons/react/24/outline';
|
||||
import { TrashIcon, StarIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
import { StarIcon as StarSolid } from '@heroicons/react/24/solid';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse, PaginatedResponse } from '../lib/api';
|
||||
import type { Rating } from '../types';
|
||||
import { formatDate } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
|
||||
function Stars({ value }: { value: number }) {
|
||||
return (
|
||||
<div className="flex items-center gap-0.5">
|
||||
{[1, 2, 3, 4, 5].map((i) => (
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 2 }}>
|
||||
{[1, 2, 3, 4, 5].map((i) =>
|
||||
i <= value
|
||||
? <StarSolid key={i} className="w-3.5 h-3.5 text-yellow-400" />
|
||||
: <StarIcon key={i} className="w-3.5 h-3.5 text-gray-300" />
|
||||
))}
|
||||
<span className="text-xs text-gray-500 mr-1">{value}</span>
|
||||
? <StarSolid key={i} style={{ width: 14, height: 14, color: 'oklch(0.78 0.18 85)' }} />
|
||||
: <StarIcon key={i} style={{ width: 14, height: 14, color: 'var(--border)' }} />
|
||||
)}
|
||||
<span className="muted" style={{ fontSize: 12, marginRight: 4 }}>{value}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -52,21 +51,17 @@ export default function RatingsPage() {
|
||||
});
|
||||
|
||||
const columns: Column<Rating>[] = [
|
||||
{ key: 'patient_name', header: 'بیمار', render: (r) => <span className="font-medium">{r.patient_name}</span> },
|
||||
{ key: 'patient_name', header: 'بیمار', render: (r) => <b>{r.patient_name}</b> },
|
||||
{ key: 'doctor_name', header: 'پزشک', render: (r) => `دکتر ${r.doctor_name}` },
|
||||
{
|
||||
key: 'overall',
|
||||
header: 'کلی',
|
||||
render: (r) => <Stars value={r.overall} />,
|
||||
},
|
||||
{ key: 'overall', header: 'کلی', render: (r) => <Stars value={r.overall} /> },
|
||||
{
|
||||
key: 'ratings_detail',
|
||||
header: 'جزئیات امتیاز',
|
||||
header: 'جزئیات',
|
||||
render: (r) => (
|
||||
<div className="grid grid-cols-2 gap-x-4 gap-y-1 text-xs text-slate-500 dark:text-slate-400 min-w-[160px]">
|
||||
<span>تشخیص:</span><Stars value={r.diagnosis_accuracy} />
|
||||
<span>مهارت:</span><Stars value={r.skill} />
|
||||
<span>رفتار:</span><Stars value={r.behavior} />
|
||||
<div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '2px 12px', fontSize: 12 }}>
|
||||
<span className="muted">تشخیص:</span><Stars value={r.diagnosis_accuracy} />
|
||||
<span className="muted">مهارت:</span><Stars value={r.skill} />
|
||||
<span className="muted">رفتار:</span><Stars value={r.behavior} />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
@@ -77,25 +72,36 @@ export default function RatingsPage() {
|
||||
const total = data?.meta?.totalRecords ?? 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="امتیازها"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'امتیازها' }]}
|
||||
/>
|
||||
<div className="fade-in">
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">امتیازها</h1>
|
||||
<div className="muted">{total} امتیاز ثبتشده</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="cp-card p-6">
|
||||
<div className="card">
|
||||
<div className="card-pad" style={{ paddingBottom: 0 }}>
|
||||
<div className="toolbar">
|
||||
<div className="field" style={{ minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
placeholder="جستجو بر اساس نام پزشک..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DataTable<Rating>
|
||||
columns={columns}
|
||||
data={items}
|
||||
loading={isLoading}
|
||||
searchValue={search}
|
||||
onSearchChange={(v) => { setSearch(v); setPage(1); }}
|
||||
searchPlaceholder="جستجو بر اساس نام پزشک..."
|
||||
emptyMessage="هیچ امتیازی یافت نشد"
|
||||
actions={(rating) => (
|
||||
<button onClick={() => setDeleteTarget(rating)}
|
||||
className="cp-action-delete" title="حذف">
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
className="mini-btn danger" title="حذف">
|
||||
<TrashIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
)}
|
||||
/>
|
||||
|
||||
@@ -219,7 +219,7 @@ export default function RepresentationDetailPage() {
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => setEditOpen(false)}
|
||||
className="cp-btn-secondary">
|
||||
className="btn ghost sm">
|
||||
لغو
|
||||
</button>
|
||||
<button
|
||||
@@ -230,7 +230,7 @@ export default function RepresentationDetailPage() {
|
||||
commission_percent: parseFloat(formData.commission_percent) || rep.commission_percent,
|
||||
} as any)}
|
||||
disabled={updateMutation.isPending}
|
||||
className="cp-btn-primary">
|
||||
className="btn primary sm">
|
||||
{updateMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</button>
|
||||
</>
|
||||
@@ -238,12 +238,12 @@ export default function RepresentationDetailPage() {
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="cp-label">نام کامل</label>
|
||||
<label className="">نام کامل</label>
|
||||
<input value={formData.full_name} onChange={(e) => setFormData((p) => ({ ...p, full_name: e.target.value }))}
|
||||
className="cp-input h-11" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">شهر</label>
|
||||
<label className="">شهر</label>
|
||||
<select
|
||||
value={formData.city_id}
|
||||
onChange={(e) => setFormData((p) => ({ ...p, city_id: e.target.value }))}
|
||||
@@ -256,12 +256,12 @@ export default function RepresentationDetailPage() {
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">موبایل</label>
|
||||
<label className="">موبایل</label>
|
||||
<input value={formData.mobile_number} onChange={(e) => setFormData((p) => ({ ...p, mobile_number: e.target.value }))}
|
||||
dir="ltr" className="cp-input h-11" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">درصد کمیسیون</label>
|
||||
<label className="">درصد کمیسیون</label>
|
||||
<input value={formData.commission_percent} onChange={(e) => setFormData((p) => ({ ...p, commission_percent: e.target.value }))}
|
||||
type="number" min="0" max="100" dir="ltr"
|
||||
className="cp-input h-11" />
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { EyeIcon, TrashIcon, PlusIcon } from '@heroicons/react/24/outline';
|
||||
import { EyeIcon, TrashIcon, PlusIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { zodResolver } from '@hookform/resolvers/zod';
|
||||
import { z } from 'zod';
|
||||
@@ -10,7 +10,6 @@ import { api } from '../lib/api';
|
||||
import type { ApiResponse, PaginatedResponse } from '../lib/api';
|
||||
import type { Representation, City } from '../types';
|
||||
import { formatDate, formatRial, formatNumber } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import { ActiveBadge } from '../components/ui/StatusBadge';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
@@ -36,7 +35,6 @@ export default function RepresentationsPage() {
|
||||
const [deleteTarget, setDeleteTarget] = useState<Representation | null>(null);
|
||||
const limit = 15;
|
||||
|
||||
// Load city list for filter and form
|
||||
const citiesQuery = useQuery({
|
||||
queryKey: ['cities-select'],
|
||||
queryFn: () => api.get<PaginatedResponse<City>>('/api/v1/admin/cities?limit=200'),
|
||||
@@ -88,19 +86,11 @@ export default function RepresentationsPage() {
|
||||
});
|
||||
|
||||
const columns: Column<Representation>[] = [
|
||||
{ key: 'full_name', header: 'نام', render: (r) => <span className="font-medium">{r.full_name}</span> },
|
||||
{ key: 'full_name', header: 'نام', render: (r) => <b>{r.full_name}</b> },
|
||||
{ key: 'mobile_number', header: 'موبایل', render: (r) => <span dir="ltr">{r.mobile_number ?? '—'}</span> },
|
||||
{ key: 'city', header: 'شهر', render: (r) => r.city ?? '—' },
|
||||
{
|
||||
key: 'commission_percent',
|
||||
header: 'کمیسیون',
|
||||
render: (r) => `${formatNumber(r.commission_percent)}٪`,
|
||||
},
|
||||
{
|
||||
key: 'wallet_balance',
|
||||
header: 'موجودی کیفپول',
|
||||
render: (r) => formatRial(r.wallet_balance ?? 0),
|
||||
},
|
||||
{ key: 'commission_percent', header: 'کمیسیون', render: (r) => `${formatNumber(r.commission_percent)}٪` },
|
||||
{ key: 'wallet_balance', header: 'موجودی کیفپول', render: (r) => formatRial(r.wallet_balance ?? 0) },
|
||||
{ key: 'is_active', header: 'وضعیت', render: (r) => <ActiveBadge active={r.is_active ?? r.active ?? false} /> },
|
||||
{ key: 'created_at', header: 'تاریخ ثبت', render: (r) => formatDate(r.created_at) },
|
||||
];
|
||||
@@ -109,59 +99,56 @@ export default function RepresentationsPage() {
|
||||
const total = data?.meta?.totalRecords ?? 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="نمایندگان"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نمایندگان' }]}
|
||||
action={
|
||||
<button onClick={() => setAddOpen(true)} className="cp-btn-primary">
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
افزودن نماینده
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="cp-card p-6">
|
||||
{/* City filter */}
|
||||
<div className="mb-4 flex items-center gap-3">
|
||||
<div className="min-w-[220px]">
|
||||
<SearchableSelect
|
||||
options={cityOptions}
|
||||
value={cityFilter}
|
||||
onChange={(val) => { setCityFilter(val as number | null); setPage(1); }}
|
||||
placeholder="فیلتر بر اساس شهر..."
|
||||
isClearable
|
||||
isLoading={citiesQuery.isLoading}
|
||||
noOptionsMessage="هیچ شهری یافت نشد"
|
||||
/>
|
||||
</div>
|
||||
{cityFilter !== null && (
|
||||
<button
|
||||
onClick={() => { setCityFilter(null); setPage(1); }}
|
||||
className="text-xs text-gray-400 hover:text-gray-600 transition-colors"
|
||||
>
|
||||
پاک کردن فیلتر
|
||||
</button>
|
||||
)}
|
||||
<div className="fade-in">
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">نمایندگان</h1>
|
||||
<div className="muted">{total} نماینده ثبتشده</div>
|
||||
</div>
|
||||
<button onClick={() => setAddOpen(true)} className="btn primary sm">
|
||||
<PlusIcon style={{ width: 16, height: 16 }} />
|
||||
افزودن نماینده
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="card-pad" style={{ paddingBottom: 0 }}>
|
||||
<div className="toolbar">
|
||||
<div className="field" style={{ minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
placeholder="جستجو بر اساس نام یا موبایل..."
|
||||
/>
|
||||
</div>
|
||||
<div style={{ minWidth: 200 }}>
|
||||
<SearchableSelect
|
||||
options={cityOptions}
|
||||
value={cityFilter}
|
||||
onChange={(val) => { setCityFilter(val as number | null); setPage(1); }}
|
||||
placeholder="فیلتر شهر..."
|
||||
isClearable
|
||||
isLoading={citiesQuery.isLoading}
|
||||
noOptionsMessage="هیچ شهری یافت نشد"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DataTable<Representation>
|
||||
columns={columns}
|
||||
data={items}
|
||||
loading={isLoading}
|
||||
searchValue={search}
|
||||
onSearchChange={(v) => { setSearch(v); setPage(1); }}
|
||||
searchPlaceholder="جستجو بر اساس نام یا موبایل..."
|
||||
emptyMessage="هیچ نمایندهای یافت نشد"
|
||||
actions={(rep) => (
|
||||
<>
|
||||
<button onClick={() => navigate(`/admin/representations/${rep.uuid}`)}
|
||||
className="cp-action-view" title="مشاهده">
|
||||
<EyeIcon className="w-4 h-4" />
|
||||
className="mini-btn" title="مشاهده">
|
||||
<EyeIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
<button onClick={() => setDeleteTarget(rep)}
|
||||
className="cp-action-delete" title="حذف">
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
className="mini-btn danger" title="حذف">
|
||||
<TrashIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
@@ -172,28 +159,26 @@ export default function RepresentationsPage() {
|
||||
<Modal open={addOpen} title="افزودن نماینده" onClose={() => { setAddOpen(false); reset(); }}
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => { setAddOpen(false); reset(); }} className="cp-btn-secondary">
|
||||
لغو
|
||||
</button>
|
||||
<button form="add-rep-form" type="submit" disabled={isSubmitting} className="cp-btn-primary">
|
||||
<button onClick={() => { setAddOpen(false); reset(); }} className="btn ghost sm">لغو</button>
|
||||
<button form="add-rep-form" type="submit" disabled={isSubmitting} className="btn primary sm">
|
||||
{isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
|
||||
<div>
|
||||
<label className="cp-label">نام کامل</label>
|
||||
<input {...register('full_name')} placeholder="علی محمدی" className="cp-input h-11" />
|
||||
{errors.full_name && <p className="text-red-500 text-xs mt-1">{errors.full_name.message}</p>}
|
||||
<form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))}>
|
||||
<div className="form-row">
|
||||
<label>نام کامل</label>
|
||||
<input {...register('full_name')} placeholder="علی محمدی" className="input" />
|
||||
{errors.full_name && <p className="err-text">{errors.full_name.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">شماره موبایل</label>
|
||||
<input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx" className="cp-input h-11" />
|
||||
{errors.mobile_number && <p className="text-red-500 text-xs mt-1">{errors.mobile_number.message}</p>}
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>شماره موبایل</label>
|
||||
<input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx" className="input" />
|
||||
{errors.mobile_number && <p className="err-text">{errors.mobile_number.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">شهر</label>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>شهر</label>
|
||||
<Controller
|
||||
name="city_id"
|
||||
control={control}
|
||||
@@ -210,11 +195,11 @@ export default function RepresentationsPage() {
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">درصد کمیسیون</label>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>درصد کمیسیون</label>
|
||||
<input {...register('commission_percent')} type="number" min="0" max="100" placeholder="10" dir="ltr"
|
||||
className="cp-input h-11" />
|
||||
{errors.commission_percent && <p className="text-red-500 text-xs mt-1">{errors.commission_percent.message}</p>}
|
||||
className="input" />
|
||||
{errors.commission_percent && <p className="err-text">{errors.commission_percent.message}</p>}
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { TrashIcon, PencilIcon } from '@heroicons/react/24/outline';
|
||||
import { useForm, Controller } from 'react-hook-form';
|
||||
import { TrashIcon, PencilIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse, PaginatedResponse } from '../lib/api';
|
||||
import type { Secretary, SecretaryPermissions } from '../types';
|
||||
import { formatDate, maskMobile } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import { ActiveBadge } from '../components/ui/StatusBadge';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
@@ -22,7 +20,6 @@ const DEFAULT_PERMISSIONS: SecretaryPermissions = {
|
||||
};
|
||||
|
||||
type PermSection = keyof SecretaryPermissions;
|
||||
type PermAction = string;
|
||||
|
||||
const PERMISSION_LABELS: Record<PermSection, { label: string; actions: { key: string; label: string }[] }> = {
|
||||
appointments: {
|
||||
@@ -76,14 +73,17 @@ function PermissionsMatrix({
|
||||
});
|
||||
};
|
||||
|
||||
const allActions = ['view', 'create', 'update', 'delete', 'cancel', 'update_status'];
|
||||
const actionHeaders = ['مشاهده', 'ایجاد', 'ویرایش', 'حذف', 'لغو', 'تغییر وضعیت'];
|
||||
|
||||
return (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<div style={{ overflowX: 'auto' }}>
|
||||
<table className="t">
|
||||
<thead>
|
||||
<tr className="text-right">
|
||||
<th className="pb-2 text-gray-500 font-medium">بخش</th>
|
||||
{['مشاهده', 'ایجاد', 'ویرایش', 'حذف', 'لغو', 'تغییر وضعیت'].map((h) => (
|
||||
<th key={h} className="pb-2 text-gray-500 font-medium text-center text-xs">{h}</th>
|
||||
<tr>
|
||||
<th>بخش</th>
|
||||
{actionHeaders.map((h) => (
|
||||
<th key={h} style={{ textAlign: 'center', fontSize: 12 }}>{h}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
@@ -91,22 +91,21 @@ function PermissionsMatrix({
|
||||
{(Object.keys(PERMISSION_LABELS) as PermSection[]).map((section) => {
|
||||
const config = PERMISSION_LABELS[section];
|
||||
const sectionPerms = permissions[section] as Record<string, boolean>;
|
||||
const allActions = ['view', 'create', 'update', 'delete', 'cancel', 'update_status'];
|
||||
return (
|
||||
<tr key={section} className="border-t border-gray-100">
|
||||
<td className="py-3 pr-0 text-slate-700 dark:text-slate-300 font-medium">{config.label}</td>
|
||||
<tr key={section}>
|
||||
<td><b>{config.label}</b></td>
|
||||
{allActions.map((action) => {
|
||||
const actionConfig = config.actions.find((a) => a.key === action);
|
||||
if (!actionConfig) {
|
||||
return <td key={action} className="text-center text-gray-200">—</td>;
|
||||
return <td key={action} style={{ textAlign: 'center', color: 'var(--border)' }}>—</td>;
|
||||
}
|
||||
return (
|
||||
<td key={action} className="text-center py-3">
|
||||
<td key={action} style={{ textAlign: 'center' }}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={sectionPerms[action] ?? false}
|
||||
onChange={() => toggle(section, action)}
|
||||
className="w-4 h-4 accent-primary-600 cursor-pointer"
|
||||
style={{ width: 16, height: 16, accentColor: 'var(--primary)', cursor: 'pointer' }}
|
||||
/>
|
||||
</td>
|
||||
);
|
||||
@@ -165,16 +164,8 @@ export default function SecretariesPage() {
|
||||
};
|
||||
|
||||
const columns: Column<Secretary>[] = [
|
||||
{
|
||||
key: 'user_name',
|
||||
header: 'نام',
|
||||
render: (s) => <span className="font-medium text-slate-800 dark:text-slate-100">{s.user_name}</span>,
|
||||
},
|
||||
{
|
||||
key: 'mobile_number',
|
||||
header: 'موبایل',
|
||||
render: (s) => <span dir="ltr">{maskMobile(s.mobile_number)}</span>,
|
||||
},
|
||||
{ key: 'user_name', header: 'نام', render: (s) => <b>{s.user_name}</b> },
|
||||
{ key: 'mobile_number', header: 'موبایل', render: (s) => <span dir="ltr">{maskMobile(s.mobile_number)}</span> },
|
||||
{ key: 'doctor_name', header: 'پزشک', render: (s) => `دکتر ${s.doctor_name}` },
|
||||
{ key: 'is_active', header: 'وضعیت', render: (s) => <ActiveBadge active={s.is_active} /> },
|
||||
{ key: 'created_at', header: 'تاریخ ثبت', render: (s) => formatDate(s.created_at) },
|
||||
@@ -184,30 +175,39 @@ export default function SecretariesPage() {
|
||||
const total = data?.meta?.totalRecords ?? 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="منشیها"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'منشیها' }]}
|
||||
/>
|
||||
<div className="fade-in">
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">منشیها</h1>
|
||||
<div className="muted">{total} منشی ثبتشده</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="cp-card p-6">
|
||||
<div className="card">
|
||||
<div className="card-pad" style={{ paddingBottom: 0 }}>
|
||||
<div className="toolbar">
|
||||
<div className="field" style={{ minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
placeholder="جستجو بر اساس نام یا پزشک..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DataTable<Secretary>
|
||||
columns={columns}
|
||||
data={items}
|
||||
loading={isLoading}
|
||||
searchValue={search}
|
||||
onSearchChange={(v) => { setSearch(v); setPage(1); }}
|
||||
searchPlaceholder="جستجو بر اساس نام یا پزشک..."
|
||||
emptyMessage="هیچ منشیای یافت نشد"
|
||||
actions={(sec) => (
|
||||
<>
|
||||
<button onClick={() => openEdit(sec)}
|
||||
className="cp-action-edit" title="ویرایش دسترسیها">
|
||||
<PencilIcon className="w-4 h-4" />
|
||||
<button onClick={() => openEdit(sec)} className="mini-btn" title="ویرایش دسترسیها">
|
||||
<PencilIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
<button onClick={() => setDeleteTarget(sec)}
|
||||
className="cp-action-delete" title="حذف">
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
<button onClick={() => setDeleteTarget(sec)} className="mini-btn danger" title="حذف">
|
||||
<TrashIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
@@ -222,14 +222,11 @@ export default function SecretariesPage() {
|
||||
onClose={() => setEditTarget(null)}
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => setEditTarget(null)}
|
||||
className="cp-btn-secondary">
|
||||
لغو
|
||||
</button>
|
||||
<button onClick={() => setEditTarget(null)} className="btn ghost sm">لغو</button>
|
||||
<button
|
||||
onClick={() => editTarget && updatePermsMutation.mutate({ uuid: editTarget.uuid, permissions: editPerms })}
|
||||
disabled={updatePermsMutation.isPending}
|
||||
className="cp-btn-primary">
|
||||
className="btn primary sm">
|
||||
{updatePermsMutation.isPending ? 'در حال ذخیره...' : 'ذخیره دسترسیها'}
|
||||
</button>
|
||||
</>
|
||||
|
||||
@@ -1,13 +1,12 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { EyeIcon, CheckIcon, XMarkIcon } from '@heroicons/react/24/outline';
|
||||
import { EyeIcon, CheckIcon, XMarkIcon, MagnifyingGlassIcon } from '@heroicons/react/24/outline';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '../lib/api';
|
||||
import type { ApiResponse, PaginatedResponse } from '../lib/api';
|
||||
import type { Settlement } from '../types';
|
||||
import { formatDate, formatRial } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import StatusBadge from '../components/ui/StatusBadge';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
@@ -66,9 +65,9 @@ export default function SettlementsPage() {
|
||||
});
|
||||
|
||||
const columns: Column<Settlement>[] = [
|
||||
{ key: 'representation_name', header: 'نماینده', render: (s) => <span className="font-medium">{s.representation_name}</span> },
|
||||
{ key: 'representation_name', header: 'نماینده', render: (s) => <b>{s.representation_name}</b> },
|
||||
{ key: 'amount', header: 'مبلغ', render: (s) => formatRial(s.amount) },
|
||||
{ key: 'bank_card', header: 'شماره کارت', render: (s) => s.bank_card ? <span dir="ltr" className="font-mono text-xs">{s.bank_card}</span> : '—' },
|
||||
{ key: 'bank_card', header: 'شماره کارت', render: (s) => s.bank_card ? <span dir="ltr" style={{ fontFamily: 'monospace', fontSize: 12 }}>{s.bank_card}</span> : '—' },
|
||||
{ key: 'bank_name', header: 'بانک' },
|
||||
{ key: 'status', header: 'وضعیت', render: (s) => <StatusBadge type="settlement" value={s.status} /> },
|
||||
{ key: 'requested_at', header: 'تاریخ درخواست', render: (s) => formatDate(s.requested_at) },
|
||||
@@ -78,50 +77,56 @@ export default function SettlementsPage() {
|
||||
const total = data?.meta?.totalRecords ?? 0;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="تسویهحساب"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'تسویهحساب' }]}
|
||||
/>
|
||||
|
||||
<div className="cp-card p-6">
|
||||
<div className="flex items-center gap-3 mb-4 flex-wrap">
|
||||
{STATUS_FILTERS.map((f) => (
|
||||
<button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
|
||||
statusFilter === f.value ? 'bg-primary-600 text-white' : 'bg-slate-100 dark:bg-gray-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-gray-600'
|
||||
}`}>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
<div className="fade-in">
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">تسویهحساب</h1>
|
||||
<div className="muted">{total} درخواست تسویه</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
<div className="card-pad" style={{ paddingBottom: 0 }}>
|
||||
<div className="toolbar">
|
||||
<div className="field" style={{ minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
|
||||
<input
|
||||
value={search}
|
||||
onChange={(e) => { setSearch(e.target.value); setPage(1); }}
|
||||
placeholder="جستجو بر اساس نام نماینده..."
|
||||
/>
|
||||
</div>
|
||||
<div className="seg">
|
||||
{STATUS_FILTERS.map((f) => (
|
||||
<button
|
||||
key={f.value}
|
||||
className={statusFilter === f.value ? 'on' : ''}
|
||||
onClick={() => { setStatusFilter(f.value); setPage(1); }}
|
||||
>
|
||||
{f.label}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DataTable<Settlement>
|
||||
columns={columns}
|
||||
data={items}
|
||||
loading={isLoading}
|
||||
searchValue={search}
|
||||
onSearchChange={(v) => { setSearch(v); setPage(1); }}
|
||||
searchPlaceholder="جستجو بر اساس نام نماینده..."
|
||||
emptyMessage="هیچ درخواست تسویهای یافت نشد"
|
||||
actions={(s) => (
|
||||
<>
|
||||
<button onClick={() => navigate(`/admin/settlements/${s.uuid}`)}
|
||||
className="cp-action-view" title="مشاهده">
|
||||
<EyeIcon className="w-4 h-4" />
|
||||
className="mini-btn" title="مشاهده">
|
||||
<EyeIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
{s.status === 'pending' && (
|
||||
<>
|
||||
<button
|
||||
onClick={() => setApproveTarget(s)}
|
||||
className="cp-action-approve"
|
||||
title="تأیید"
|
||||
>
|
||||
<CheckIcon className="w-4 h-4" />
|
||||
<button onClick={() => setApproveTarget(s)} className="mini-btn" title="تأیید">
|
||||
<CheckIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
<button onClick={() => setRejectTarget(s)}
|
||||
className="cp-action-delete" title="رد">
|
||||
<XMarkIcon className="w-4 h-4" />
|
||||
<button onClick={() => setRejectTarget(s)} className="mini-btn danger" title="رد">
|
||||
<XMarkIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
@@ -148,26 +153,27 @@ export default function SettlementsPage() {
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => { setRejectTarget(null); setRejectReason(''); }}
|
||||
className="cp-btn-secondary">
|
||||
لغو
|
||||
</button>
|
||||
className="btn ghost sm">لغو</button>
|
||||
<button
|
||||
onClick={() => rejectTarget && rejectMutation.mutate({ s: rejectTarget, reason: rejectReason })}
|
||||
disabled={!rejectReason || rejectMutation.isPending}
|
||||
className="cp-btn-danger">
|
||||
className="btn danger sm">
|
||||
{rejectMutation.isPending ? 'در حال ارسال...' : 'رد کردن'}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<label className="cp-label mb-2">دلیل رد:</label>
|
||||
<textarea
|
||||
value={rejectReason}
|
||||
onChange={(e) => setRejectReason(e.target.value)}
|
||||
rows={4}
|
||||
placeholder="دلیل رد درخواست را بنویسید..."
|
||||
className="cp-textarea resize-none"
|
||||
/>
|
||||
<div className="form-row">
|
||||
<label>دلیل رد</label>
|
||||
<textarea
|
||||
value={rejectReason}
|
||||
onChange={(e) => setRejectReason(e.target.value)}
|
||||
rows={4}
|
||||
placeholder="دلیل رد درخواست را بنویسید..."
|
||||
className="input"
|
||||
style={{ resize: 'none', height: 'auto' }}
|
||||
/>
|
||||
</div>
|
||||
</Modal>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -9,7 +9,6 @@ import { api } from '../lib/api';
|
||||
import type { ApiResponse, PaginatedResponse } from '../lib/api';
|
||||
import type { SmsTemplate, SmsLog } from '../types';
|
||||
import { formatDate, formatDateTime } from '../lib/utils';
|
||||
import PageHeader from '../components/ui/PageHeader';
|
||||
import DataTable, { Column } from '../components/ui/DataTable';
|
||||
import StatusBadge from '../components/ui/StatusBadge';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
@@ -24,6 +23,12 @@ type TemplateFormData = z.infer<typeof templateSchema>;
|
||||
|
||||
type Tab = 'samples' | 'pending' | 'logs';
|
||||
|
||||
const STATUS_LOG_META: Record<string, { label: string; cls: string }> = {
|
||||
sent: { label: 'ارسال شده', cls: 'green' },
|
||||
failed: { label: 'ناموفق', cls: 'red' },
|
||||
queued: { label: 'در صف', cls: 'amber' },
|
||||
};
|
||||
|
||||
export default function SmsPage() {
|
||||
const qc = useQueryClient();
|
||||
const [activeTab, setActiveTab] = useState<Tab>('samples');
|
||||
@@ -110,11 +115,11 @@ export default function SmsPage() {
|
||||
});
|
||||
|
||||
const templateColumns: Column<SmsTemplate>[] = [
|
||||
{ key: 'name', header: 'نام', render: (t) => <span className="font-medium">{t.name}</span> },
|
||||
{ key: 'name', header: 'نام', render: (t) => <b>{t.name}</b> },
|
||||
{
|
||||
key: 'body',
|
||||
header: 'محتوا',
|
||||
render: (t) => <span className="text-xs text-gray-500 line-clamp-1 max-w-xs">{t.body}</span>,
|
||||
render: (t) => <span className="muted" style={{ fontSize: 12, display: 'block', maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{t.body}</span>,
|
||||
},
|
||||
{ key: 'status', header: 'وضعیت', render: (t) => <StatusBadge type="sms" value={t.status} /> },
|
||||
{ key: 'created_at', header: 'تاریخ', render: (t) => formatDate(t.created_at) },
|
||||
@@ -127,20 +132,15 @@ export default function SmsPage() {
|
||||
{
|
||||
key: 'message',
|
||||
header: 'پیام',
|
||||
render: (l) => <span className="text-xs text-gray-500 line-clamp-1 max-w-xs">{l.message}</span>,
|
||||
render: (l) => <span className="muted" style={{ fontSize: 12, display: 'block', maxWidth: 280, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{l.message}</span>,
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
header: 'وضعیت',
|
||||
render: (l) => (
|
||||
<span className={`text-xs px-2 py-0.5 rounded-full font-medium ${
|
||||
l.status === 'sent' ? 'bg-green-100 text-green-700'
|
||||
: l.status === 'failed' ? 'bg-red-100 text-red-700'
|
||||
: 'bg-yellow-100 text-yellow-700'
|
||||
}`}>
|
||||
{l.status === 'sent' ? 'ارسال شده' : l.status === 'failed' ? 'ناموفق' : 'در صف'}
|
||||
</span>
|
||||
),
|
||||
render: (l) => {
|
||||
const meta = STATUS_LOG_META[l.status] ?? { label: l.status, cls: 'gray' };
|
||||
return <span className={`badge ${meta.cls}`}><span className="bdot" />{meta.label}</span>;
|
||||
},
|
||||
},
|
||||
{ key: 'provider', header: 'سرویسدهنده' },
|
||||
{ key: 'sent_at', header: 'زمان ارسال', render: (l) => formatDateTime(l.sent_at) },
|
||||
@@ -153,38 +153,58 @@ export default function SmsPage() {
|
||||
setPage(1);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<PageHeader
|
||||
title="پیامک"
|
||||
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پیامک' }]}
|
||||
action={
|
||||
activeTab === 'samples' ? (
|
||||
<button onClick={() => setAddOpen(true)}
|
||||
className="cp-btn-primary">
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
افزودن قالب
|
||||
</button>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
const TABS: { key: Tab; label: string; badge?: number }[] = [
|
||||
{ key: 'samples', label: 'قالبهای نمونه' },
|
||||
{ key: 'pending', label: 'در انتظار تأیید', badge: pendingCount },
|
||||
{ key: 'logs', label: 'لاگهای ارسال' },
|
||||
];
|
||||
|
||||
<div className="cp-card">
|
||||
<div className="flex border-b border-slate-200 dark:border-gray-700 px-6 pt-4">
|
||||
{([
|
||||
{ key: 'samples' as Tab, label: 'قالبهای نمونه' },
|
||||
{ key: 'pending' as Tab, label: 'در انتظار تأیید', badge: pendingCount },
|
||||
{ key: 'logs' as Tab, label: 'لاگهای ارسال' },
|
||||
]).map((t) => (
|
||||
<button key={t.key} onClick={() => handleTabChange(t.key)}
|
||||
className={`pb-3 px-4 text-sm font-medium border-b-2 transition-colors -mb-px flex items-center gap-1.5 ${
|
||||
activeTab === t.key
|
||||
? 'border-primary-600 text-primary-600'
|
||||
: 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
|
||||
}`}>
|
||||
return (
|
||||
<div className="fade-in">
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="section-title">پیامک</h1>
|
||||
<div className="muted">مدیریت قالبهای پیامک</div>
|
||||
</div>
|
||||
{activeTab === 'samples' && (
|
||||
<button onClick={() => setAddOpen(true)} className="btn primary sm">
|
||||
<PlusIcon style={{ width: 16, height: 16 }} />
|
||||
افزودن قالب
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="card">
|
||||
{/* Tabs */}
|
||||
<div style={{ display: 'flex', borderBottom: '1px solid var(--border)', padding: '0 var(--card-pad)' }}>
|
||||
{TABS.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => handleTabChange(t.key)}
|
||||
style={{
|
||||
padding: '14px 16px',
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
border: 'none',
|
||||
background: 'none',
|
||||
cursor: 'pointer',
|
||||
borderBottom: `2px solid ${activeTab === t.key ? 'var(--primary)' : 'transparent'}`,
|
||||
color: activeTab === t.key ? 'var(--primary)' : 'var(--text-2)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
marginBottom: -1,
|
||||
transition: 'color .15s',
|
||||
}}
|
||||
>
|
||||
{t.label}
|
||||
{t.badge != null && t.badge > 0 && (
|
||||
<span className="inline-flex items-center justify-center min-w-[18px] h-[18px] px-1 rounded-full text-[10px] font-bold bg-orange-500 text-white leading-none">
|
||||
<span style={{
|
||||
display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
|
||||
minWidth: 18, height: 18, padding: '0 4px', borderRadius: 9,
|
||||
fontSize: 10, fontWeight: 700,
|
||||
background: 'oklch(0.62 0.22 30)', color: '#fff', lineHeight: 1,
|
||||
}}>
|
||||
{t.badge}
|
||||
</span>
|
||||
)}
|
||||
@@ -192,7 +212,7 @@ export default function SmsPage() {
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="p-6">
|
||||
<div className="card-pad" style={{ paddingTop: 'var(--card-pad)' }}>
|
||||
{activeTab === 'samples' && (
|
||||
<>
|
||||
<DataTable<SmsTemplate>
|
||||
@@ -201,9 +221,8 @@ export default function SmsPage() {
|
||||
loading={sampleTemplatesQuery.isLoading}
|
||||
emptyMessage="هیچ قالبی یافت نشد"
|
||||
actions={(t) => (
|
||||
<button onClick={() => setDeleteTarget(t)}
|
||||
className="cp-action-delete" title="حذف">
|
||||
<TrashIcon className="w-4 h-4" />
|
||||
<button onClick={() => setDeleteTarget(t)} className="mini-btn danger" title="حذف">
|
||||
<TrashIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
)}
|
||||
/>
|
||||
@@ -225,13 +244,11 @@ export default function SmsPage() {
|
||||
emptyMessage="هیچ قالبی در انتظار تأیید نیست"
|
||||
actions={(t) => (
|
||||
<>
|
||||
<button onClick={() => setApproveTarget(t)}
|
||||
className="cp-action-approve" title="تأیید">
|
||||
<CheckIcon className="w-4 h-4" />
|
||||
<button onClick={() => setApproveTarget(t)} className="mini-btn" title="تأیید">
|
||||
<CheckIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
<button onClick={() => setRejectTarget(t)}
|
||||
className="cp-action-delete" title="رد">
|
||||
<XMarkIcon className="w-4 h-4" />
|
||||
<button onClick={() => setRejectTarget(t)} className="mini-btn danger" title="رد">
|
||||
<XMarkIcon style={{ width: 15, height: 15 }} />
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
@@ -267,29 +284,24 @@ export default function SmsPage() {
|
||||
<Modal open={addOpen} title="افزودن قالب نمونه" onClose={() => setAddOpen(false)}
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => setAddOpen(false)}
|
||||
className="cp-btn-secondary">
|
||||
لغو
|
||||
</button>
|
||||
<button form="add-sms-form" type="submit" disabled={isSubmitting}
|
||||
className="cp-btn-primary">
|
||||
<button onClick={() => setAddOpen(false)} className="btn ghost sm">لغو</button>
|
||||
<button form="add-sms-form" type="submit" disabled={isSubmitting} className="btn primary sm">
|
||||
{isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<form id="add-sms-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
|
||||
<div>
|
||||
<label className="cp-label">نام قالب</label>
|
||||
<input {...register('name')} placeholder="مثال: تأیید نوبت"
|
||||
className="cp-input h-11" />
|
||||
{errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
|
||||
<form id="add-sms-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))}>
|
||||
<div className="form-row">
|
||||
<label>نام قالب</label>
|
||||
<input {...register('name')} placeholder="مثال: تأیید نوبت" className="input" />
|
||||
{errors.name && <p className="err-text">{errors.name.message}</p>}
|
||||
</div>
|
||||
<div>
|
||||
<label className="cp-label">متن قالب</label>
|
||||
<div className="form-row" style={{ marginTop: 12 }}>
|
||||
<label>متن قالب</label>
|
||||
<textarea {...register('body')} rows={4} placeholder="متن پیامک..."
|
||||
className="cp-textarea resize-none" />
|
||||
{errors.body && <p className="text-red-500 text-xs mt-1">{errors.body.message}</p>}
|
||||
className="input" style={{ resize: 'none', height: 'auto' }} />
|
||||
{errors.body && <p className="err-text">{errors.body.message}</p>}
|
||||
</div>
|
||||
</form>
|
||||
</Modal>
|
||||
@@ -298,23 +310,22 @@ export default function SmsPage() {
|
||||
onClose={() => { setRejectTarget(null); setRejectReason(''); }}
|
||||
footer={
|
||||
<>
|
||||
<button onClick={() => { setRejectTarget(null); setRejectReason(''); }}
|
||||
className="cp-btn-secondary">
|
||||
لغو
|
||||
</button>
|
||||
<button onClick={() => { setRejectTarget(null); setRejectReason(''); }} className="btn ghost sm">لغو</button>
|
||||
<button
|
||||
onClick={() => rejectTarget && rejectMutation.mutate({ t: rejectTarget, reason: rejectReason })}
|
||||
disabled={!rejectReason || rejectMutation.isPending}
|
||||
className="cp-btn-danger">
|
||||
className="btn danger sm">
|
||||
رد کردن
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<label className="cp-label mb-2">دلیل رد:</label>
|
||||
<textarea value={rejectReason} onChange={(e) => setRejectReason(e.target.value)}
|
||||
rows={4} placeholder="دلیل رد را بنویسید..."
|
||||
className="cp-textarea resize-none" />
|
||||
<div className="form-row">
|
||||
<label>دلیل رد</label>
|
||||
<textarea value={rejectReason} onChange={(e) => setRejectReason(e.target.value)}
|
||||
rows={4} placeholder="دلیل رد را بنویسید..."
|
||||
className="input" style={{ resize: 'none', height: 'auto' }} />
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
<ConfirmDialog
|
||||
|
||||
@@ -132,7 +132,7 @@ function ChangeRoleModal({ current, loading, onSave, onClose }: {
|
||||
footer={
|
||||
<>
|
||||
<button onClick={onClose} className="cp-btn-secondary px-5">لغو</button>
|
||||
<button onClick={() => onSave(selected)} disabled={loading} className="cp-btn-primary">
|
||||
<button onClick={() => onSave(selected)} disabled={loading} className="btn primary sm">
|
||||
{loading ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
|
||||
</button>
|
||||
</>
|
||||
@@ -489,7 +489,7 @@ export default function UserDetailPage() {
|
||||
form="edit-user-form"
|
||||
type="submit"
|
||||
disabled={updateMut.isPending}
|
||||
className="cp-btn-primary"
|
||||
className="btn primary sm"
|
||||
>
|
||||
{updateMut.isPending ? 'در حال ذخیره...' : 'ذخیره تغییرات'}
|
||||
</button>
|
||||
|
||||
+196
-389
@@ -2,10 +2,9 @@ import React, { useState, useEffect, useMemo } from 'react';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
MagnifyingGlassIcon, PlusIcon, EllipsisVerticalIcon,
|
||||
EyeIcon, PencilIcon, TrashIcon, ArrowPathIcon,
|
||||
UserGroupIcon, CheckCircleIcon, XCircleIcon,
|
||||
ShieldCheckIcon, HeartIcon, UserIcon, FunnelIcon,
|
||||
MagnifyingGlassIcon, PlusIcon,
|
||||
EyeIcon, TrashIcon, ArrowPathIcon,
|
||||
CheckCircleIcon, XCircleIcon, ShieldCheckIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { toast } from 'sonner';
|
||||
import { api } from '../lib/api';
|
||||
@@ -13,6 +12,7 @@ import type { ApiResponse, PaginatedResponse } from '../lib/api';
|
||||
import { formatDate, formatNumber, maskMobile } from '../lib/utils';
|
||||
import ConfirmDialog from '../components/ui/ConfirmDialog';
|
||||
import Pagination from '../components/ui/Pagination';
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
// ── Types ─────────────────────────────────────────────────────────────────
|
||||
|
||||
@@ -37,14 +37,16 @@ interface UserStats {
|
||||
patients: number;
|
||||
}
|
||||
|
||||
// ── Role helpers ──────────────────────────────────────────────────────────
|
||||
// ── Helpers ───────────────────────────────────────────────────────────────
|
||||
|
||||
const ROLE_META: Record<string, { label: string; cls: string; dot: string }> = {
|
||||
admin: { label: 'ادمین', cls: 'bg-violet-100 dark:bg-violet-400/10 text-violet-700 dark:text-violet-300', dot: '#8b5cf6' },
|
||||
doctor: { label: 'پزشک', cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300', dot: '#3b82f6' },
|
||||
secretary: { label: 'منشی', cls: 'bg-orange-100 dark:bg-orange-400/10 text-orange-700 dark:text-orange-300', dot: '#f97316' },
|
||||
clinic: { label: 'کلینیک', cls: 'bg-emerald-100 dark:bg-emerald-400/10 text-emerald-700 dark:text-emerald-300', dot: '#10b981' },
|
||||
patient: { label: 'بیمار', cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400', dot: '#94a3b8' },
|
||||
const HUES_LIST = [256, 205, 162, 295, 272];
|
||||
|
||||
const ROLE_META: Record<string, { label: string; badgeCls: string }> = {
|
||||
admin: { label: 'ادمین', badgeCls: 'violet' },
|
||||
doctor: { label: 'پزشک', badgeCls: 'blue' },
|
||||
secretary: { label: 'منشی', badgeCls: 'amber' },
|
||||
clinic: { label: 'کلینیک', badgeCls: 'green' },
|
||||
patient: { label: 'بیمار', badgeCls: 'gray' },
|
||||
};
|
||||
|
||||
function getPrimaryRole(roles: string[]): string {
|
||||
@@ -55,22 +57,16 @@ function getPrimaryRole(roles: string[]): string {
|
||||
return 'patient';
|
||||
}
|
||||
|
||||
// ── Sub-components ────────────────────────────────────────────────────────
|
||||
|
||||
const AVATAR_COLORS = [
|
||||
'bg-violet-100 text-violet-700 dark:bg-violet-400/20 dark:text-violet-300',
|
||||
'bg-blue-100 text-blue-700 dark:bg-blue-400/20 dark:text-blue-300',
|
||||
'bg-emerald-100 text-emerald-700 dark:bg-emerald-400/20 dark:text-emerald-300',
|
||||
'bg-pink-100 text-pink-700 dark:bg-pink-400/20 dark:text-pink-300',
|
||||
'bg-amber-100 text-amber-700 dark:bg-amber-400/20 dark:text-amber-300',
|
||||
];
|
||||
|
||||
function Avatar({ name, id }: { name: string | null; id: number }) {
|
||||
function UserAvatar({ name, id, size = 'sm' }: { name: string | null; id: number; size?: 'sm' | 'lg' }) {
|
||||
const initials = name
|
||||
? name.split(' ').filter(Boolean).map(w => w[0]).join('').toUpperCase().slice(0, 2)
|
||||
? name.split(' ').filter(Boolean).map((w) => w[0]).join('').toUpperCase().slice(0, 2)
|
||||
: '؟';
|
||||
const hue = HUES_LIST[id % HUES_LIST.length];
|
||||
return (
|
||||
<div className={`w-8 h-8 rounded-full ${AVATAR_COLORS[id % AVATAR_COLORS.length]} flex items-center justify-center text-xs font-bold shrink-0`}>
|
||||
<div
|
||||
className={`avatar ${size}`}
|
||||
style={{ background: `linear-gradient(145deg, oklch(0.62 0.15 ${hue}), oklch(0.48 0.16 ${hue}))` }}
|
||||
>
|
||||
{initials}
|
||||
</div>
|
||||
);
|
||||
@@ -80,61 +76,19 @@ function RoleBadge({ roles }: { roles: string[] }) {
|
||||
const key = getPrimaryRole(roles);
|
||||
const meta = ROLE_META[key];
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full ${meta.cls}`}>
|
||||
<span className="w-1.5 h-1.5 rounded-full shrink-0" style={{ backgroundColor: meta.dot }} />
|
||||
<span className={`badge ${meta.badgeCls}`}>
|
||||
<span className="bdot" />
|
||||
{meta.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function ActiveBadge({ active }: { active: boolean }) {
|
||||
return active ? (
|
||||
<span className="inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-green-500 shrink-0" />
|
||||
فعال
|
||||
</span>
|
||||
) : (
|
||||
<span className="inline-flex items-center gap-1 text-[11px] font-medium px-2 py-0.5 rounded-full bg-slate-100 dark:bg-slate-400/10 text-slate-500 dark:text-slate-400">
|
||||
<span className="w-1.5 h-1.5 rounded-full bg-slate-400 shrink-0" />
|
||||
غیرفعال
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
function highlight(text: string | null | undefined, query: string): React.ReactNode {
|
||||
if (!text || !query.trim()) return text ?? '—';
|
||||
const idx = text.toLowerCase().indexOf(query.toLowerCase());
|
||||
if (idx === -1) return text;
|
||||
return (
|
||||
<>
|
||||
{text.slice(0, idx)}
|
||||
<mark className="bg-yellow-100 dark:bg-yellow-400/20 text-yellow-800 dark:text-yellow-200 rounded px-0.5 not-italic">
|
||||
{text.slice(idx, idx + query.length)}
|
||||
</mark>
|
||||
{text.slice(idx + query.length)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
// ── KPI Card ──────────────────────────────────────────────────────────────
|
||||
|
||||
function KpiCard({ label, value, icon: Icon, iconBg, iconColor }: {
|
||||
label: string; value: number | undefined;
|
||||
icon: React.ElementType; iconBg: string; iconColor: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="cp-card p-4 flex items-center gap-3">
|
||||
<div className={`cp-stat-icon ${iconBg} shrink-0`}>
|
||||
<Icon className={`w-5 h-5 ${iconColor}`} />
|
||||
</div>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-xs text-slate-500 dark:text-slate-400 mb-0.5 truncate">{label}</p>
|
||||
{value === undefined
|
||||
? <div className="h-5 w-16 rounded skeleton" />
|
||||
: <p className="text-lg font-bold text-slate-900 dark:text-slate-50 leading-none">{formatNumber(value)}</p>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<span className={`badge ${active ? 'green' : 'gray'}`}>
|
||||
<span className="bdot" />
|
||||
{active ? 'فعال' : 'غیرفعال'}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -146,33 +100,42 @@ function ChangeRoleModal({ user, onClose, onSave, loading }: {
|
||||
}) {
|
||||
const [selected, setSelected] = useState(getPrimaryRole(user.roles));
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm animate-fade-in">
|
||||
<div className="cp-card w-full max-w-sm p-6 animate-scale-in shadow-2xl">
|
||||
<h3 className="text-base font-bold text-slate-900 dark:text-slate-50 mb-1">تغییر نقش</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mb-5">{user.name || user.mobile_number}</p>
|
||||
<div className="space-y-2 mb-6">
|
||||
{Object.entries(ROLE_META).map(([key, meta]) => (
|
||||
<label
|
||||
key={key}
|
||||
className={`flex items-center gap-3 p-3 rounded-xl cursor-pointer border-2 transition-all ${
|
||||
selected === key
|
||||
? 'border-primary-500 bg-primary-50 dark:bg-primary-500/10'
|
||||
: 'border-transparent hover:bg-slate-50 dark:hover:bg-gray-800 border border-slate-200 dark:border-gray-700'
|
||||
}`}
|
||||
>
|
||||
<input type="radio" name="role" value={key} checked={selected === key}
|
||||
onChange={() => setSelected(key)} className="sr-only" />
|
||||
<span className="w-2.5 h-2.5 rounded-full shrink-0" style={{ backgroundColor: meta.dot }} />
|
||||
<span className="text-sm font-medium text-slate-800 dark:text-slate-200 flex-1">{meta.label}</span>
|
||||
{selected === key && <CheckCircleIcon className="w-4 h-4 text-primary-600 dark:text-primary-400" />}
|
||||
</label>
|
||||
))}
|
||||
<div className="overlay" onClick={onClose}>
|
||||
<div className="modal" style={{ maxWidth: 400 }} onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-head">
|
||||
<h2 style={{ fontSize: 16 }}>تغییر نقش</h2>
|
||||
<button className="mini-btn" onClick={onClose}>
|
||||
<XMarkIcon style={{ width: 18, height: 18 }} />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<button onClick={() => onSave(selected)} disabled={loading} className="cp-btn-primary flex-1">
|
||||
<div className="modal-body">
|
||||
<p className="muted" style={{ fontSize: 13, marginBottom: 16 }}>{user.name || user.mobile_number}</p>
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
|
||||
{Object.entries(ROLE_META).map(([key, meta]) => (
|
||||
<label
|
||||
key={key}
|
||||
style={{
|
||||
display: 'flex', alignItems: 'center', gap: 12, padding: '11px 14px',
|
||||
borderRadius: 'var(--r)', cursor: 'pointer',
|
||||
border: `2px solid ${selected === key ? 'var(--primary)' : 'var(--border)'}`,
|
||||
background: selected === key ? 'var(--primary-soft)' : 'var(--surface-2)',
|
||||
transition: '.15s',
|
||||
}}
|
||||
>
|
||||
<input type="radio" name="role" value={key} checked={selected === key}
|
||||
onChange={() => setSelected(key)} style={{ accentColor: 'var(--primary)', width: 16, height: 16 }} />
|
||||
<span className={`badge ${meta.badgeCls}`} style={{ pointerEvents: 'none' }}>
|
||||
<span className="bdot" />{meta.label}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-foot" style={{ justifyContent: 'flex-end' }}>
|
||||
<button className="btn ghost sm" onClick={onClose} disabled={loading}>انصراف</button>
|
||||
<button className="btn primary sm" onClick={() => onSave(selected)} disabled={loading}>
|
||||
{loading ? 'در حال ذخیره...' : 'ذخیره'}
|
||||
</button>
|
||||
<button onClick={onClose} disabled={loading} className="cp-btn-secondary px-5">لغو</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -182,16 +145,14 @@ function ChangeRoleModal({ user, onClose, onSave, loading }: {
|
||||
// ── Constants ─────────────────────────────────────────────────────────────
|
||||
|
||||
const ROLE_TABS = [
|
||||
{ key: '', label: 'همه', dot: '' },
|
||||
{ key: 'admin', label: 'ادمین', dot: '#8b5cf6' },
|
||||
{ key: 'doctor', label: 'پزشک', dot: '#3b82f6' },
|
||||
{ key: 'secretary', label: 'منشی', dot: '#f97316' },
|
||||
{ key: 'clinic', label: 'کلینیک', dot: '#10b981' },
|
||||
{ key: 'patient', label: 'بیمار', dot: '#94a3b8' },
|
||||
{ key: '', label: 'همه نقشها' },
|
||||
{ key: 'admin', label: 'ادمین' },
|
||||
{ key: 'doctor', label: 'پزشک' },
|
||||
{ key: 'secretary', label: 'منشی' },
|
||||
{ key: 'clinic', label: 'کلینیک' },
|
||||
{ key: 'patient', label: 'بیمار' },
|
||||
];
|
||||
|
||||
const LIMIT_OPTIONS = [10, 25, 50, 100];
|
||||
|
||||
// ── Main Page ─────────────────────────────────────────────────────────────
|
||||
|
||||
export default function UsersPage() {
|
||||
@@ -199,37 +160,23 @@ export default function UsersPage() {
|
||||
const qc = useQueryClient();
|
||||
|
||||
const [page, setPage] = useState(1);
|
||||
const [limit, setLimit] = useState(25);
|
||||
const [limit] = useState(25);
|
||||
const [searchInput, setSearchInput] = useState('');
|
||||
const [search, setSearch] = useState('');
|
||||
const [role, setRole] = useState('');
|
||||
const [status, setStatus] = useState('');
|
||||
const [sort, setSort] = useState('newest');
|
||||
const [selected, setSelected] = useState<string[]>([]);
|
||||
const [activeMenu, setActiveMenu] = useState<string | null>(null);
|
||||
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);
|
||||
const [confirmBulkDel, setConfirmBulkDel] = useState(false);
|
||||
const [bulkDeleting, setBulkDeleting] = useState(false);
|
||||
|
||||
// Debounce search
|
||||
useEffect(() => {
|
||||
const t = setTimeout(() => { setSearch(searchInput); setPage(1); }, 350);
|
||||
return () => clearTimeout(t);
|
||||
}, [searchInput]);
|
||||
|
||||
// Reset page + selection when filters change
|
||||
useEffect(() => { setPage(1); setSelected([]); }, [role, status, sort, limit]);
|
||||
|
||||
// Close action dropdown on outside click
|
||||
useEffect(() => {
|
||||
if (!activeMenu) return;
|
||||
const close = (e: MouseEvent) => {
|
||||
if ((e.target as HTMLElement).closest('[data-menu]') === null) setActiveMenu(null);
|
||||
};
|
||||
document.addEventListener('mousedown', close);
|
||||
return () => document.removeEventListener('mousedown', close);
|
||||
}, [activeMenu]);
|
||||
useEffect(() => { setPage(1); setSelected([]); }, [role, status]);
|
||||
|
||||
// ── Queries ──
|
||||
|
||||
@@ -240,9 +187,9 @@ export default function UsersPage() {
|
||||
});
|
||||
|
||||
const usersQ = useQuery({
|
||||
queryKey: ['users', page, limit, search, role, status, sort],
|
||||
queryKey: ['users', page, limit, search, role, status],
|
||||
queryFn: () => {
|
||||
const p = new URLSearchParams({ page: String(page), limit: String(limit), sort });
|
||||
const p = new URLSearchParams({ page: String(page), limit: String(limit) });
|
||||
if (search) p.set('search', search);
|
||||
if (role) p.set('role', role);
|
||||
if (status) p.set('status', status);
|
||||
@@ -291,12 +238,12 @@ export default function UsersPage() {
|
||||
onError: (e: Error) => toast.error(e.message),
|
||||
});
|
||||
|
||||
// ── Bulk actions ──
|
||||
// ── Bulk ──
|
||||
|
||||
const allSelected = items.length > 0 && items.every(u => selected.includes(u.uuid));
|
||||
const toggleAll = () => setSelected(allSelected ? [] : items.map(u => u.uuid));
|
||||
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]);
|
||||
setSelected((prev) => prev.includes(uuid) ? prev.filter((id) => id !== uuid) : [...prev, uuid]);
|
||||
|
||||
const handleBulkDelete = async () => {
|
||||
setBulkDeleting(true);
|
||||
@@ -312,313 +259,178 @@ export default function UsersPage() {
|
||||
qc.invalidateQueries({ queryKey: ['users-stats'] });
|
||||
};
|
||||
|
||||
// ── KPI cards ──
|
||||
// ── KPI data ──
|
||||
|
||||
const kpiCards = [
|
||||
{ label: 'کل کاربران', value: stats?.total, icon: UserGroupIcon, iconBg: 'bg-slate-100 dark:bg-slate-400/10', iconColor: 'text-slate-600 dark:text-slate-400' },
|
||||
{ label: 'فعال', value: stats?.active, icon: CheckCircleIcon, iconBg: 'bg-green-100 dark:bg-green-400/10', iconColor: 'text-green-600 dark:text-green-400' },
|
||||
{ label: 'غیرفعال', value: stats?.inactive, icon: XCircleIcon, iconBg: 'bg-slate-100 dark:bg-slate-400/10', iconColor: 'text-slate-500 dark:text-slate-400' },
|
||||
{ label: 'ادمینها', value: stats?.admins, icon: ShieldCheckIcon, iconBg: 'bg-violet-100 dark:bg-violet-400/10', iconColor: 'text-violet-600 dark:text-violet-400' },
|
||||
{ label: 'پزشکان', value: stats?.doctors, icon: HeartIcon, iconBg: 'bg-blue-100 dark:bg-blue-400/10', iconColor: 'text-blue-600 dark:text-blue-400' },
|
||||
{ label: 'بیماران', value: stats?.patients, icon: UserIcon, iconBg: 'bg-orange-100 dark:bg-orange-400/10', iconColor: 'text-orange-600 dark:text-orange-400' },
|
||||
{ label: 'کل کاربران', value: stats?.total, bg: 'var(--surface-3)', color: 'var(--text-2)' },
|
||||
{ label: 'فعال', value: stats?.active, bg: 'var(--success-bg)', color: 'var(--success)' },
|
||||
{ label: 'غیرفعال', value: stats?.inactive, bg: 'var(--surface-3)', color: 'var(--text-3)' },
|
||||
{ label: 'ادمینها', value: stats?.admins, bg: 'var(--violet-bg)', color: 'var(--violet)' },
|
||||
{ label: 'پزشکان', value: stats?.doctors, bg: 'var(--info-bg)', color: 'var(--info)' },
|
||||
{ label: 'بیماران', value: stats?.patients, bg: 'var(--warning-bg)', color: 'var(--warning)' },
|
||||
];
|
||||
|
||||
const hasFilters = !!(search || role || status);
|
||||
|
||||
return (
|
||||
<div className="animate-slide-up space-y-5">
|
||||
|
||||
{/* ── Header ─────────────────────────────────────────────── */}
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="fade-in">
|
||||
{/* Header */}
|
||||
<div className="card-title-row" style={{ marginBottom: 'var(--gap)' }}>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-50">کاربران</h1>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">مدیریت کاربران، نقشها و سطح دسترسی سیستم</p>
|
||||
<h1 className="section-title">کاربران</h1>
|
||||
<div className="muted" style={{ fontSize: 13, marginTop: 3 }}>مدیریت کاربران، نقشها و سطح دسترسی</div>
|
||||
</div>
|
||||
<button className="cp-btn-primary shrink-0">
|
||||
<PlusIcon className="w-4 h-4" />
|
||||
<button className="btn primary sm">
|
||||
<PlusIcon style={{ width: 15, height: 15 }} />
|
||||
افزودن کاربر
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* ── KPI Cards ──────────────────────────────────────────── */}
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 xl:grid-cols-6 gap-3">
|
||||
{kpiCards.map((c) => <KpiCard key={c.label} {...c} />)}
|
||||
{/* KPI cards */}
|
||||
<div className="stat-grid">
|
||||
{kpiCards.map((c) => (
|
||||
<div key={c.label} className="stat">
|
||||
<div className="ico" style={{ background: c.bg, color: c.color }}>
|
||||
<svg style={{ width: 20, height: 20 }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="lbl">{c.label}</div>
|
||||
<div className="val">
|
||||
{c.value === undefined
|
||||
? <span className="skeleton" style={{ display: 'inline-block', width: 48, height: 26, borderRadius: 4 }} />
|
||||
: formatNumber(c.value)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* ── Main Card ──────────────────────────────────────────── */}
|
||||
<div className="cp-card overflow-hidden">
|
||||
|
||||
{/* Main card */}
|
||||
<div className="card">
|
||||
{/* Toolbar */}
|
||||
<div className="p-4 border-b border-slate-200 dark:border-gray-700/50 space-y-3">
|
||||
|
||||
{/* Row 1: Search + Status + Sort + Limit + Refresh */}
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<div className="relative flex-1 min-w-52">
|
||||
<MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
||||
<div className="card-pad" style={{ paddingBottom: 0 }}>
|
||||
<div className="toolbar">
|
||||
<div className="field" style={{ minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 17, height: 17 }} />
|
||||
<input
|
||||
type="text"
|
||||
value={searchInput}
|
||||
onChange={(e) => setSearchInput(e.target.value)}
|
||||
placeholder="نام، موبایل یا ایمیل..."
|
||||
className="cp-input pr-9"
|
||||
/>
|
||||
{searchInput && (
|
||||
<button
|
||||
onClick={() => { setSearchInput(''); setSearch(''); }}
|
||||
className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 text-lg leading-none"
|
||||
>×</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<select value={status} onChange={(e) => setStatus(e.target.value)} className="cp-select h-10 w-auto min-w-36 text-sm">
|
||||
<option value="">همه وضعیتها</option>
|
||||
<option value="1">فعال</option>
|
||||
<option value="0">غیرفعال</option>
|
||||
</select>
|
||||
|
||||
<select value={sort} onChange={(e) => setSort(e.target.value)} className="cp-select h-10 w-auto min-w-32 text-sm">
|
||||
<option value="newest">جدیدترین</option>
|
||||
<option value="oldest">قدیمیترین</option>
|
||||
</select>
|
||||
|
||||
<select value={limit} onChange={(e) => setLimit(Number(e.target.value))} className="cp-select h-10 w-auto min-w-24 text-sm">
|
||||
{LIMIT_OPTIONS.map(l => <option key={l} value={l}>{formatNumber(l)} عدد</option>)}
|
||||
</select>
|
||||
|
||||
<button
|
||||
onClick={() => usersQ.refetch()}
|
||||
disabled={usersQ.isFetching}
|
||||
className="cp-btn-secondary h-10 px-3"
|
||||
title="بهروزرسانی"
|
||||
>
|
||||
<ArrowPathIcon className={`w-4 h-4 ${usersQ.isFetching ? 'animate-spin' : ''}`} />
|
||||
<div className="field">
|
||||
<select value={role} onChange={(e) => setRole(e.target.value)}>
|
||||
{ROLE_TABS.map((t) => (
|
||||
<option key={t.key} value={t.key}>{t.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div className="seg">
|
||||
<button className={!status ? 'on' : ''} onClick={() => setStatus('')}>همه</button>
|
||||
<button className={status === '1' ? 'on' : ''} onClick={() => setStatus('1')}>فعال</button>
|
||||
<button className={status === '0' ? 'on' : ''} onClick={() => setStatus('0')}>غیرفعال</button>
|
||||
</div>
|
||||
<div className="spacer" />
|
||||
<button className="btn ghost sm" onClick={() => usersQ.refetch()} disabled={usersQ.isFetching} title="بهروزرسانی">
|
||||
<ArrowPathIcon style={{ width: 15, height: 15, animation: usersQ.isFetching ? 'spin 1s linear infinite' : undefined }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Row 2: Role filter pills */}
|
||||
<div className="flex items-center gap-1.5 flex-wrap">
|
||||
<span className="flex items-center gap-1 text-xs text-slate-500 dark:text-slate-400 shrink-0">
|
||||
<FunnelIcon className="w-3.5 h-3.5" />نقش:
|
||||
</span>
|
||||
{ROLE_TABS.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
onClick={() => setRole(t.key)}
|
||||
className={`inline-flex items-center gap-1.5 text-xs font-medium px-3 py-1.5 rounded-lg border transition-all ${
|
||||
role === t.key
|
||||
? 'bg-primary-600 border-primary-600 text-white shadow-sm'
|
||||
: 'bg-transparent border-slate-200 dark:border-gray-700 text-slate-600 dark:text-slate-400 hover:bg-slate-50 dark:hover:bg-gray-800'
|
||||
}`}
|
||||
>
|
||||
{t.dot && (
|
||||
<span className="w-1.5 h-1.5 rounded-full shrink-0"
|
||||
style={{ backgroundColor: role === t.key ? 'white' : t.dot }} />
|
||||
)}
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
{hasFilters && (
|
||||
<button
|
||||
onClick={() => { setSearchInput(''); setSearch(''); setRole(''); setStatus(''); }}
|
||||
className="text-xs text-red-500 dark:text-red-400 hover:underline mr-2"
|
||||
>
|
||||
پاک کردن فیلترها
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bulk actions bar */}
|
||||
{/* Bulk bar */}
|
||||
{selected.length > 0 && (
|
||||
<div className="px-4 py-2.5 bg-primary-50 dark:bg-primary-500/10 border-b border-primary-200 dark:border-primary-500/20 flex items-center gap-3">
|
||||
<span className="text-sm font-medium text-primary-700 dark:text-primary-300">
|
||||
<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 className="flex gap-2 mr-auto">
|
||||
<button
|
||||
onClick={() => setConfirmBulkDel(true)}
|
||||
className="text-xs px-3 py-1.5 rounded-lg bg-red-100 dark:bg-red-400/10 text-red-600 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-400/20 transition-colors font-medium"
|
||||
>
|
||||
حذف انتخابشدهها
|
||||
</button>
|
||||
<button onClick={() => setSelected([])} className="text-xs px-3 py-1.5 rounded-lg text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors">
|
||||
لغو انتخاب
|
||||
</button>
|
||||
<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="overflow-x-auto">
|
||||
<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">
|
||||
<th className="px-4 py-3 w-10">
|
||||
<tr>
|
||||
<th style={{ width: 42 }}>
|
||||
<input type="checkbox" checked={allSelected} onChange={toggleAll}
|
||||
className="rounded border-slate-300 dark:border-gray-600 text-primary-600 cursor-pointer" />
|
||||
style={{ accentColor: 'var(--primary)', cursor: 'pointer' }} />
|
||||
</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap">کاربر</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden sm:table-cell">موبایل</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden md:table-cell">ایمیل</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap">نقش</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden sm:table-cell">وضعیت</th>
|
||||
<th className="px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap hidden lg:table-cell">عضویت</th>
|
||||
<th className="px-4 py-3 w-10" />
|
||||
<th>کاربر</th>
|
||||
<th>شماره موبایل</th>
|
||||
<th>نقش</th>
|
||||
<th>تاریخ عضویت</th>
|
||||
<th>وضعیت</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
|
||||
|
||||
{/* Loading skeleton */}
|
||||
{usersQ.isLoading && Array.from({ length: 8 }).map((_, i) => (
|
||||
<tbody>
|
||||
{usersQ.isLoading && Array.from({ length: 7 }).map((_, i) => (
|
||||
<tr key={i}>
|
||||
<td className="px-4 py-3.5"><div className="w-4 h-4 rounded skeleton" /></td>
|
||||
<td className="px-4 py-3.5">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 rounded-full skeleton shrink-0" />
|
||||
<div className="space-y-1.5 flex-1">
|
||||
<div className="h-3.5 rounded skeleton w-28" />
|
||||
<div className="h-3 rounded skeleton w-10" />
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-4 py-3.5 hidden sm:table-cell"><div className="h-3.5 rounded skeleton w-24" /></td>
|
||||
<td className="px-4 py-3.5 hidden md:table-cell"><div className="h-3.5 rounded skeleton w-36" /></td>
|
||||
<td className="px-4 py-3.5"><div className="h-5 rounded-full skeleton w-14" /></td>
|
||||
<td className="px-4 py-3.5 hidden sm:table-cell"><div className="h-5 rounded-full skeleton w-12" /></td>
|
||||
<td className="px-4 py-3.5 hidden lg:table-cell"><div className="h-3.5 rounded skeleton w-20" /></td>
|
||||
<td className="px-4 py-3.5"><div className="w-6 h-6 rounded skeleton" /></td>
|
||||
{Array.from({ length: 7 }).map((_, j) => (
|
||||
<td key={j}>
|
||||
<div className="skeleton" style={{ height: 14, borderRadius: 6, width: j === 1 ? '70%' : '55%' }} />
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
))}
|
||||
|
||||
{/* Empty state */}
|
||||
{!usersQ.isLoading && items.length === 0 && (
|
||||
<tr>
|
||||
<td colSpan={8} 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">
|
||||
<UserGroupIcon className="w-7 h-7 text-slate-400 dark:text-slate-500" />
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||
{hasFilters ? 'نتیجهای برای فیلترهای انتخابی یافت نشد' : 'هیچ کاربری ثبت نشده'}
|
||||
</p>
|
||||
{hasFilters && (
|
||||
<button onClick={() => { setSearchInput(''); setSearch(''); setRole(''); setStatus(''); }}
|
||||
className="text-xs text-primary-600 dark:text-primary-400 hover:underline">
|
||||
پاک کردن فیلترها
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
<td colSpan={7}>
|
||||
<div className="empty">هیچ کاربری یافت نشد</div>
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{/* Data rows */}
|
||||
{!usersQ.isLoading && items.map((user) => (
|
||||
<tr
|
||||
key={user.uuid}
|
||||
className={`transition-colors ${
|
||||
selected.includes(user.uuid)
|
||||
? 'bg-primary-50/60 dark:bg-primary-500/5'
|
||||
: 'hover:bg-slate-50/80 dark:hover:bg-gray-800/40'
|
||||
}`}
|
||||
>
|
||||
{/* Checkbox */}
|
||||
<td className="px-4 py-3.5" onClick={(e) => e.stopPropagation()}>
|
||||
<tr key={user.uuid}>
|
||||
<td>
|
||||
<input type="checkbox" checked={selected.includes(user.uuid)}
|
||||
onChange={() => toggleOne(user.uuid)}
|
||||
className="rounded border-slate-300 dark:border-gray-600 text-primary-600 cursor-pointer" />
|
||||
style={{ accentColor: 'var(--primary)', cursor: 'pointer' }} />
|
||||
</td>
|
||||
|
||||
{/* Avatar + Name */}
|
||||
<td className="px-4 py-3.5">
|
||||
<div className="flex items-center gap-3 cursor-pointer group" onClick={() => navigate(`/admin/users/${user.uuid}`)}>
|
||||
<Avatar name={user.name} id={user.id} />
|
||||
<div className="min-w-0">
|
||||
<p className="font-medium text-slate-800 dark:text-slate-200 truncate max-w-36 group-hover:text-primary-600 dark:group-hover:text-primary-400 transition-colors">
|
||||
{highlight(user.name, search) || '—'}
|
||||
</p>
|
||||
<p className="text-[11px] text-slate-400 dark:text-slate-500">#{user.id}</p>
|
||||
<td>
|
||||
<div className="cell-user">
|
||||
<UserAvatar name={user.name} id={user.id} />
|
||||
<div>
|
||||
<b style={{ cursor: 'pointer' }} onClick={() => navigate(`/admin/users/${user.uuid}`)}>
|
||||
{user.name || '—'}
|
||||
</b>
|
||||
<br /><small>#{user.id}</small>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
{/* Mobile */}
|
||||
<td className="px-4 py-3.5 hidden sm:table-cell">
|
||||
<span className="font-mono text-xs text-slate-600 dark:text-slate-400" dir="ltr">
|
||||
{highlight(user.mobile_number, search) || maskMobile(user.mobile_number)}
|
||||
</span>
|
||||
<td style={{ fontFamily: 'monospace', direction: 'ltr', textAlign: 'right' }}>
|
||||
{user.mobile_number}
|
||||
</td>
|
||||
|
||||
{/* Email */}
|
||||
<td className="px-4 py-3.5 hidden md:table-cell">
|
||||
<span className="text-xs text-slate-500 dark:text-slate-400 truncate max-w-44 block">
|
||||
{user.email ? highlight(user.email, search) : '—'}
|
||||
</span>
|
||||
</td>
|
||||
|
||||
{/* Role */}
|
||||
<td className="px-4 py-3.5"><RoleBadge roles={user.roles} /></td>
|
||||
|
||||
{/* Status */}
|
||||
<td className="px-4 py-3.5 hidden sm:table-cell"><ActiveBadge active={user.is_active} /></td>
|
||||
|
||||
{/* Date */}
|
||||
<td className="px-4 py-3.5 hidden lg:table-cell text-xs text-slate-500 dark:text-slate-400 whitespace-nowrap">
|
||||
{formatDate(user.created_at)}
|
||||
</td>
|
||||
|
||||
{/* Actions dropdown */}
|
||||
<td className="px-4 py-3.5" onClick={(e) => e.stopPropagation()}>
|
||||
<div className="relative flex justify-end" data-menu>
|
||||
<button
|
||||
onClick={() => setActiveMenu(activeMenu === user.uuid ? null : user.uuid)}
|
||||
className="w-7 h-7 flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
|
||||
data-menu
|
||||
>
|
||||
<EllipsisVerticalIcon className="w-4 h-4" />
|
||||
<td><RoleBadge roles={user.roles} /></td>
|
||||
<td className="muted">{formatDate(user.created_at)}</td>
|
||||
<td><ActiveBadge active={user.is_active} /></td>
|
||||
<td>
|
||||
<div className="row-actions">
|
||||
<button className="mini-btn" title="مشاهده"
|
||||
onClick={() => navigate(`/admin/users/${user.uuid}`)}>
|
||||
<EyeIcon style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
<button className="mini-btn" title="تغییر نقش"
|
||||
onClick={() => setRoleTarget(user)}>
|
||||
<ShieldCheckIcon style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
<button className="mini-btn" title={user.is_active ? 'غیرفعال کردن' : 'فعالسازی'}
|
||||
onClick={() => toggleStatusMut.mutate(user.uuid)} disabled={toggleStatusMut.isPending}>
|
||||
{user.is_active
|
||||
? <XCircleIcon style={{ width: 16, height: 16 }} />
|
||||
: <CheckCircleIcon style={{ width: 16, height: 16 }} />}
|
||||
</button>
|
||||
<button className="mini-btn danger" title="حذف" onClick={() => setDeleteTarget(user)}>
|
||||
<TrashIcon style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
|
||||
{activeMenu === user.uuid && (
|
||||
<div className="absolute left-0 top-8 z-30 w-48 cp-card shadow-2xl border border-slate-200 dark:border-gray-700 py-1.5 animate-scale-in" data-menu>
|
||||
<button
|
||||
onClick={() => { navigate(`/admin/users/${user.uuid}`); setActiveMenu(null); }}
|
||||
className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<EyeIcon className="w-4 h-4 text-slate-400 shrink-0" />مشاهده پروفایل
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { navigate(`/admin/users/${user.uuid}?edit=1`); setActiveMenu(null); }}
|
||||
className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<PencilIcon className="w-4 h-4 text-slate-400 shrink-0" />ویرایش اطلاعات
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { setRoleTarget(user); setActiveMenu(null); }}
|
||||
className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors"
|
||||
>
|
||||
<ShieldCheckIcon className="w-4 h-4 text-slate-400 shrink-0" />تغییر نقش
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { toggleStatusMut.mutate(user.uuid); setActiveMenu(null); }}
|
||||
disabled={toggleStatusMut.isPending}
|
||||
className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 transition-colors disabled:opacity-50"
|
||||
>
|
||||
{user.is_active
|
||||
? <XCircleIcon className="w-4 h-4 text-orange-400 shrink-0" />
|
||||
: <CheckCircleIcon className="w-4 h-4 text-green-500 shrink-0" />
|
||||
}
|
||||
{user.is_active ? 'غیرفعال کردن' : 'فعالسازی'}
|
||||
</button>
|
||||
<div className="border-t border-slate-100 dark:border-gray-700 my-1" />
|
||||
<button
|
||||
onClick={() => { setDeleteTarget(user); setActiveMenu(null); }}
|
||||
className="w-full flex items-center gap-2.5 px-3 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
|
||||
>
|
||||
<TrashIcon className="w-4 h-4 shrink-0" />حذف کاربر
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
@@ -627,13 +439,10 @@ export default function UsersPage() {
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="px-4">
|
||||
<Pagination page={page} total={total} limit={limit} onPageChange={setPage} />
|
||||
</div>
|
||||
<Pagination page={page} total={total} limit={limit} onPageChange={setPage} />
|
||||
</div>
|
||||
|
||||
{/* Delete confirm */}
|
||||
{/* Dialogs */}
|
||||
<ConfirmDialog
|
||||
open={!!deleteTarget}
|
||||
title="حذف کاربر"
|
||||
@@ -645,11 +454,10 @@ export default function UsersPage() {
|
||||
onCancel={() => setDeleteTarget(null)}
|
||||
/>
|
||||
|
||||
{/* Bulk delete confirm */}
|
||||
<ConfirmDialog
|
||||
open={confirmBulkDel}
|
||||
title="حذف گروهی"
|
||||
message={`آیا از حذف ${formatNumber(selected.length)} کاربر انتخابشده اطمینان دارید؟ این عمل قابل بازگشت نیست.`}
|
||||
message={`آیا از حذف ${formatNumber(selected.length)} کاربر انتخابشده اطمینان دارید؟`}
|
||||
confirmLabel={`حذف ${formatNumber(selected.length)} کاربر`}
|
||||
danger
|
||||
loading={bulkDeleting}
|
||||
@@ -657,7 +465,6 @@ export default function UsersPage() {
|
||||
onCancel={() => setConfirmBulkDel(false)}
|
||||
/>
|
||||
|
||||
{/* Role change modal */}
|
||||
{roleTarget && (
|
||||
<ChangeRoleModal
|
||||
user={roleTarget}
|
||||
|
||||
@@ -1,12 +1,37 @@
|
||||
import { create } from 'zustand';
|
||||
import { persist } from 'zustand/middleware';
|
||||
|
||||
export const HUES = [
|
||||
{ name: 'آبی پزشکی', h: 256, c: 0.15 },
|
||||
{ name: 'فیروزهای', h: 205, c: 0.12 },
|
||||
{ name: 'سبز سلامت', h: 162, c: 0.13 },
|
||||
{ name: 'بنفش', h: 295, c: 0.15 },
|
||||
{ name: 'نیلی', h: 272, c: 0.16 },
|
||||
] as const;
|
||||
|
||||
export type BrandHue = (typeof HUES)[number];
|
||||
|
||||
interface UiState {
|
||||
sidebarOpen: boolean;
|
||||
darkMode: boolean;
|
||||
density: 'comfortable' | 'compact';
|
||||
brandHue: BrandHue;
|
||||
settingsPanelOpen: boolean;
|
||||
toggleSidebar: () => void;
|
||||
setSidebarOpen: (open: boolean) => void;
|
||||
toggleDarkMode: () => void;
|
||||
setDensity: (density: 'comfortable' | 'compact') => void;
|
||||
setBrandHue: (hue: BrandHue) => void;
|
||||
toggleSettingsPanel: () => void;
|
||||
}
|
||||
|
||||
function applyTheme(state: Pick<UiState, 'darkMode' | 'density' | 'brandHue'>) {
|
||||
const root = document.documentElement;
|
||||
root.classList.toggle('dark', state.darkMode);
|
||||
root.setAttribute('data-theme', state.darkMode ? 'dark' : 'light');
|
||||
root.setAttribute('data-density', state.density);
|
||||
root.style.setProperty('--brand-h', String(state.brandHue.h));
|
||||
root.style.setProperty('--brand-c', String(state.brandHue.c));
|
||||
}
|
||||
|
||||
export const useUiStore = create<UiState>()(
|
||||
@@ -14,19 +39,40 @@ export const useUiStore = create<UiState>()(
|
||||
(set, get) => ({
|
||||
sidebarOpen: true,
|
||||
darkMode: false,
|
||||
density: 'comfortable',
|
||||
brandHue: HUES[0],
|
||||
settingsPanelOpen: false,
|
||||
|
||||
toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })),
|
||||
setSidebarOpen: (open) => set({ sidebarOpen: open }),
|
||||
|
||||
toggleDarkMode: () => {
|
||||
const next = !get().darkMode;
|
||||
set({ darkMode: next });
|
||||
document.documentElement.classList.toggle('dark', next);
|
||||
applyTheme({ ...get(), darkMode: next });
|
||||
},
|
||||
|
||||
setDensity: (density) => {
|
||||
set({ density });
|
||||
applyTheme({ ...get(), density });
|
||||
},
|
||||
|
||||
setBrandHue: (brandHue) => {
|
||||
set({ brandHue });
|
||||
applyTheme({ ...get(), brandHue });
|
||||
},
|
||||
|
||||
toggleSettingsPanel: () => set((s) => ({ settingsPanelOpen: !s.settingsPanelOpen })),
|
||||
}),
|
||||
{
|
||||
name: 'clinicpro-ui',
|
||||
onRehydrateStorage: () => (state) => {
|
||||
if (state?.darkMode) {
|
||||
document.documentElement.classList.add('dark');
|
||||
if (state) {
|
||||
applyTheme({
|
||||
darkMode: state.darkMode ?? false,
|
||||
density: state.density ?? 'comfortable',
|
||||
brandHue: state.brandHue ?? HUES[0],
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
+566
-87
@@ -5,149 +5,628 @@
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--color-primary-50: #f5f3ff;
|
||||
--color-primary-100: #ede9fe;
|
||||
--color-primary-200: #ddd6fe;
|
||||
--color-primary-300: #c4b5fd;
|
||||
--color-primary-400: #a78bfa;
|
||||
--color-primary-500: #8b5cf6;
|
||||
--color-primary-600: #7c3aed;
|
||||
--color-primary-700: #6d28d9;
|
||||
--color-primary-800: #5b21b6;
|
||||
--color-primary-900: #4c1d95;
|
||||
|
||||
--font-sans: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
|
||||
}
|
||||
|
||||
*, *::before, *::after {
|
||||
font-family: var(--font-sans);
|
||||
/* ── Template Design System Variables ─────────────────────────── */
|
||||
:root {
|
||||
--brand-h: 256;
|
||||
--brand-c: 0.15;
|
||||
--bg: #eef2f8;
|
||||
--bg-2: #e6ecf4;
|
||||
--surface: #ffffff;
|
||||
--surface-2: #f6f8fc;
|
||||
--surface-3: #eef2f8;
|
||||
--border: #e4e9f1;
|
||||
--border-2: #d6dde8;
|
||||
--text: #0f1b2e;
|
||||
--text-2: #56657c;
|
||||
--text-3: #8a98ad;
|
||||
--primary: oklch(0.55 var(--brand-c) var(--brand-h));
|
||||
--primary-600: oklch(0.49 var(--brand-c) var(--brand-h));
|
||||
--primary-700: oklch(0.43 var(--brand-c) var(--brand-h));
|
||||
--primary-soft: oklch(0.95 0.03 var(--brand-h));
|
||||
--primary-soft2: oklch(0.90 0.05 var(--brand-h));
|
||||
--on-primary: #ffffff;
|
||||
--success: #15a35a;
|
||||
--success-bg: #e6f6ed;
|
||||
--warning: #d98a09;
|
||||
--warning-bg: #fcf2df;
|
||||
--danger: #e0394a;
|
||||
--danger-bg: #fdebed;
|
||||
--info: #2b86d8;
|
||||
--info-bg: #e7f1fb;
|
||||
--violet: #7c5cf0;
|
||||
--violet-bg: #efeafe;
|
||||
--ring: color-mix(in oklch, var(--primary) 32%, transparent);
|
||||
--shadow-sm: 0 1px 2px rgba(15,27,46,.06), 0 1px 3px rgba(15,27,46,.05);
|
||||
--shadow: 0 2px 6px rgba(15,27,46,.06), 0 8px 24px rgba(15,27,46,.06);
|
||||
--shadow-lg: 0 12px 32px rgba(15,27,46,.12), 0 4px 10px rgba(15,27,46,.06);
|
||||
--r-xs: 7px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px;
|
||||
--gap: 20px;
|
||||
--card-pad: 22px;
|
||||
--row-h: 56px;
|
||||
--sidebar-w: 252px;
|
||||
--topbar-h: 64px;
|
||||
--ease: cubic-bezier(.22,.61,.36,1);
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
[data-density="compact"] {
|
||||
--gap: 14px;
|
||||
--card-pad: 16px;
|
||||
--row-h: 46px;
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--bg: #080d16;
|
||||
--bg-2: #0b1220;
|
||||
--surface: #111a29;
|
||||
--surface-2: #16202f;
|
||||
--surface-3: #1b2738;
|
||||
--border: #243042;
|
||||
--border-2: #2e3c52;
|
||||
--text: #e9eef7;
|
||||
--text-2: #9eb0c6;
|
||||
--text-3: #67788e;
|
||||
--primary: oklch(0.66 var(--brand-c) var(--brand-h));
|
||||
--primary-600: oklch(0.60 var(--brand-c) var(--brand-h));
|
||||
--primary-700: oklch(0.54 var(--brand-c) var(--brand-h));
|
||||
--primary-soft: color-mix(in oklch, var(--primary) 16%, var(--surface));
|
||||
--primary-soft2: color-mix(in oklch, var(--primary) 26%, var(--surface));
|
||||
--on-primary: #07101f;
|
||||
--success-bg: color-mix(in oklch, var(--success) 18%, var(--surface));
|
||||
--warning-bg: color-mix(in oklch, var(--warning) 18%, var(--surface));
|
||||
--danger-bg: color-mix(in oklch, var(--danger) 18%, var(--surface));
|
||||
--info-bg: color-mix(in oklch, var(--info) 18%, var(--surface));
|
||||
--violet-bg: color-mix(in oklch, var(--violet) 20%, var(--surface));
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,.4);
|
||||
--shadow: 0 2px 8px rgba(0,0,0,.4), 0 12px 30px rgba(0,0,0,.35);
|
||||
--shadow-lg: 0 18px 44px rgba(0,0,0,.55);
|
||||
}
|
||||
|
||||
/* ── Base ─────────────────────────────────────────────────────── */
|
||||
*, *::before, *::after { font-family: var(--font-sans); box-sizing: border-box; }
|
||||
html { scroll-behavior: smooth; }
|
||||
body {
|
||||
direction: rtl;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
font-size: 15px;
|
||||
line-height: 1.6;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
transition: background .3s var(--ease), color .3s var(--ease);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ── Scrollbar ──────────────────────────────── */
|
||||
::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
/* ── Scrollbar ──────────────────────────────────────────────────*/
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
||||
.dark ::-webkit-scrollbar-thumb { background: #334155; }
|
||||
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
||||
.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--text-3); }
|
||||
|
||||
/* ── Animations ─────────────────────────────── */
|
||||
@keyframes scale-in {
|
||||
from { opacity: 0; transform: scale(0.96) translateY(-4px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
@keyframes slide-up {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
/* ── Animations ─────────────────────────────────────────────────*/
|
||||
@keyframes scale-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }
|
||||
@keyframes slide-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
|
||||
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
|
||||
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } }
|
||||
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.97); } }
|
||||
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } }
|
||||
@keyframes slideup { from { opacity: 0; transform: translateY(16px); } }
|
||||
@keyframes growbar { from { width: 0; } }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
.animate-scale-in { animation: scale-in 200ms cubic-bezier(0.34, 1.2, 0.64, 1) both; }
|
||||
.animate-slide-up { animation: slide-up 200ms ease both; }
|
||||
.animate-fade-in { animation: fade-in 150ms ease both; }
|
||||
.animate-slide-up { animation: slide-up 200ms ease both; }
|
||||
.animate-fade-in { animation: fade-in 150ms ease both; }
|
||||
.fade-in { animation: fadein .4s var(--ease); }
|
||||
|
||||
/* ── Skeleton shimmer ───────────────────────── */
|
||||
/* ── Skeleton shimmer ───────────────────────────────────────────*/
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
|
||||
background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.4s infinite;
|
||||
}
|
||||
.dark .skeleton {
|
||||
background: linear-gradient(90deg, #1e293b 25%, #334155 50%, #1e293b 75%);
|
||||
background-size: 200% 100%;
|
||||
}
|
||||
|
||||
/* ── Utility classes ────────────────────────── */
|
||||
/* ── Utility ────────────────────────────────────────────────────*/
|
||||
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
|
||||
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
|
||||
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
|
||||
|
||||
/* ── Admin component tokens ─────────────────── */
|
||||
/* ── Admin component tokens ─────────────────────────────────────*/
|
||||
@layer components {
|
||||
/* Card / panel */
|
||||
|
||||
.cp-card {
|
||||
@apply bg-white dark:bg-gray-900 rounded-2xl border border-slate-200/70 dark:border-gray-700/50 shadow-sm;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
/* Form inputs */
|
||||
.cp-input {
|
||||
@apply w-full h-10 bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
|
||||
rounded-xl px-3 text-sm text-slate-900 dark:text-slate-100
|
||||
placeholder-slate-400 dark:placeholder-slate-500
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
|
||||
transition-colors;
|
||||
width: 100%; height: 42px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--r-sm);
|
||||
padding: 0 14px;
|
||||
font-size: 14px; color: var(--text);
|
||||
outline: none;
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
.cp-input:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
|
||||
.cp-input::placeholder { color: var(--text-3); }
|
||||
|
||||
.cp-textarea {
|
||||
@apply bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
|
||||
rounded-xl px-3 py-2 text-sm text-slate-900 dark:text-slate-100
|
||||
placeholder-slate-400 dark:placeholder-slate-500
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
|
||||
transition-colors w-full;
|
||||
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
|
||||
padding: 10px 14px; font-size: 14px; color: var(--text); outline: none; width: 100%;
|
||||
transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
.cp-textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
|
||||
.cp-textarea::placeholder { color: var(--text-3); }
|
||||
|
||||
.cp-select {
|
||||
@apply w-full h-10 bg-white dark:bg-gray-800 border border-slate-300 dark:border-gray-600
|
||||
rounded-xl px-3 text-sm text-slate-900 dark:text-slate-100
|
||||
focus:outline-none focus:ring-2 focus:ring-primary-500/50 focus:border-primary-500
|
||||
transition-colors;
|
||||
width: 100%; height: 42px;
|
||||
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
|
||||
padding: 0 14px; font-size: 14px; color: var(--text);
|
||||
outline: none; transition: border-color .15s, box-shadow .15s;
|
||||
}
|
||||
.cp-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
|
||||
|
||||
.cp-label {
|
||||
@apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5;
|
||||
display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* Buttons — base styles inlined to avoid @apply on component classes */
|
||||
.cp-btn-primary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white shadow-sm;
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 42px; padding: 0 18px; border-radius: var(--r-sm);
|
||||
font-size: 14px; font-weight: 700; white-space: nowrap; border: none; cursor: pointer;
|
||||
background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 14px var(--ring);
|
||||
transition: background .16s;
|
||||
}
|
||||
.cp-btn-primary:hover { background: var(--primary-600); }
|
||||
.cp-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
|
||||
|
||||
.cp-btn-secondary {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-slate-100 dark:bg-gray-700 hover:bg-slate-200 dark:hover:bg-gray-600 text-slate-700 dark:text-slate-200;
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 42px; padding: 0 18px; border-radius: var(--r-sm);
|
||||
font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer;
|
||||
background: var(--surface); color: var(--text); border: 1px solid var(--border);
|
||||
transition: .16s;
|
||||
}
|
||||
.cp-btn-secondary:hover { background: var(--surface-2); border-color: var(--border-2); }
|
||||
.cp-btn-secondary:disabled { opacity: .5; cursor: not-allowed; }
|
||||
|
||||
.cp-btn-danger {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed bg-red-600 hover:bg-red-700 active:bg-red-800 text-white shadow-sm;
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 42px; padding: 0 18px; border-radius: var(--r-sm);
|
||||
font-size: 14px; font-weight: 700; white-space: nowrap; border: none; cursor: pointer;
|
||||
background: var(--danger); color: #fff; transition: .16s;
|
||||
}
|
||||
.cp-btn-danger:hover { filter: brightness(.92); }
|
||||
.cp-btn-danger:disabled { opacity: .5; cursor: not-allowed; }
|
||||
|
||||
.cp-btn-ghost {
|
||||
@apply inline-flex items-center justify-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-600 dark:text-slate-300;
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 42px; padding: 0 18px; border-radius: var(--r-sm);
|
||||
font-size: 14px; font-weight: 600; white-space: nowrap; border: none; cursor: pointer;
|
||||
background: transparent; color: var(--text-2); transition: .16s;
|
||||
}
|
||||
.cp-btn-ghost:hover { background: var(--surface-2); color: var(--text); }
|
||||
.cp-btn-ghost:disabled { opacity: .5; cursor: not-allowed; }
|
||||
|
||||
/* Table action buttons */
|
||||
.cp-action-view { @apply p-1.5 rounded-lg text-slate-400 hover:text-blue-600 hover:bg-blue-50 dark:hover:bg-blue-500/10 dark:hover:text-blue-400 transition-colors; }
|
||||
.cp-action-edit { @apply p-1.5 rounded-lg text-slate-400 hover:text-primary-600 hover:bg-primary-50 dark:hover:bg-primary-500/10 dark:hover:text-primary-400 transition-colors; }
|
||||
.cp-action-delete { @apply p-1.5 rounded-lg text-slate-400 hover:text-red-600 hover:bg-red-50 dark:hover:bg-red-500/10 dark:hover:text-red-400 transition-colors; }
|
||||
.cp-action-approve { @apply p-1.5 rounded-lg text-slate-400 hover:text-green-600 hover:bg-green-50 dark:hover:bg-green-500/10 dark:hover:text-green-400 transition-colors; }
|
||||
.cp-action-view { padding: 6px; border-radius: 8px; color: var(--text-3); transition: .14s; cursor: pointer; }
|
||||
.cp-action-view:hover { background: var(--info-bg); color: var(--info); }
|
||||
.cp-action-edit { padding: 6px; border-radius: 8px; color: var(--text-3); transition: .14s; cursor: pointer; }
|
||||
.cp-action-edit:hover { background: var(--primary-soft); color: var(--primary-700); }
|
||||
.cp-action-delete { padding: 6px; border-radius: 8px; color: var(--text-3); transition: .14s; cursor: pointer; }
|
||||
.cp-action-delete:hover { background: var(--danger-bg); color: var(--danger); }
|
||||
.cp-action-approve{ padding: 6px; border-radius: 8px; color: var(--text-3); transition: .14s; cursor: pointer; }
|
||||
.cp-action-approve:hover{ background: var(--success-bg); color: var(--success); }
|
||||
|
||||
/* Stat card — cp-card inlined to avoid @apply on component class */
|
||||
.cp-stat {
|
||||
@apply bg-white dark:bg-gray-900 rounded-2xl border border-slate-200/70 dark:border-gray-700/50 shadow-sm p-5 flex items-start gap-4;
|
||||
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
|
||||
padding: 18px; box-shadow: var(--shadow-sm);
|
||||
display: flex; align-items: flex-start; gap: 16px;
|
||||
transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
|
||||
}
|
||||
.cp-stat:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-2); }
|
||||
.cp-stat-icon {
|
||||
@apply w-11 h-11 rounded-xl flex items-center justify-center shrink-0;
|
||||
width: 40px; height: 40px; border-radius: 12px;
|
||||
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Section heading inside a card */
|
||||
.cp-section-title {
|
||||
@apply text-sm font-semibold text-slate-700 dark:text-slate-200 mb-4;
|
||||
}
|
||||
.cp-section-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 16px; }
|
||||
|
||||
/* Info rows (label + value pairs) */
|
||||
.cp-info-row {
|
||||
@apply flex items-center justify-between py-2.5 border-b border-slate-100 dark:border-gray-700/50 last:border-0;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 10px 0; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.cp-info-label { @apply text-xs text-slate-500 dark:text-slate-400; }
|
||||
.cp-info-value { @apply text-sm font-medium text-slate-800 dark:text-slate-200; }
|
||||
.cp-info-row:last-child { border-bottom: none; }
|
||||
.cp-info-label { font-size: 12px; color: var(--text-3); }
|
||||
.cp-info-value { font-size: 13px; font-weight: 600; color: var(--text); }
|
||||
}
|
||||
|
||||
/* ══ Template component classes ══════════════════════════════════*/
|
||||
|
||||
/* ── Layout ──────────────────────────────────────────────────── */
|
||||
.app { display: flex; min-height: 100vh; }
|
||||
.main {
|
||||
flex: 1; min-width: 0; display: flex; flex-direction: column;
|
||||
margin-right: var(--sidebar-w);
|
||||
transition: margin .28s var(--ease);
|
||||
}
|
||||
.app[data-collapsed="true"] .main { margin-right: 76px; }
|
||||
.content { padding: var(--gap); max-width: 1480px; width: 100%; margin: 0 auto; }
|
||||
|
||||
/* ── Sidebar ─────────────────────────────────────────────────── */
|
||||
.sidebar {
|
||||
position: fixed; top: 0; bottom: 0; right: 0;
|
||||
width: var(--sidebar-w);
|
||||
background: var(--surface);
|
||||
border-left: 1px solid var(--border);
|
||||
display: flex; flex-direction: column;
|
||||
z-index: 40;
|
||||
transition: width .28s var(--ease);
|
||||
}
|
||||
.app[data-collapsed="true"] .sidebar { width: 76px; }
|
||||
.sidebar-brand {
|
||||
height: var(--topbar-h); flex: none;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 0 20px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.brand-logo {
|
||||
width: 38px; height: 38px; flex: none; border-radius: 11px;
|
||||
background: linear-gradient(150deg, var(--primary), var(--primary-700));
|
||||
display: grid; place-items: center; color: #fff;
|
||||
box-shadow: 0 6px 16px var(--ring);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.brand-text { display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; white-space: nowrap; }
|
||||
.brand-text b { font-size: 16px; letter-spacing: -.2px; color: var(--text); }
|
||||
.brand-text span { font-size: 11.5px; color: var(--text-3); }
|
||||
.app[data-collapsed="true"] .brand-text { display: none; }
|
||||
|
||||
.nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 12px; }
|
||||
.nav-group { margin-bottom: 6px; }
|
||||
.nav-label {
|
||||
font-size: 11px; font-weight: 700; color: var(--text-3);
|
||||
padding: 14px 12px 8px; letter-spacing: .2px; display: block;
|
||||
}
|
||||
.app[data-collapsed="true"] .nav-label { text-align: center; padding: 12px 0 6px; font-size: 9px; }
|
||||
.nav-item {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 9px 12px; border-radius: var(--r-sm);
|
||||
color: var(--text-2); font-size: 14px; font-weight: 500;
|
||||
position: relative; width: 100%; text-align: start;
|
||||
transition: background .15s, color .15s;
|
||||
white-space: nowrap; text-decoration: none;
|
||||
background: none; border: none; cursor: pointer;
|
||||
}
|
||||
.nav-item svg { flex-shrink: 0; }
|
||||
.nav-item:hover { background: var(--surface-2); color: var(--text); }
|
||||
.nav-item.active { background: var(--primary-soft); color: var(--primary-700); font-weight: 700; }
|
||||
.nav-item.active::before {
|
||||
content: ""; position: absolute; right: -12px; top: 50%; transform: translateY(-50%);
|
||||
width: 4px; height: 22px; border-radius: 99px; background: var(--primary);
|
||||
}
|
||||
.nav-item .badge-count {
|
||||
margin-inline-start: auto; background: var(--primary); color: var(--on-primary);
|
||||
font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; padding: 0 6px;
|
||||
border-radius: 99px; display: grid; place-items: center;
|
||||
}
|
||||
.app[data-collapsed="true"] .nav-item { justify-content: center; padding: 10px; }
|
||||
.app[data-collapsed="true"] .nav-item > span,
|
||||
.app[data-collapsed="true"] .nav-item .badge-count { display: none; }
|
||||
.app[data-collapsed="true"] .nav-item.active::before { display: none; }
|
||||
|
||||
.sidebar-foot { flex: none; border-top: 1px solid var(--border); padding: 12px; }
|
||||
.user-chip {
|
||||
display: flex; align-items: center; gap: 11px; padding: 8px; border-radius: var(--r-sm);
|
||||
transition: background .15s; cursor: pointer;
|
||||
}
|
||||
.user-chip:hover { background: var(--surface-2); }
|
||||
.app[data-collapsed="true"] .user-chip .user-meta { display: none; }
|
||||
.user-meta { display: flex; flex-direction: column; line-height: 1.3; overflow: hidden; flex: 1; min-width: 0; }
|
||||
.user-meta b { font-size: 13.5px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.user-meta span { font-size: 11.5px; color: var(--text-3); }
|
||||
.cp-avatar {
|
||||
width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
|
||||
display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 13px;
|
||||
background: linear-gradient(145deg, var(--primary), var(--primary-700));
|
||||
overflow: hidden;
|
||||
}
|
||||
.cp-avatar.sm { width: 28px; height: 28px; font-size: 11px; }
|
||||
.cp-avatar.lg { width: 96px; height: 96px; font-size: 32px; border-radius: 20px; }
|
||||
|
||||
/* ── Topbar ──────────────────────────────────────────────────── */
|
||||
.topbar {
|
||||
height: var(--topbar-h); flex: none; position: sticky; top: 0; z-index: 30;
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 0 var(--gap);
|
||||
background: color-mix(in srgb, var(--bg) 85%, transparent);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.icon-btn {
|
||||
width: 40px; height: 40px; border-radius: var(--r-sm); flex-shrink: 0;
|
||||
display: grid; place-items: center; color: var(--text-2);
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
position: relative; transition: .15s; cursor: pointer;
|
||||
}
|
||||
.icon-btn:hover { color: var(--text); border-color: var(--border-2); background: var(--surface-2); }
|
||||
.icon-btn .dot {
|
||||
position: absolute; top: 8px; right: 9px;
|
||||
width: 8px; height: 8px; border-radius: 50%;
|
||||
background: var(--danger); border: 2px solid var(--surface);
|
||||
}
|
||||
.topbar-search {
|
||||
display: flex; align-items: center; gap: 9px; flex: 1; max-width: 360px;
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: var(--r-pill); padding: 0 14px; height: 42px; color: var(--text-3);
|
||||
transition: .18s;
|
||||
}
|
||||
.topbar-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
|
||||
.topbar-search input {
|
||||
border: none; outline: none; background: none; flex: 1; font-size: 14px; color: var(--text);
|
||||
font-family: inherit;
|
||||
}
|
||||
.topbar-search input::placeholder { color: var(--text-3); }
|
||||
.topbar-search kbd {
|
||||
font-size: 11px; color: var(--text-3); font-family: inherit;
|
||||
background: var(--surface-3); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px;
|
||||
}
|
||||
.topbar-crumbs { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; }
|
||||
.topbar-crumbs b { color: var(--text); }
|
||||
|
||||
/* ── Generic Card ────────────────────────────────────────────── */
|
||||
.card {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
|
||||
}
|
||||
.card-pad { padding: var(--card-pad); }
|
||||
.card-head {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
||||
padding: var(--card-pad) var(--card-pad) 0;
|
||||
}
|
||||
.card-head h3 { font-size: 16px; font-weight: 700; color: var(--text); }
|
||||
.section-title { font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
|
||||
.muted { color: var(--text-3); }
|
||||
.link { color: var(--primary); font-weight: 600; font-size: 13px; text-decoration: none; }
|
||||
.link:hover { color: var(--primary-700); }
|
||||
.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
|
||||
.flex { display: flex; align-items: center; }
|
||||
.between { display: flex; align-items: center; justify-content: space-between; }
|
||||
|
||||
/* ── Stat cards ──────────────────────────────────────────────── */
|
||||
.stat {
|
||||
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
|
||||
padding: 18px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
|
||||
transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s;
|
||||
}
|
||||
.stat:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-2); }
|
||||
.stat .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 14px; }
|
||||
.stat .lbl { color: var(--text-2); font-size: 13px; font-weight: 500; }
|
||||
.stat .val { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 4px 0 2px; color: var(--text); }
|
||||
.stat .hint { font-size: 11.5px; color: var(--text-3); }
|
||||
.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap); margin-bottom: var(--gap); }
|
||||
.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
|
||||
.trend.up { color: var(--success); background: var(--success-bg); }
|
||||
.trend.down { color: var(--danger); background: var(--danger-bg); }
|
||||
|
||||
/* ── Badges ──────────────────────────────────────────────────── */
|
||||
.badge {
|
||||
display: inline-flex; align-items: center; gap: 5px;
|
||||
font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; white-space: nowrap;
|
||||
}
|
||||
.badge .bdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
|
||||
.badge.green { color: var(--success); background: var(--success-bg); }
|
||||
.badge.amber { color: var(--warning); background: var(--warning-bg); }
|
||||
.badge.red { color: var(--danger); background: var(--danger-bg); }
|
||||
.badge.blue { color: var(--info); background: var(--info-bg); }
|
||||
.badge.violet { color: var(--violet); background: var(--violet-bg); }
|
||||
.badge.gray { color: var(--text-2); background: var(--surface-3); }
|
||||
|
||||
/* ── Buttons ─────────────────────────────────────────────────── */
|
||||
.btn {
|
||||
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
||||
height: 42px; padding: 0 18px; border-radius: var(--r-sm);
|
||||
font-size: 14px; font-weight: 700; transition: .16s var(--ease); white-space: nowrap;
|
||||
border: 1px solid transparent; cursor: pointer; font-family: inherit;
|
||||
}
|
||||
.btn:active { transform: translateY(1px); }
|
||||
.btn.primary { background: var(--primary); color: var(--on-primary); box-shadow: 0 4px 14px var(--ring); }
|
||||
.btn.primary:hover { background: var(--primary-600); }
|
||||
.btn.ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
|
||||
.btn.ghost:hover { background: var(--surface-2); border-color: var(--border-2); }
|
||||
.btn.soft { background: var(--primary-soft); color: var(--primary-700); border-color: transparent; }
|
||||
.btn.soft:hover { background: var(--primary-soft2); }
|
||||
.btn.danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }
|
||||
.btn.danger:hover { filter: brightness(.97); }
|
||||
.btn.sm { height: 36px; padding: 0 14px; font-size: 13px; }
|
||||
.btn:disabled { opacity: .5; cursor: not-allowed; }
|
||||
|
||||
/* ── Tables ──────────────────────────────────────────────────── */
|
||||
.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--border); }
|
||||
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; }
|
||||
table.t thead th {
|
||||
text-align: start; font-size: 12px; font-weight: 700; color: var(--text-3);
|
||||
padding: 14px 16px 12px; white-space: nowrap; border-bottom: 1px solid var(--border);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
table.t tbody td {
|
||||
padding: 0 16px; height: var(--row-h); border-bottom: 1px solid var(--border);
|
||||
vertical-align: middle; color: var(--text);
|
||||
}
|
||||
table.t tbody tr { transition: background .12s; }
|
||||
table.t tbody tr:hover { background: var(--surface-2); }
|
||||
table.t tbody tr:last-child td { border-bottom: none; }
|
||||
.cell-user { display: flex; align-items: center; gap: 11px; }
|
||||
.cell-user b { font-weight: 700; font-size: 13.5px; color: var(--text); }
|
||||
.cell-user small { color: var(--text-3); font-size: 11.5px; }
|
||||
.row-actions { display: flex; gap: 6px; opacity: 0; transition: opacity .15s; }
|
||||
table.t tbody tr:hover .row-actions { opacity: 1; }
|
||||
.mini-btn {
|
||||
width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
|
||||
color: var(--text-3); transition: .14s; cursor: pointer; border: none; background: none;
|
||||
}
|
||||
.mini-btn:hover { background: var(--surface-3); color: var(--text); }
|
||||
.mini-btn.danger:hover { background: var(--danger-bg); color: var(--danger); }
|
||||
|
||||
/* ── Toolbar / Fields ────────────────────────────────────────── */
|
||||
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
|
||||
.toolbar .spacer { flex: 1; }
|
||||
.field {
|
||||
display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px;
|
||||
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); color: var(--text-2);
|
||||
transition: .15s;
|
||||
}
|
||||
.field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
|
||||
.field input, .field select { border: none; outline: none; background: none; flex: 1; min-width: 60px; color: var(--text); font-family: inherit; font-size: 14px; }
|
||||
.seg { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 3px; gap: 2px; }
|
||||
.seg button { padding: 7px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--text-2); transition: .14s; cursor: pointer; font-family: inherit; }
|
||||
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
|
||||
|
||||
/* ── Pagination ──────────────────────────────────────────────── */
|
||||
.pagination {
|
||||
display: flex; align-items: center; gap: 6px; padding: 16px 0;
|
||||
justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--border); margin-top: 4px;
|
||||
}
|
||||
.page-btns { display: flex; gap: 4px; }
|
||||
.page-btns button {
|
||||
min-width: 36px; height: 36px; border-radius: 9px; font-weight: 600; font-size: 13px;
|
||||
color: var(--text-2); border: 1px solid transparent; background: none;
|
||||
cursor: pointer; transition: .14s; font-family: inherit;
|
||||
}
|
||||
.page-btns button:hover:not(.on):not(:disabled) { background: var(--surface-2); }
|
||||
.page-btns button.on { background: var(--primary); color: var(--on-primary); }
|
||||
.page-btns button:disabled { opacity: .3; cursor: not-allowed; }
|
||||
|
||||
/* ── Progress bar ────────────────────────────────────────────── */
|
||||
.bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
|
||||
.bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--primary-600)); }
|
||||
|
||||
/* ── Toggle switch ───────────────────────────────────────────── */
|
||||
.switch {
|
||||
width: 44px; height: 26px; border-radius: 99px; background: var(--border-2);
|
||||
position: relative; flex-shrink: 0; transition: background .2s var(--ease); cursor: pointer; display: inline-block;
|
||||
}
|
||||
.switch.on { background: var(--primary); }
|
||||
.switch::after {
|
||||
content: ""; position: absolute; top: 3px; inset-inline-start: 3px;
|
||||
width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm);
|
||||
transition: transform .2s var(--ease);
|
||||
}
|
||||
.switch.on::after { transform: translateX(-18px); }
|
||||
|
||||
/* ── Modal ───────────────────────────────────────────────────── */
|
||||
.overlay {
|
||||
position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px;
|
||||
background: rgba(8,13,22,.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
|
||||
animation: fade-in .2s var(--ease);
|
||||
}
|
||||
.modal {
|
||||
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl);
|
||||
box-shadow: var(--shadow-lg); width: 100%; max-width: 540px; max-height: 90vh;
|
||||
overflow-y: auto; overflow-x: hidden; animation: pop .26s var(--ease);
|
||||
}
|
||||
.modal-head {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 22px 24px; border-bottom: 1px solid var(--border);
|
||||
}
|
||||
.modal-head h2 { font-size: 17px; font-weight: 700; color: var(--text); margin: 0; }
|
||||
.modal-body { padding: 24px; }
|
||||
.modal-foot {
|
||||
display: flex; gap: 10px; padding: 18px 24px; border-top: 1px solid var(--border); justify-content: flex-end;
|
||||
}
|
||||
.settings-panel {
|
||||
width: 360px; height: 100%; overflow-y: auto;
|
||||
animation: slidein .3s var(--ease);
|
||||
border-radius: 0; max-height: 100%;
|
||||
}
|
||||
|
||||
/* ── Form rows ───────────────────────────────────────────────── */
|
||||
.form-row { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
|
||||
.form-row label { font-size: 13px; font-weight: 600; color: var(--text-2); }
|
||||
.input {
|
||||
height: 44px; padding: 0 14px; border-radius: var(--r-sm);
|
||||
background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
|
||||
outline: none; width: 100%; transition: .15s; font-family: inherit; font-size: 14px;
|
||||
}
|
||||
.input:focus { border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 4px var(--ring); }
|
||||
.input.err { border-color: var(--danger); }
|
||||
.slot-select {
|
||||
height: 42px; padding: 0 12px; border-radius: var(--r-sm);
|
||||
background: var(--surface); border: 1px solid var(--border); color: var(--text);
|
||||
outline: none; transition: .15s; font-family: inherit; font-size: 14px;
|
||||
}
|
||||
.slot-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
|
||||
|
||||
/* ── Toast ───────────────────────────────────────────────────── */
|
||||
.toasts {
|
||||
position: fixed; bottom: 22px; left: 22px; z-index: 100;
|
||||
display: flex; flex-direction: column; gap: 10px; pointer-events: none;
|
||||
}
|
||||
.toast {
|
||||
display: flex; align-items: center; gap: 11px; padding: 13px 16px; min-width: 280px;
|
||||
background: var(--surface); border: 1px solid var(--border); border-radius: var(--r);
|
||||
box-shadow: var(--shadow-lg); animation: slideup .3s var(--ease); pointer-events: auto;
|
||||
}
|
||||
.toast .tx { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex-shrink: 0; }
|
||||
|
||||
/* ── Dashboard misc ──────────────────────────────────────────── */
|
||||
.timeline-item { display: flex; gap: 13px; padding: 11px 0; }
|
||||
.timeline-item .tl-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; box-shadow: 0 0 0 4px var(--surface); }
|
||||
.timeline-item .tl-body { flex: 1; min-width: 0; }
|
||||
.timeline-item .tl-body b { font-size: 13.5px; font-weight: 700; color: var(--text); display: block; }
|
||||
.timeline-item .tl-body p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.timeline-item .tl-body time { font-size: 11px; color: var(--text-3); }
|
||||
.tl-connector { width: 1px; background: var(--border); flex-shrink: 0; margin: 0 4px; }
|
||||
|
||||
.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.quick {
|
||||
display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px;
|
||||
border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2);
|
||||
transition: .18s var(--ease); text-align: center; text-decoration: none; cursor: pointer;
|
||||
}
|
||||
.quick:hover { transform: translateY(-3px); border-color: var(--primary); background: var(--surface); box-shadow: var(--shadow); }
|
||||
.quick .qi { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; }
|
||||
.quick b { font-size: 13px; color: var(--text); }
|
||||
|
||||
/* ── Dashboard grid layouts ──────────────────────────────────── */
|
||||
.dash-main { display: grid; grid-template-columns: 360px 1fr; gap: var(--gap); margin-bottom: var(--gap); }
|
||||
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
|
||||
.dash-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
|
||||
|
||||
/* ── Colored avatar (hue-based gradient) ─────────────────────── */
|
||||
.avatar {
|
||||
width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
|
||||
display: grid; place-items: center; font-weight: 700; color: #fff; font-size: 14px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar.sm { width: 32px; height: 32px; font-size: 12px; }
|
||||
.avatar.lg { width: 104px; height: 104px; font-size: 34px; border-radius: 22px; }
|
||||
|
||||
/* ── Responsive ──────────────────────────────────────────────── */
|
||||
.scrim { display: none; }
|
||||
@media (max-width: 1080px) {
|
||||
.stat-grid { grid-template-columns: repeat(3, 1fr); }
|
||||
.dash-main { grid-template-columns: 1fr; }
|
||||
.dash-3 { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.main { margin-right: 0 !important; }
|
||||
.sidebar { transform: translateX(100%); box-shadow: var(--shadow-lg); }
|
||||
.app[data-mobile-open="true"] .sidebar { transform: translateX(0); width: var(--sidebar-w); }
|
||||
.app[data-mobile-open="true"] .scrim {
|
||||
display: block; position: fixed; inset: 0; background: rgba(8,13,22,.5);
|
||||
z-index: 35; backdrop-filter: blur(2px);
|
||||
}
|
||||
.topbar-search { display: none; }
|
||||
.grid-2 { grid-template-columns: 1fr; }
|
||||
}
|
||||
@media (max-width: 560px) {
|
||||
.stat-grid { grid-template-columns: 1fr 1fr; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user