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

refactor: update UI components for consistency and dark mode support

Browse Source 
- Refactored PaymentsPage, RatingsPage, RepresentationDetailPage, RepresentationsPage, SecretariesPage, SettlementsPage, SmsPage, UserDetailPage, and UsersPage to use consistent class names for styling.
- Updated button styles to use new utility classes for primary, secondary, and danger buttons.
- Enhanced dark mode support across various components by adjusting text and background colors.
- Introduced new utility classes for form inputs, labels, and info rows to standardize styling.
- Implemented Zustand for persistent UI state management, including dark mode toggle functionality.
- Updated CSS to include new styles for skeleton loading and animations.
- Added optional dependencies for improved compatibility with different platforms.
This commit is contained in:
hamed
2026-06-10 12:30:14 +03:30
parent 16ae439675
commit 942634c98e
35 changed files with 967 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/components/layout/AdminLayout.tsx
+11 -4
View File
@@ -1,15 +1,22 @@
import React from 'react';
import React, { useEffect } 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);
useEffect(() => {
document.documentElement.classList.toggle('dark', darkMode);
}, [darkMode]);
return (
<div className="flex h-screen overflow-hidden bg-[#f1f5f9]">
<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">
<div className="flex flex-col flex-1 overflow-hidden min-w-0">
<Topbar />
<main className="flex-1 overflow-y-auto p-6">
<main className="flex-1 overflow-y-auto p-5 lg:p-6">
<Outlet />
</main>
</div>
assets/admin/components/layout/Sidebar.tsx
+57 -55
View File
@@ -15,9 +15,7 @@ import {
TagIcon,
DocumentTextIcon,
KeyIcon,
ChevronRightIcon,
ChevronLeftIcon,
MagnifyingGlassIcon,
Bars3Icon,
ArrowLeftOnRectangleIcon,
} from '@heroicons/react/24/outline';
import { useUiStore } from '../../stores/uiStore';
@@ -66,96 +64,100 @@ export default function Sidebar() {
const logout = useAuthStore((s) => s.logout);
const navigate = useNavigate();
const handleLogout = () => {
logout();
navigate('/admin/login');
};
return (
<aside
style={{ transition: 'width 300ms cubic-bezier(0.4,0,0.2,1)' }}
className={`${open ? 'w-[260px]' : 'w-[72px]'} shrink-0 bg-[#0f172a] flex flex-col h-screen overflow-hidden`}
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
`}
>
{/* Logo */}
<div className="flex items-center justify-between px-4 py-5 border-b border-slate-700/50">
{/* ── Header ─────────────────────────────── */}
<div className={`flex items-center h-16 px-3 shrink-0 border-b border-white/[0.06] ${open ? 'gap-3' : 'justify-center'}`}>
{open && (
<span className="text-white font-bold text-lg tracking-tight">ClinicPro</span>
<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>
)}
<button
onClick={toggle}
className="text-slate-400 hover:text-white p-1 rounded-md hover:bg-slate-700/50 transition-colors"
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 ? 'بستن منو' : 'باز کردن منو'}
>
{open ? <ChevronRightIcon className="w-5 h-5" /> : <ChevronLeftIcon className="w-5 h-5" />}
<Bars3Icon className="w-5 h-5" />
</button>
</div>
{/* Search */}
{open && (
<div className="px-3 py-3 border-b border-slate-700/50">
<div className="flex items-center gap-2 bg-slate-800 rounded-lg px-3 py-2">
<MagnifyingGlassIcon className="w-4 h-4 text-slate-400 shrink-0" />
<input
type="text"
placeholder="جستجوی سریع..."
className="bg-transparent text-sm text-slate-300 placeholder-slate-500 outline-none w-full"
/>
</div>
</div>
)}
{/* Navigation */}
<nav className="flex-1 overflow-y-auto py-3 space-y-1 scrollbar-thin">
{sections.map((section) => (
<div key={section.label} className="mb-2">
{open && (
<p className="text-[11px] font-semibold text-slate-500 uppercase tracking-wider px-4 py-1">
{/* ── 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" />
)}
{section.items.map(({ to, icon: Icon, label }) => (
<NavLink
key={to}
to={to}
className={({ isActive }) =>
`flex items-center gap-3 mx-2 px-3 py-2.5 rounded-lg text-sm transition-colors group ${
isActive
? 'bg-primary-500/15 text-primary-400 font-semibold border-r-4 border-primary-500'
: 'text-slate-400 hover:text-slate-200 hover:bg-slate-700/40'
}`
}
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]'}
`}
>
<Icon className="w-5 h-5 shrink-0" />
{open && <span>{label}</span>}
{({ 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>}
</>
)}
</NavLink>
))}
</div>
))}
</nav>
{/* User card */}
<div className="border-t border-slate-700/50 p-3">
{/* ── User footer ────────────────────────── */}
<div className="shrink-0 border-t border-white/[0.06] p-2.5">
{open ? (
<div className="flex items-center gap-3 bg-slate-800 rounded-xl p-3">
<div className="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-bold shrink-0">
<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-white text-sm font-medium truncate">Admin</p>
<p className="text-slate-400 text-xs truncate">مدیر سیستم</p>
<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={handleLogout}
className="text-slate-400 hover:text-red-400 transition-colors"
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-5 h-5" />
<ArrowLeftOnRectangleIcon className="w-4 h-4" />
</button>
</div>
) : (
<button
onClick={handleLogout}
className="w-full flex justify-center py-2 text-slate-400 hover:text-red-400 transition-colors"
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" />
assets/admin/components/layout/Topbar.tsx
+38 -36
View File
@@ -1,53 +1,55 @@
import React from 'react';
import { Bars3Icon, BellIcon } from '@heroicons/react/24/outline';
import { BellIcon, SunIcon, MoonIcon, Bars3Icon } from '@heroicons/react/24/outline';
import { useUiStore } from '../../stores/uiStore';
interface TopbarProps {
pageTitle?: string;
breadcrumbs?: { label: string; to?: string }[];
}
export default function Topbar({ pageTitle, breadcrumbs }: TopbarProps) {
const toggle = useUiStore((s) => s.toggleSidebar);
export default function Topbar() {
const toggleSidebar = useUiStore((s) => s.toggleSidebar);
const darkMode = useUiStore((s) => s.darkMode);
const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
return (
<header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0">
<div className="flex items-center gap-4">
<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>
<div className="flex-1" />
{/* Right side actions */}
<div className="flex items-center gap-1">
{/* Dark mode toggle */}
<button
onClick={toggle}
className="text-gray-500 hover:text-gray-700 p-1 rounded-md hover:bg-gray-100 transition-colors md:hidden"
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 ? 'حالت روشن' : 'حالت تاریک'}
>
<Bars3Icon className="w-5 h-5" />
{darkMode
? <SunIcon className="w-5 h-5 text-amber-400" />
: <MoonIcon className="w-5 h-5" />}
</button>
<div>
{pageTitle && <h2 className="text-base font-semibold text-gray-800">{pageTitle}</h2>}
{breadcrumbs && breadcrumbs.length > 0 && (
<nav className="flex items-center gap-1 text-xs text-gray-500">
{breadcrumbs.map((crumb, i) => (
<React.Fragment key={i}>
{i > 0 && <span>/</span>}
<span className={i === breadcrumbs.length - 1 ? 'text-gray-700 font-medium' : ''}>
{crumb.label}
</span>
</React.Fragment>
))}
</nav>
)}
</div>
</div>
<div className="flex items-center gap-3">
<button className="relative text-gray-500 hover:text-gray-700 p-2 rounded-lg hover:bg-gray-100 transition-colors">
{/* 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-1 right-1 w-2 h-2 bg-red-500 rounded-full" />
<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" />
</button>
<div className="flex items-center gap-2 cursor-pointer">
<div className="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-bold">
{/* 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>
<span className="text-sm font-medium text-gray-700 hidden sm:block">Admin</span>
<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>
</div>
</div>
</header>
assets/admin/components/ui/ConfirmDialog.tsx
+20 -16
View File
@@ -27,39 +27,43 @@ export default function ConfirmDialog({
if (!open) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div className="absolute inset-0 bg-black/40" onClick={onCancel} />
<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 rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6"
style={{ animation: 'scale-in 200ms ease' }}
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-full flex items-center justify-center ${danger ? 'bg-red-100' : 'bg-yellow-100'}`}>
<ExclamationTriangleIcon className={`w-5 h-5 ${danger ? 'text-red-600' : 'text-yellow-600'}`} />
<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>
<h3 className="font-semibold text-gray-900 text-base">{title}</h3>
<p className="text-sm text-gray-500 mt-1">{message}</p>
<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>
</div>
<div className="flex gap-3 mt-6 justify-end">
<button
onClick={onCancel}
disabled={loading}
className="px-4 py-2 rounded-[10px] border border-gray-300 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50 transition-colors"
className="cp-btn-secondary px-5 py-2"
>
{cancelLabel}
</button>
<button
onClick={onConfirm}
disabled={loading}
className={`px-4 py-2 rounded-[10px] text-sm text-white font-medium disabled:opacity-50 transition-colors ${
danger
? 'bg-red-600 hover:bg-red-700'
: 'bg-primary-600 hover:bg-primary-700'
}`}
className={`px-5 py-2 text-white font-medium ${danger ? 'cp-btn-danger' : 'cp-btn-primary'}`}
>
{loading ? 'در حال انجام...' : confirmLabel}
{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}
</button>
</div>
</div>
assets/admin/components/ui/DataTable.tsx
+46 -31
View File
@@ -6,6 +6,7 @@ export interface Column<T> {
header: string;
render?: (row: T) => React.ReactNode;
sortable?: boolean;
className?: string;
}
interface Props<T> {
@@ -18,14 +19,15 @@ interface Props<T> {
actions?: (row: T) => React.ReactNode;
emptyMessage?: string;
emptyAction?: React.ReactNode;
headerExtra?: React.ReactNode;
}
function SkeletonRow({ cols }: { cols: number }) {
return (
<tr>
{Array.from({ length: cols }).map((_, i) => (
<td key={i} className="px-4 py-3">
<div className="h-4 bg-gray-200 rounded animate-pulse w-full" />
<td key={i} className="px-4 py-3.5">
<div className="h-4 rounded-lg skeleton" style={{ width: `${60 + (i * 17) % 40}%` }} />
</td>
))}
</tr>
@@ -42,73 +44,86 @@ export default function DataTable<T extends object>({
actions,
emptyMessage = 'هیچ موردی یافت نشد',
emptyAction,
headerExtra,
}: Props<T>) {
const allColumns = actions
? [...columns, { key: '__actions', header: 'اقدامات' }]
? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-28' }]
: columns;
return (
<div>
{onSearchChange !== undefined && (
<div className="mb-4">
<div className="relative max-w-xs">
<MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
<input
type="text"
value={searchValue}
onChange={(e) => onSearchChange(e.target.value)}
placeholder={searchPlaceholder}
className="w-full h-10 pr-9 pl-3 border border-gray-300 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
/>
</div>
{/* Search + extras header bar */}
{(onSearchChange !== undefined || headerExtra) && (
<div className="flex items-center justify-between gap-3 mb-4 flex-wrap">
{onSearchChange !== undefined && (
<div className="relative w-72 max-w-full">
<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" />
<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>}
</div>
)}
<div className="overflow-x-auto rounded-xl border border-gray-200">
<div className="overflow-x-auto rounded-xl border border-slate-200 dark:border-gray-700/50">
<table className="w-full text-sm">
<thead>
<tr className="bg-gray-50 border-b border-gray-200">
<tr className="bg-slate-50 dark:bg-gray-800/60 border-b border-slate-200 dark:border-gray-700/50">
{allColumns.map((col) => (
<th
key={col.key}
className="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide whitespace-nowrap"
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 ?? ''}`}
>
{col.header}
</th>
))}
</tr>
</thead>
<tbody className="divide-y divide-gray-100">
<tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
{loading ? (
Array.from({ length: 5 }).map((_, i) => (
Array.from({ length: 6 }).map((_, i) => (
<SkeletonRow key={i} cols={allColumns.length} />
))
) : data.length === 0 ? (
<tr>
<td colSpan={allColumns.length} className="text-center py-16">
<div className="flex flex-col items-center gap-3 text-gray-400">
<svg className="w-12 h-12" 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>
<p className="text-sm">{emptyMessage}</p>
<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">
<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>
{emptyAction}
</div>
</td>
</tr>
) : (
data.map((row, rowIdx) => (
<tr key={rowIdx} className="hover:bg-gray-50 transition-colors">
<tr
key={rowIdx}
className="hover:bg-slate-50/80 dark:hover:bg-gray-800/40 transition-colors"
>
{columns.map((col) => (
<td key={col.key} className="px-4 py-3 text-gray-700 whitespace-nowrap">
<td
key={col.key}
className="px-4 py-3.5 text-slate-700 dark:text-slate-300 whitespace-nowrap"
>
{col.render
? col.render(row)
: ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
</td>
))}
{actions && (
<td className="px-4 py-3 whitespace-nowrap">
<div className="flex items-center gap-2">{actions(row)}</div>
<td className="px-4 py-3.5 whitespace-nowrap">
<div className="flex items-center gap-1">{actions(row)}</div>
</td>
)}
</tr>
assets/admin/components/ui/Modal.tsx
+33 -10
View File
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import { XMarkIcon } from '@heroicons/react/24/outline';
type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -20,27 +20,50 @@ interface Props {
}
export default function Modal({ open, title, size = 'md', onClose, children, footer }: Props) {
useEffect(() => {
if (!open) return;
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', onKey);
return () => document.removeEventListener('keydown', onKey);
}, [open, onClose]);
if (!open) return null;
return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/40" onClick={onClose} />
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
{/* Backdrop */}
<div
className={`relative bg-white rounded-2xl shadow-2xl w-full ${sizeMap[size]} flex flex-col max-h-[90vh]`}
style={{ animation: 'scale-in 200ms ease' }}
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
`}
>
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 shrink-0">
<h2 className="font-semibold text-gray-900 text-base">{title}</h2>
{/* 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="text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-md hover:bg-gray-100"
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" />
</button>
</div>
<div className="flex-1 overflow-y-auto px-6 py-4">{children}</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-gray-200 shrink-0">
<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>
)}
assets/admin/components/ui/PageHeader.tsx
+14 -9
View File
@@ -1,5 +1,6 @@
import React from 'react';
import { Link } from 'react-router-dom';
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
interface Crumb {
label: string;
@@ -10,31 +11,35 @@ interface Props {
title: string;
breadcrumbs?: Crumb[];
action?: React.ReactNode;
description?: string;
}
export default function PageHeader({ title, breadcrumbs, action }: Props) {
export default function PageHeader({ title, breadcrumbs, action, description }: Props) {
return (
<div className="flex items-start justify-between mb-6">
<div>
<h1 className="text-xl font-bold text-gray-900">{title}</h1>
<div className="flex items-start justify-between mb-6 gap-4">
<div className="min-w-0">
{breadcrumbs && breadcrumbs.length > 0 && (
<nav className="flex items-center gap-1 mt-1 text-sm text-gray-500">
<nav className="flex items-center gap-0.5 mb-1.5 text-xs text-slate-500 dark:text-slate-400">
{breadcrumbs.map((crumb, i) => (
<React.Fragment key={i}>
{i > 0 && <span className="text-gray-300">/</span>}
{i > 0 && <ChevronLeftIcon className="w-3 h-3 text-slate-300 dark:text-slate-600 mx-0.5 shrink-0" />}
{crumb.to ? (
<Link to={crumb.to} className="hover:text-primary-600 transition-colors">
<Link to={crumb.to} className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors truncate">
{crumb.label}
</Link>
) : (
<span className="text-gray-700">{crumb.label}</span>
<span className="text-slate-700 dark:text-slate-300 font-medium truncate">{crumb.label}</span>
)}
</React.Fragment>
))}
</nav>
)}
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-tight">{title}</h1>
{description && (
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1">{description}</p>
)}
</div>
{action && <div>{action}</div>}
{action && <div className="shrink-0">{action}</div>}
</div>
);
}
assets/admin/components/ui/Pagination.tsx
+13 -12
View File
@@ -22,47 +22,48 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
} else {
pages.push(1);
if (page > 3) pages.push('...');
for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
pages.push(i);
}
for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) pages.push(i);
if (page < totalPages - 2) pages.push('...');
pages.push(totalPages);
}
return (
<div className="flex items-center justify-between mt-4 text-sm">
<span className="text-gray-500">
نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)}
<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">
نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)} مورد
</span>
<div className="flex items-center gap-1">
<button
onClick={() => onPageChange(page - 1)}
disabled={page === 1}
className="p-1.5 rounded-lg hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
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" />
</button>
{pages.map((p, i) =>
p === '...' ? (
<span key={`dots-${i}`} className="px-2 text-gray-400">...</span>
<span key={`dots-${i}`} className="w-8 text-center text-slate-400 dark:text-slate-500 text-xs">…</span>
) : (
<button
key={p}
onClick={() => onPageChange(p as number)}
className={`w-8 h-8 rounded-lg text-sm transition-colors ${
className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
p === page
? 'bg-primary-600 text-white font-semibold'
: 'text-gray-600 hover:bg-gray-100'
? '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'
}`}
>
{formatNumber(p as number)}
</button>
)
)}
<button
onClick={() => onPageChange(page + 1)}
disabled={page === totalPages}
className="p-1.5 rounded-lg hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
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" />
</button>
assets/admin/components/ui/StatusBadge.tsx
+39 -41
View File
@@ -2,62 +2,62 @@ import React from 'react';
import type { AppointmentStatus, PaymentStatus, SmsTemplateStatus, SettlementStatus } from '../../types';
const variants: Record<string, string> = {
yellow: 'bg-yellow-100 text-yellow-800',
blue: 'bg-blue-100 text-blue-800',
purple: 'bg-purple-100 text-purple-800',
orange: 'bg-orange-100 text-orange-800',
indigo: 'bg-indigo-100 text-indigo-800',
green: 'bg-green-100 text-green-800',
red: 'bg-red-100 text-red-800',
gray: 'bg-gray-100 text-gray-700',
rose: 'bg-rose-100 text-rose-800',
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',
};
const dots: Record<string, string> = {
yellow: 'bg-yellow-500',
blue: 'bg-blue-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-gray-400',
rose: 'bg-rose-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: 'در انتظار پرداخت' },
reserved: { color: 'blue', label: 'رزرو شده' },
checked_in: { color: 'purple', label: 'ورود به مطب' },
waiting: { color: 'orange', label: 'در صف انتظار' },
in_progress: { color: 'indigo', 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: 'غیبت' },
waiting_for_payment: { color: 'yellow', label: 'انتظار پرداخت' },
reserved: { color: 'blue', label: 'رزرو شده' },
checked_in: { color: 'purple', label: 'ورود به مطب' },
waiting: { color: 'orange', label: 'صف انتظار' },
in_progress: { color: 'indigo', 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: 'غیبت' },
};
const paymentMap: Record<PaymentStatus, { color: string; label: string }> = {
pending: { color: 'yellow', label: 'در انتظار' },
received: { color: 'green', label: 'موفق' },
canceled: { color: 'red', label: 'لغو شده' },
refund: { color: 'blue', label: 'استرداد' },
pending: { color: 'yellow', 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: 'رد شده' },
draft: { color: 'gray', label: 'پیش‌نویس' },
pending: { color: 'yellow', 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: 'رد شده' },
pending: { color: 'yellow', label: 'در انتظار' },
approved: { color: 'green', label: 'تأیید شده' },
rejected: { color: 'red', label: 'رد شده' },
};
interface Props {
@@ -88,14 +88,12 @@ 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 ${dots[color] ?? dots.gray}`} />
<span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dots[color] ?? dots.gray}`} />
{label}
</span>
);
}
export function ActiveBadge({ active }: { active: boolean }) {
return (
<StatusBadge type="active" value={active ? 'active' : 'inactive'} />
);
return <StatusBadge type="active" value={active ? 'active' : 'inactive'} />;
}