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 { Outlet } from 'react-router-dom';
import Sidebar from './Sidebar'; import Sidebar from './Sidebar';
import Topbar from './Topbar'; import Topbar from './Topbar';
import { useUiStore } from '../../stores/uiStore';
export default function AdminLayout() { export default function AdminLayout() {
const darkMode = useUiStore((s) => s.darkMode);
useEffect(() => {
document.documentElement.classList.toggle('dark', darkMode);
}, [darkMode]);
return ( 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 /> <Sidebar />
<div className="flex flex-col flex-1 overflow-hidden"> <div className="flex flex-col flex-1 overflow-hidden min-w-0">
<Topbar /> <Topbar />
<main className="flex-1 overflow-y-auto p-6"> <main className="flex-1 overflow-y-auto p-5 lg:p-6">
<Outlet /> <Outlet />
</main> </main>
</div> </div>
assets/admin/components/layout/Sidebar.tsx
+57 -55
View File
@@ -15,9 +15,7 @@ import {
TagIcon, TagIcon,
DocumentTextIcon, DocumentTextIcon,
KeyIcon, KeyIcon,
ChevronRightIcon, Bars3Icon,
ChevronLeftIcon,
MagnifyingGlassIcon,
ArrowLeftOnRectangleIcon, ArrowLeftOnRectangleIcon,
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
import { useUiStore } from '../../stores/uiStore'; import { useUiStore } from '../../stores/uiStore';
@@ -66,96 +64,100 @@ export default function Sidebar() {
const logout = useAuthStore((s) => s.logout); const logout = useAuthStore((s) => s.logout);
const navigate = useNavigate(); const navigate = useNavigate();
const handleLogout = () => {
logout();
navigate('/admin/login');
};
return ( return (
<aside <aside
style={{ transition: 'width 300ms cubic-bezier(0.4,0,0.2,1)' }} className={`
className={`${open ? 'w-[260px]' : 'w-[72px]'} shrink-0 bg-[#0f172a] flex flex-col h-screen overflow-hidden`} ${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 */} {/* ── Header ─────────────────────────────── */}
<div className="flex items-center justify-between px-4 py-5 border-b border-slate-700/50"> <div className={`flex items-center h-16 px-3 shrink-0 border-b border-white/[0.06] ${open ? 'gap-3' : 'justify-center'}`}>
{open && ( {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 <button
onClick={toggle} 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> </button>
</div> </div>
{/* Search */} {/* ── Navigation ─────────────────────────── */}
{open && ( <nav className="flex-1 overflow-y-auto py-3 px-2 space-y-0.5">
<div className="px-3 py-3 border-b border-slate-700/50"> {sections.map((section, si) => (
<div className="flex items-center gap-2 bg-slate-800 rounded-lg px-3 py-2"> <div key={section.label} className={si > 0 ? 'mt-4' : ''}>
<MagnifyingGlassIcon className="w-4 h-4 text-slate-400 shrink-0" /> {open ? (
<input <p className="text-[10px] font-semibold text-slate-600 uppercase tracking-widest px-3 py-1.5 mb-0.5">
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">
{section.label} {section.label}
</p> </p>
) : (
<div className="border-t border-white/[0.06] mx-1 my-2" />
)} )}
{section.items.map(({ to, icon: Icon, label }) => ( {section.items.map(({ to, icon: Icon, label }) => (
<NavLink <NavLink
key={to} key={to}
to={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} 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" /> {({ isActive }) => (
{open && <span>{label}</span>} <>
{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> </NavLink>
))} ))}
</div> </div>
))} ))}
</nav> </nav>
{/* User card */} {/* ── User footer ────────────────────────── */}
<div className="border-t border-slate-700/50 p-3"> <div className="shrink-0 border-t border-white/[0.06] p-2.5">
{open ? ( {open ? (
<div className="flex items-center gap-3 bg-slate-800 rounded-xl p-3"> <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-primary-600 flex items-center justify-center text-white text-sm font-bold shrink-0"> <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 A
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<p className="text-white text-sm font-medium truncate">Admin</p> <p className="text-sm font-medium text-slate-300 truncate leading-none">Admin</p>
<p className="text-slate-400 text-xs truncate">مدیر سیستم</p> <p className="text-[11px] text-slate-600 truncate mt-0.5">مدیر سیستم</p>
</div> </div>
<button <button
onClick={handleLogout} onClick={() => { logout(); navigate('/admin/login'); }}
className="text-slate-400 hover:text-red-400 transition-colors" 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="خروج" title="خروج"
> >
<ArrowLeftOnRectangleIcon className="w-5 h-5" /> <ArrowLeftOnRectangleIcon className="w-4 h-4" />
</button> </button>
</div> </div>
) : ( ) : (
<button <button
onClick={handleLogout} onClick={() => { logout(); navigate('/admin/login'); }}
className="w-full flex justify-center py-2 text-slate-400 hover:text-red-400 transition-colors" 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="خروج" title="خروج"
> >
<ArrowLeftOnRectangleIcon className="w-5 h-5" /> <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 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'; import { useUiStore } from '../../stores/uiStore';
interface TopbarProps { export default function Topbar() {
pageTitle?: string; const toggleSidebar = useUiStore((s) => s.toggleSidebar);
breadcrumbs?: { label: string; to?: string }[]; const darkMode = useUiStore((s) => s.darkMode);
} const toggleDarkMode = useUiStore((s) => s.toggleDarkMode);
export default function Topbar({ pageTitle, breadcrumbs }: TopbarProps) {
const toggle = useUiStore((s) => s.toggleSidebar);
return ( return (
<header className="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0"> <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">
<div className="flex items-center gap-4"> {/* 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 <button
onClick={toggle} onClick={toggleDarkMode}
className="text-gray-500 hover:text-gray-700 p-1 rounded-md hover:bg-gray-100 transition-colors md:hidden" 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> </button>
<div> {/* Notifications */}
{pageTitle && <h2 className="text-base font-semibold text-gray-800">{pageTitle}</h2>} <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">
{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">
<BellIcon className="w-5 h-5" /> <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> </button>
<div className="flex items-center gap-2 cursor-pointer"> {/* Divider */}
<div className="w-8 h-8 rounded-full bg-primary-600 flex items-center justify-center text-white text-sm font-bold"> <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 A
</div> </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>
</div> </div>
</header> </header>
assets/admin/components/ui/ConfirmDialog.tsx
+20 -16
View File
@@ -27,39 +27,43 @@ export default function ConfirmDialog({
if (!open) return null; if (!open) return null;
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
<div className="absolute inset-0 bg-black/40" onClick={onCancel} /> <div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" onClick={onCancel} />
<div <div
className="relative bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6" 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"
style={{ animation: 'scale-in 200ms ease' }}
> >
<div className="flex items-start gap-4"> <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'}`}> <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' : 'text-yellow-600'}`} /> <ExclamationTriangleIcon className={`w-5 h-5 ${danger ? 'text-red-600 dark:text-red-400' : 'text-amber-600 dark:text-amber-400'}`} />
</div> </div>
<div> <div className="flex-1 min-w-0">
<h3 className="font-semibold text-gray-900 text-base">{title}</h3> <h3 className="font-semibold text-slate-900 dark:text-slate-100 text-base leading-snug">{title}</h3>
<p className="text-sm text-gray-500 mt-1">{message}</p> <p className="text-sm text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed">{message}</p>
</div> </div>
</div> </div>
<div className="flex gap-3 mt-6 justify-end"> <div className="flex gap-3 mt-6 justify-end">
<button <button
onClick={onCancel} onClick={onCancel}
disabled={loading} 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} {cancelLabel}
</button> </button>
<button <button
onClick={onConfirm} onClick={onConfirm}
disabled={loading} disabled={loading}
className={`px-4 py-2 rounded-[10px] text-sm text-white font-medium disabled:opacity-50 transition-colors ${ className={`px-5 py-2 text-white font-medium ${danger ? 'cp-btn-danger' : 'cp-btn-primary'}`}
danger
? 'bg-red-600 hover:bg-red-700'
: 'bg-primary-600 hover:bg-primary-700'
}`}
> >
{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> </button>
</div> </div>
</div> </div>
assets/admin/components/ui/DataTable.tsx
+46 -31
View File
@@ -6,6 +6,7 @@ export interface Column<T> {
header: string; header: string;
render?: (row: T) => React.ReactNode; render?: (row: T) => React.ReactNode;
sortable?: boolean; sortable?: boolean;
className?: string;
} }
interface Props<T> { interface Props<T> {
@@ -18,14 +19,15 @@ interface Props<T> {
actions?: (row: T) => React.ReactNode; actions?: (row: T) => React.ReactNode;
emptyMessage?: string; emptyMessage?: string;
emptyAction?: React.ReactNode; emptyAction?: React.ReactNode;
headerExtra?: React.ReactNode;
} }
function SkeletonRow({ cols }: { cols: number }) { function SkeletonRow({ cols }: { cols: number }) {
return ( return (
<tr> <tr>
{Array.from({ length: cols }).map((_, i) => ( {Array.from({ length: cols }).map((_, i) => (
<td key={i} className="px-4 py-3"> <td key={i} className="px-4 py-3.5">
<div className="h-4 bg-gray-200 rounded animate-pulse w-full" /> <div className="h-4 rounded-lg skeleton" style={{ width: `${60 + (i * 17) % 40}%` }} />
</td> </td>
))} ))}
</tr> </tr>
@@ -42,73 +44,86 @@ export default function DataTable<T extends object>({
actions, actions,
emptyMessage = 'هیچ موردی یافت نشد', emptyMessage = 'هیچ موردی یافت نشد',
emptyAction, emptyAction,
headerExtra,
}: Props<T>) { }: Props<T>) {
const allColumns = actions const allColumns = actions
? [...columns, { key: '__actions', header: 'اقدامات' }] ? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-28' }]
: columns; : columns;
return ( return (
<div> <div>
{onSearchChange !== undefined && ( {/* Search + extras header bar */}
<div className="mb-4"> {(onSearchChange !== undefined || headerExtra) && (
<div className="relative max-w-xs"> <div className="flex items-center justify-between gap-3 mb-4 flex-wrap">
<MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" /> {onSearchChange !== undefined && (
<input <div className="relative w-72 max-w-full">
type="text" <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" />
value={searchValue} <input
onChange={(e) => onSearchChange(e.target.value)} type="text"
placeholder={searchPlaceholder} value={searchValue}
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" onChange={(e) => onSearchChange(e.target.value)}
/> placeholder={searchPlaceholder}
</div> className="cp-input pr-9"
/>
</div>
)}
{headerExtra && <div className="flex items-center gap-2">{headerExtra}</div>}
</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"> <table className="w-full text-sm">
<thead> <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) => ( {allColumns.map((col) => (
<th <th
key={col.key} 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} {col.header}
</th> </th>
))} ))}
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-gray-100"> <tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
{loading ? ( {loading ? (
Array.from({ length: 5 }).map((_, i) => ( Array.from({ length: 6 }).map((_, i) => (
<SkeletonRow key={i} cols={allColumns.length} /> <SkeletonRow key={i} cols={allColumns.length} />
)) ))
) : data.length === 0 ? ( ) : data.length === 0 ? (
<tr> <tr>
<td colSpan={allColumns.length} className="text-center py-16"> <td colSpan={allColumns.length} className="py-16 text-center">
<div className="flex flex-col items-center gap-3 text-gray-400"> <div className="flex flex-col items-center gap-3">
<svg className="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-gray-800 flex items-center justify-center">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} <svg className="w-7 h-7 text-slate-400 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
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" /> <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
</svg> 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" />
<p className="text-sm">{emptyMessage}</p> </svg>
</div>
<p className="text-sm text-slate-500 dark:text-slate-400">{emptyMessage}</p>
{emptyAction} {emptyAction}
</div> </div>
</td> </td>
</tr> </tr>
) : ( ) : (
data.map((row, rowIdx) => ( 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) => ( {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
? col.render(row) ? col.render(row)
: ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'} : ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
</td> </td>
))} ))}
{actions && ( {actions && (
<td className="px-4 py-3 whitespace-nowrap"> <td className="px-4 py-3.5 whitespace-nowrap">
<div className="flex items-center gap-2">{actions(row)}</div> <div className="flex items-center gap-1">{actions(row)}</div>
</td> </td>
)} )}
</tr> </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'; import { XMarkIcon } from '@heroicons/react/24/outline';
type ModalSize = 'sm' | 'md' | 'lg' | 'xl'; type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -20,27 +20,50 @@ interface Props {
} }
export default function Modal({ open, title, size = 'md', onClose, children, footer }: 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; if (!open) return null;
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4"> <div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
<div className="absolute inset-0 bg-black/40" onClick={onClose} /> {/* Backdrop */}
<div <div
className={`relative bg-white rounded-2xl shadow-2xl w-full ${sizeMap[size]} flex flex-col max-h-[90vh]`} className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm"
style={{ animation: 'scale-in 200ms ease' }} 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"> {/* Header */}
<h2 className="font-semibold text-gray-900 text-base">{title}</h2> <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 <button
onClick={onClose} 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" /> <XMarkIcon className="w-5 h-5" />
</button> </button>
</div> </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 && ( {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} {footer}
</div> </div>
)} )}
assets/admin/components/ui/PageHeader.tsx
+14 -9
View File
@@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
interface Crumb { interface Crumb {
label: string; label: string;
@@ -10,31 +11,35 @@ interface Props {
title: string; title: string;
breadcrumbs?: Crumb[]; breadcrumbs?: Crumb[];
action?: React.ReactNode; action?: React.ReactNode;
description?: string;
} }
export default function PageHeader({ title, breadcrumbs, action }: Props) { export default function PageHeader({ title, breadcrumbs, action, description }: Props) {
return ( return (
<div className="flex items-start justify-between mb-6"> <div className="flex items-start justify-between mb-6 gap-4">
<div> <div className="min-w-0">
<h1 className="text-xl font-bold text-gray-900">{title}</h1>
{breadcrumbs && breadcrumbs.length > 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) => ( {breadcrumbs.map((crumb, i) => (
<React.Fragment key={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 ? ( {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} {crumb.label}
</Link> </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> </React.Fragment>
))} ))}
</nav> </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> </div>
{action && <div>{action}</div>} {action && <div className="shrink-0">{action}</div>}
</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 { } else {
pages.push(1); pages.push(1);
if (page > 3) pages.push('...'); if (page > 3) pages.push('...');
for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) { for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) pages.push(i);
pages.push(i);
}
if (page < totalPages - 2) pages.push('...'); if (page < totalPages - 2) pages.push('...');
pages.push(totalPages); pages.push(totalPages);
} }
return ( return (
<div className="flex items-center justify-between mt-4 text-sm"> <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-gray-500"> <span className="text-slate-500 dark:text-slate-400 text-xs">
نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)} نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)} مورد
</span> </span>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<button <button
onClick={() => onPageChange(page - 1)} onClick={() => onPageChange(page - 1)}
disabled={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" /> <ChevronRightIcon className="w-4 h-4" />
</button> </button>
{pages.map((p, i) => {pages.map((p, i) =>
p === '...' ? ( 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 <button
key={p} key={p}
onClick={() => onPageChange(p as number)} 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 p === page
? 'bg-primary-600 text-white font-semibold' ? 'bg-primary-600 text-white shadow-sm shadow-primary-500/30'
: 'text-gray-600 hover:bg-gray-100' : 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700'
}`} }`}
> >
{formatNumber(p as number)} {formatNumber(p as number)}
</button> </button>
) )
)} )}
<button <button
onClick={() => onPageChange(page + 1)} onClick={() => onPageChange(page + 1)}
disabled={page === totalPages} 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" /> <ChevronLeftIcon className="w-4 h-4" />
</button> </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'; import type { AppointmentStatus, PaymentStatus, SmsTemplateStatus, SettlementStatus } from '../../types';
const variants: Record<string, string> = { const variants: Record<string, string> = {
yellow: 'bg-yellow-100 text-yellow-800', yellow: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-800 dark:text-yellow-300',
blue: 'bg-blue-100 text-blue-800', blue: 'bg-blue-100 dark:bg-blue-400/10 text-blue-800 dark:text-blue-300',
purple: 'bg-purple-100 text-purple-800', purple: 'bg-purple-100 dark:bg-purple-400/10 text-purple-800 dark:text-purple-300',
orange: 'bg-orange-100 text-orange-800', orange: 'bg-orange-100 dark:bg-orange-400/10 text-orange-800 dark:text-orange-300',
indigo: 'bg-indigo-100 text-indigo-800', indigo: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-800 dark:text-indigo-300',
green: 'bg-green-100 text-green-800', green: 'bg-green-100 dark:bg-green-400/10 text-green-800 dark:text-green-300',
red: 'bg-red-100 text-red-800', red: 'bg-red-100 dark:bg-red-400/10 text-red-800 dark:text-red-300',
gray: 'bg-gray-100 text-gray-700', gray: 'bg-slate-100 dark:bg-slate-400/10 text-slate-700 dark:text-slate-400',
rose: 'bg-rose-100 text-rose-800', rose: 'bg-rose-100 dark:bg-rose-400/10 text-rose-800 dark:text-rose-300',
}; };
const dots: Record<string, string> = { const dots: Record<string, string> = {
yellow: 'bg-yellow-500', yellow: 'bg-yellow-500',
blue: 'bg-blue-500', blue: 'bg-blue-500',
purple: 'bg-purple-500', purple: 'bg-purple-500',
orange: 'bg-orange-500', orange: 'bg-orange-500',
indigo: 'bg-indigo-500', indigo: 'bg-indigo-500',
green: 'bg-green-500', green: 'bg-green-500',
red: 'bg-red-500', red: 'bg-red-500',
gray: 'bg-gray-400', gray: 'bg-slate-400',
rose: 'bg-rose-500', rose: 'bg-rose-500',
}; };
const appointmentMap: Record<AppointmentStatus, { color: string; label: string }> = { const appointmentMap: Record<AppointmentStatus, { color: string; label: string }> = {
waiting_for_payment: { color: 'yellow', label: 'در انتظار پرداخت' }, waiting_for_payment: { color: 'yellow', label: 'انتظار پرداخت' },
reserved: { color: 'blue', label: 'رزرو شده' }, reserved: { color: 'blue', label: 'رزرو شده' },
checked_in: { color: 'purple', label: 'ورود به مطب' }, checked_in: { color: 'purple', label: 'ورود به مطب' },
waiting: { color: 'orange', label: 'در صف انتظار' }, waiting: { color: 'orange', label: 'صف انتظار' },
in_progress: { color: 'indigo', label: 'در حال ویزیت' }, in_progress: { color: 'indigo', label: 'در حال ویزیت' },
visited: { color: 'green', label: 'ویزیت شده' }, visited: { color: 'green', label: 'ویزیت شده' },
completed: { color: 'green', label: 'تکمیل شده' }, completed: { color: 'green', label: 'تکمیل شده' },
cancelled_by_user: { color: 'red', label: 'لغو توسط بیمار' }, cancelled_by_user: { color: 'red', label: 'لغو بیمار' },
cancelled_by_doctor: { color: 'red', label: 'لغو توسط پزشک' }, cancelled_by_doctor: { color: 'red', label: 'لغو پزشک' },
cancelled_by_admin: { color: 'red', label: 'لغو توسط ادمین' }, cancelled_by_admin: { color: 'red', label: 'لغو ادمین' },
auto_cancel_unpaid: { color: 'gray', label: 'لغو خودکار' }, auto_cancel_unpaid: { color: 'gray', label: 'لغو خودکار' },
no_show: { color: 'rose', label: 'غیبت' }, no_show: { color: 'rose', label: 'غیبت' },
}; };
const paymentMap: Record<PaymentStatus, { color: string; label: string }> = { const paymentMap: Record<PaymentStatus, { color: string; label: string }> = {
pending: { color: 'yellow', label: 'در انتظار' }, pending: { color: 'yellow', label: 'در انتظار' },
received: { color: 'green', label: 'موفق' }, received: { color: 'green', label: 'موفق' },
canceled: { color: 'red', label: 'لغو شده' }, canceled: { color: 'red', label: 'لغو شده' },
refund: { color: 'blue', label: 'استرداد' }, refund: { color: 'blue', label: 'استرداد' },
}; };
const smsMap: Record<SmsTemplateStatus, { color: string; label: string }> = { const smsMap: Record<SmsTemplateStatus, { color: string; label: string }> = {
draft: { color: 'gray', label: 'پیش‌نویس' }, draft: { color: 'gray', label: 'پیش‌نویس' },
pending: { color: 'yellow', label: 'در انتظار تأیید' }, pending: { color: 'yellow', label: 'در انتظار تأیید' },
approved: { color: 'green', label: 'تأیید شده' }, approved: { color: 'green', label: 'تأیید شده' },
rejected: { color: 'red', label: 'رد شده' }, rejected: { color: 'red', label: 'رد شده' },
}; };
const settlementMap: Record<SettlementStatus, { color: string; label: string }> = { const settlementMap: Record<SettlementStatus, { color: string; label: string }> = {
pending: { color: 'yellow', label: 'در انتظار' }, pending: { color: 'yellow', label: 'در انتظار' },
approved: { color: 'green', label: 'تأیید شده' }, approved: { color: 'green', label: 'تأیید شده' },
rejected: { color: 'red', label: 'رد شده' }, rejected: { color: 'red', label: 'رد شده' },
}; };
interface Props { interface Props {
@@ -88,14 +88,12 @@ export default function StatusBadge({ type, value }: Props) {
return ( 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={`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} {label}
</span> </span>
); );
} }
export function ActiveBadge({ active }: { active: boolean }) { export function ActiveBadge({ active }: { active: boolean }) {
return ( return <StatusBadge type="active" value={active ? 'active' : 'inactive'} />;
<StatusBadge type="active" value={active ? 'active' : 'inactive'} />
);
} }
assets/admin/pages/AppointmentDetailPage.tsx
+9 -9
View File
@@ -25,9 +25,9 @@ const ALL_STATUSES: { value: AppointmentStatus; label: string }[] = [
function InfoRow({ label, value }: { label: string; value: React.ReactNode }) { function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
return ( return (
<div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0"> <div className="cp-info-row">
<span className="text-sm text-gray-500">{label}</span> <span className="cp-info-label text-sm">{label}</span>
<span className="text-sm font-medium text-gray-900">{value ?? '—'}</span> <span className="cp-info-value">{value ?? '—'}</span>
</div> </div>
); );
} }
@@ -78,7 +78,7 @@ export default function AppointmentDetailPage() {
]} ]}
action={ action={
<button onClick={() => navigate('/admin/appointments')} <button onClick={() => navigate('/admin/appointments')}
className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors"> className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors">
<ArrowRightIcon className="w-4 h-4" /> <ArrowRightIcon className="w-4 h-4" />
بازگشت بازگشت
</button> </button>
@@ -86,9 +86,9 @@ export default function AppointmentDetailPage() {
/> />
{isLoading ? ( {isLoading ? (
<div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3"> <div className="cp-card p-6 space-y-3">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" /> <div key={i} className="h-8 rounded-lg skeleton" />
))} ))}
</div> </div>
) : appt ? ( ) : appt ? (
@@ -113,12 +113,12 @@ export default function AppointmentDetailPage() {
</div> </div>
<div className="mt-6"> <div className="mt-6">
<label className="block text-sm font-medium text-gray-700 mb-2">تغییر وضعیت:</label> <label className="cp-label mb-2">تغییر وضعیت:</label>
<div className="flex gap-2"> <div className="flex gap-2">
<select <select
value={newStatus} value={newStatus}
onChange={(e) => setNewStatus(e.target.value)} onChange={(e) => setNewStatus(e.target.value)}
className="flex-1 h-10 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" className="cp-input flex-1"
> >
<option value="">انتخاب وضعیت...</option> <option value="">انتخاب وضعیت...</option>
{ALL_STATUSES.map((s) => ( {ALL_STATUSES.map((s) => (
@@ -128,7 +128,7 @@ export default function AppointmentDetailPage() {
<button <button
onClick={() => newStatus && statusMutation.mutate(newStatus)} onClick={() => newStatus && statusMutation.mutate(newStatus)}
disabled={!newStatus || statusMutation.isPending} disabled={!newStatus || statusMutation.isPending}
className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors" className="cp-btn-primary"
> >
اعمال اعمال
</button> </button>
assets/admin/pages/AppointmentsPage.tsx
+4 -4
View File
@@ -47,7 +47,7 @@ export default function AppointmentsPage() {
header: 'بیمار', header: 'بیمار',
render: (a) => ( render: (a) => (
<div> <div>
<p className="font-medium text-gray-900">{a.patient_name || '—'}</p> <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> <p className="text-xs text-gray-400 dir-ltr">{maskMobile(a.patient_mobile)}</p>
</div> </div>
), ),
@@ -87,7 +87,7 @@ export default function AppointmentsPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نوبت‌ها' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نوبت‌ها' }]}
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<div className="flex items-center gap-3 mb-4 flex-wrap"> <div className="flex items-center gap-3 mb-4 flex-wrap">
{STATUS_FILTERS.map((f) => ( {STATUS_FILTERS.map((f) => (
<button <button
@@ -96,7 +96,7 @@ export default function AppointmentsPage() {
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${ className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
statusFilter === f.value statusFilter === f.value
? 'bg-primary-600 text-white' ? 'bg-primary-600 text-white'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200' : '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} {f.label}
@@ -115,7 +115,7 @@ export default function AppointmentsPage() {
actions={(appt) => ( actions={(appt) => (
<button <button
onClick={() => navigate(`/admin/appointments/${appt.uuid}`)} onClick={() => navigate(`/admin/appointments/${appt.uuid}`)}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" className="cp-action-view"
title="مشاهده" title="مشاهده"
> >
<EyeIcon className="w-4 h-4" /> <EyeIcon className="w-4 h-4" />
assets/admin/pages/BlogFormPage.tsx
+13 -13
View File
@@ -83,9 +83,9 @@ export default function BlogFormPage() {
if (isEdit && isLoading) { if (isEdit && isLoading) {
return ( return (
<div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3"> <div className="cp-card p-6 space-y-3">
{Array.from({ length: 5 }).map((_, i) => ( {Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="h-10 bg-gray-100 rounded-lg animate-pulse" /> <div key={i} className="h-10 rounded-lg skeleton" />
))} ))}
</div> </div>
); );
@@ -102,40 +102,40 @@ export default function BlogFormPage() {
]} ]}
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<form onSubmit={handleSubmit(onSubmit)} className="space-y-6"> <form onSubmit={handleSubmit(onSubmit)} className="space-y-6">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
<div className="lg:col-span-2 space-y-5"> <div className="lg:col-span-2 space-y-5">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">عنوان مقاله *</label> <label className="cp-label">عنوان مقاله *</label>
<input {...register('title')} placeholder="عنوان جذاب بنویسید..." <input {...register('title')} placeholder="عنوان جذاب بنویسید..."
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> className="cp-input h-11" />
{errors.title && <p className="text-red-500 text-xs mt-1">{errors.title.message}</p>} {errors.title && <p className="text-red-500 text-xs mt-1">{errors.title.message}</p>}
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">خلاصه</label> <label className="cp-label">خلاصه</label>
<textarea {...register('summary')} rows={2} placeholder="خلاصه کوتاه مقاله..." <textarea {...register('summary')} rows={2} placeholder="خلاصه کوتاه مقاله..."
className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" /> className="cp-textarea resize-none" />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">محتوا *</label> <label className="cp-label">محتوا *</label>
<textarea {...register('content')} rows={16} placeholder="محتوای مقاله را بنویسید..." <textarea {...register('content')} rows={16} placeholder="محتوای مقاله را بنویسید..."
className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none font-mono" /> className="cp-textarea resize-none font-mono" />
{errors.content && <p className="text-red-500 text-xs mt-1">{errors.content.message}</p>} {errors.content && <p className="text-red-500 text-xs mt-1">{errors.content.message}</p>}
</div> </div>
</div> </div>
<div className="space-y-5"> <div className="space-y-5">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">وضعیت انتشار</label> <label className="cp-label">وضعیت انتشار</label>
<Controller <Controller
control={control} control={control}
name="status" name="status"
render={({ field }) => ( render={({ field }) => (
<select {...field} <select {...field}
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500"> className="cp-input h-11">
<option value="draft">پیش‌نویس</option> <option value="draft">پیش‌نویس</option>
<option value="published">منتشر</option> <option value="published">منتشر</option>
</select> </select>
@@ -144,9 +144,9 @@ export default function BlogFormPage() {
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">تگ‌ها (با ویرگول جدا کنید)</label> <label className="cp-label">تگ‌ها (با ویرگول جدا کنید)</label>
<input {...register('tags')} dir="ltr" placeholder="tag1, tag2, tag3" <input {...register('tags')} dir="ltr" placeholder="tag1, tag2, tag3"
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> className="cp-input h-11" />
</div> </div>
<div className="pt-4 space-y-3"> <div className="pt-4 space-y-3">
assets/admin/pages/BlogsPage.tsx
+6 -6
View File
@@ -56,7 +56,7 @@ export default function BlogsPage() {
{b.cover_image ? ( {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="" className="w-10 h-7 rounded object-cover shrink-0" />
) : ( ) : (
<div className="w-10 h-7 rounded bg-gray-100 shrink-0" /> <div className="w-10 h-7 rounded bg-slate-100 dark:bg-slate-700 shrink-0" />
)} )}
<span className="font-medium text-gray-900 line-clamp-1">{b.title}</span> <span className="font-medium text-gray-900 line-clamp-1">{b.title}</span>
</div> </div>
@@ -102,19 +102,19 @@ export default function BlogsPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'بلاگ' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'بلاگ' }]}
action={ action={
<button onClick={() => navigate('/admin/blogs/new')} <button onClick={() => navigate('/admin/blogs/new')}
className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors"> className="cp-btn-primary">
<PlusIcon className="w-4 h-4" /> <PlusIcon className="w-4 h-4" />
نوشتن مقاله نوشتن مقاله
</button> </button>
} }
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
{STATUS_FILTERS.map((f) => ( {STATUS_FILTERS.map((f) => (
<button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }} <button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${ className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
statusFilter === f.value ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' 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} {f.label}
</button> </button>
@@ -138,11 +138,11 @@ export default function BlogsPage() {
actions={(blog) => ( actions={(blog) => (
<> <>
<button onClick={() => navigate(`/admin/blogs/${blog.uuid}/edit`)} <button onClick={() => navigate(`/admin/blogs/${blog.uuid}/edit`)}
className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="ویرایش"> className="cp-action-edit" title="ویرایش">
<PencilIcon className="w-4 h-4" /> <PencilIcon className="w-4 h-4" />
</button> </button>
<button onClick={() => setDeleteTarget(blog)} <button onClick={() => setDeleteTarget(blog)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف"> className="cp-action-delete" title="حذف">
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
</button> </button>
</> </>
assets/admin/pages/CategoriesPage.tsx
+17 -17
View File
@@ -101,7 +101,7 @@ export default function CategoriesPage() {
key: 'bundle', key: 'bundle',
header: 'نوع', header: 'نوع',
render: (c) => ( render: (c) => (
<span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{c.bundle}</span> <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">{c.bundle}</span>
), ),
}, },
{ {
@@ -129,21 +129,21 @@ export default function CategoriesPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'دسته‌بندی‌ها' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'دسته‌بندی‌ها' }]}
action={ action={
<button onClick={() => setAddOpen(true)} <button onClick={() => setAddOpen(true)}
className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors"> className="cp-btn-primary">
<PlusIcon className="w-4 h-4" /> <PlusIcon className="w-4 h-4" />
افزودن افزودن
</button> </button>
} }
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100"> <div className="cp-card">
<div className="flex flex-wrap border-b border-gray-200 px-6 pt-4 gap-1"> <div className="flex flex-wrap border-b border-slate-200 dark:border-gray-700 px-6 pt-4 gap-1">
{TABS.map((t) => ( {TABS.map((t) => (
<button key={t.key} onClick={() => handleTabChange(t.key)} <button key={t.key} onClick={() => handleTabChange(t.key)}
className={`pb-3 px-4 text-sm font-medium border-b-2 transition-colors -mb-px ${ className={`pb-3 px-4 text-sm font-medium border-b-2 transition-colors -mb-px ${
activeTab === t.key activeTab === t.key
? 'border-primary-600 text-primary-600' ? 'border-primary-600 text-primary-600'
: 'border-transparent text-gray-500 hover:text-gray-700' : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
}`}> }`}>
{t.label} {t.label}
</button> </button>
@@ -162,11 +162,11 @@ export default function CategoriesPage() {
actions={(cat) => ( actions={(cat) => (
<> <>
<button onClick={() => openEdit(cat)} <button onClick={() => openEdit(cat)}
className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="ویرایش"> className="cp-action-edit" title="ویرایش">
<PencilIcon className="w-4 h-4" /> <PencilIcon className="w-4 h-4" />
</button> </button>
<button onClick={() => setDeleteTarget(cat)} <button onClick={() => setDeleteTarget(cat)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف"> className="cp-action-delete" title="حذف">
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
</button> </button>
</> </>
@@ -181,11 +181,11 @@ export default function CategoriesPage() {
footer={ footer={
<> <>
<button onClick={() => { setAddOpen(false); reset(); }} <button onClick={() => { setAddOpen(false); reset(); }}
className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors"> className="cp-btn-secondary">
لغو لغو
</button> </button>
<button form="cat-form" type="submit" disabled={isSubmitting} <button form="cat-form" type="submit" disabled={isSubmitting}
className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors"> className="cp-btn-primary">
ذخیره ذخیره
</button> </button>
</> </>
@@ -193,16 +193,16 @@ export default function CategoriesPage() {
> >
<form id="cat-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4"> <form id="cat-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">نام</label> <label className="cp-label">نام</label>
<input {...register('label')} <input {...register('label')}
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> className="cp-input h-11" />
{errors.label && <p className="text-red-500 text-xs mt-1">{errors.label.message}</p>} {errors.label && <p className="text-red-500 text-xs mt-1">{errors.label.message}</p>}
</div> </div>
{activeTab === 'city' && ( {activeTab === 'city' && (
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">شناسه استان</label> <label className="cp-label">شناسه استان</label>
<input {...register('parent_id')} dir="ltr" placeholder="ID عددی استان" <input {...register('parent_id')} dir="ltr" placeholder="ID عددی استان"
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> className="cp-input h-11" />
</div> </div>
)} )}
</form> </form>
@@ -214,11 +214,11 @@ export default function CategoriesPage() {
footer={ footer={
<> <>
<button onClick={() => { setEditTarget(null); reset(); }} <button onClick={() => { setEditTarget(null); reset(); }}
className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors"> className="cp-btn-secondary">
لغو لغو
</button> </button>
<button form="edit-cat-form" type="submit" disabled={isSubmitting} <button form="edit-cat-form" type="submit" disabled={isSubmitting}
className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors"> className="cp-btn-primary">
ذخیره ذخیره
</button> </button>
</> </>
@@ -228,9 +228,9 @@ export default function CategoriesPage() {
onSubmit={handleSubmit((d) => editTarget && updateMutation.mutate({ id: editTarget.id, d }))} onSubmit={handleSubmit((d) => editTarget && updateMutation.mutate({ id: editTarget.id, d }))}
className="space-y-4"> className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">نام</label> <label className="cp-label">نام</label>
<input {...register('label')} <input {...register('label')}
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> className="cp-input h-11" />
{errors.label && <p className="text-red-500 text-xs mt-1">{errors.label.message}</p>} {errors.label && <p className="text-red-500 text-xs mt-1">{errors.label.message}</p>}
</div> </div>
</form> </form>
assets/admin/pages/ClinicDetailPage.tsx
+6 -6
View File
@@ -11,9 +11,9 @@ import { ActiveBadge } from '../components/ui/StatusBadge';
function InfoRow({ label, value }: { label: string; value: React.ReactNode }) { function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
return ( return (
<div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0"> <div className="cp-info-row">
<span className="text-sm text-gray-500">{label}</span> <span className="cp-info-label text-sm">{label}</span>
<span className="text-sm font-medium text-gray-900">{value ?? '—'}</span> <span className="cp-info-value">{value ?? '—'}</span>
</div> </div>
); );
} }
@@ -41,7 +41,7 @@ export default function ClinicDetailPage() {
]} ]}
action={ action={
<button onClick={() => navigate('/admin/clinics')} <button onClick={() => navigate('/admin/clinics')}
className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors"> className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors">
<ArrowRightIcon className="w-4 h-4" /> <ArrowRightIcon className="w-4 h-4" />
بازگشت بازگشت
</button> </button>
@@ -49,9 +49,9 @@ export default function ClinicDetailPage() {
/> />
{isLoading ? ( {isLoading ? (
<div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3"> <div className="cp-card p-6 space-y-3">
{Array.from({ length: 5 }).map((_, i) => ( {Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" /> <div key={i} className="h-8 rounded-lg skeleton" />
))} ))}
</div> </div>
) : clinic ? ( ) : clinic ? (
assets/admin/pages/ClinicsPage.tsx
+5 -5
View File
@@ -52,7 +52,7 @@ export default function ClinicsPage() {
{c.name?.[0]} {c.name?.[0]}
</div> </div>
)} )}
<span className="font-medium text-gray-900">{c.name}</span> <span className="font-medium text-slate-800 dark:text-slate-100">{c.name}</span>
</div> </div>
), ),
}, },
@@ -80,7 +80,7 @@ export default function ClinicsPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'کلینیک‌ها' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'کلینیک‌ها' }]}
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<DataTable<Clinic> <DataTable<Clinic>
columns={columns} columns={columns}
data={items} data={items}
@@ -92,15 +92,15 @@ export default function ClinicsPage() {
actions={(clinic) => ( actions={(clinic) => (
<> <>
<button onClick={() => navigate(`/admin/clinics/${clinic.uuid}`)} <button onClick={() => navigate(`/admin/clinics/${clinic.uuid}`)}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="مشاهده"> className="cp-action-view" title="مشاهده">
<EyeIcon className="w-4 h-4" /> <EyeIcon className="w-4 h-4" />
</button> </button>
<button onClick={() => navigate(`/admin/clinics/${clinic.uuid}?edit=1`)} <button onClick={() => navigate(`/admin/clinics/${clinic.uuid}?edit=1`)}
className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="ویرایش"> className="cp-action-edit" title="ویرایش">
<PencilIcon className="w-4 h-4" /> <PencilIcon className="w-4 h-4" />
</button> </button>
<button onClick={() => setDeleteTarget(clinic)} <button onClick={() => setDeleteTarget(clinic)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف"> className="cp-action-delete" title="حذف">
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
</button> </button>
</> </>
assets/admin/pages/CommentsPage.tsx
+4 -4
View File
@@ -59,7 +59,7 @@ export default function CommentsPage() {
{ {
key: 'patient_name', key: 'patient_name',
header: 'کاربر', header: 'کاربر',
render: (c) => <span className="font-medium text-gray-900">{c.patient_name}</span>, render: (c) => <span className="font-medium text-slate-800 dark:text-slate-100">{c.patient_name}</span>,
}, },
{ key: 'doctor_name', header: 'پزشک', render: (c) => `دکتر ${c.doctor_name}` }, { key: 'doctor_name', header: 'پزشک', render: (c) => `دکتر ${c.doctor_name}` },
{ key: 'title', header: 'عنوان' }, { key: 'title', header: 'عنوان' },
@@ -88,12 +88,12 @@ export default function CommentsPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نظرات' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نظرات' }]}
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
{FILTERS.map((f) => ( {FILTERS.map((f) => (
<button key={f.value} onClick={() => { setApprovedFilter(f.value); setPage(1); }} <button key={f.value} onClick={() => { setApprovedFilter(f.value); setPage(1); }}
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${ className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
approvedFilter === f.value ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' 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} {f.label}
</button> </button>
@@ -117,7 +117,7 @@ export default function CommentsPage() {
</button> </button>
)} )}
<button onClick={() => setDeleteTarget(comment)} <button onClick={() => setDeleteTarget(comment)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف"> className="cp-action-delete" title="حذف">
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
</button> </button>
</> </>
assets/admin/pages/DashboardPage.tsx
+229 -107
View File
@@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { Link } from 'react-router-dom';
import { import {
UserGroupIcon, UserGroupIcon,
HeartIcon, HeartIcon,
@@ -9,10 +10,11 @@ import {
ChatBubbleLeftEllipsisIcon, ChatBubbleLeftEllipsisIcon,
BanknotesIcon, BanknotesIcon,
ArrowPathIcon, ArrowPathIcon,
UserPlusIcon,
} from '@heroicons/react/24/outline'; } from '@heroicons/react/24/outline';
import { api } from '../lib/api'; import { api } from '../lib/api';
import type { ApiResponse } from '../lib/api'; import type { ApiResponse } from '../lib/api';
import { formatNumber, formatRial } from '../lib/utils'; import { formatNumber, formatRial, formatDateTime } from '../lib/utils';
interface DashboardStats { interface DashboardStats {
total_users: number; total_users: number;
@@ -28,150 +30,270 @@ interface DashboardStats {
pending_settlements: number; pending_settlements: number;
} }
interface StatCardProps { interface RecentAppointment {
uuid: string;
slot_start: string;
status: string;
doctor_name: string;
user_mobile: string;
user_name: string | null;
created_at: string;
}
interface RecentPayment {
uuid: string;
amount: number;
status: string;
gateway: string;
user_mobile: string;
user_name: string | null;
created_at: string;
}
interface RecentUser {
uuid: string;
mobile: string;
name: string | null;
email: string | null;
created_at: string;
}
interface RecentData {
appointments: RecentAppointment[];
payments: RecentPayment[];
users: RecentUser[];
}
const APPT_STATUS: Record<string, { label: string; cls: string }> = {
waiting_for_payment: { label: 'انتظار پرداخت', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300' },
reserved: { label: 'رزرو شده', cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300' },
checked_in: { label: 'ورود به مطب', cls: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-700 dark:text-indigo-300' },
waiting: { label: 'صف انتظار', cls: 'bg-orange-100 dark:bg-orange-400/10 text-orange-700 dark:text-orange-300' },
in_progress: { label: 'در حال ویزیت', cls: 'bg-purple-100 dark:bg-purple-400/10 text-purple-700 dark:text-purple-300' },
visited: { label: 'ویزیت شده', cls: 'bg-emerald-100 dark:bg-emerald-400/10 text-emerald-700 dark:text-emerald-300' },
completed: { label: 'تکمیل شده', cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300' },
cancelled_by_doctor: { label: 'لغو پزشک', cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300' },
cancelled_by_user: { label: 'لغو بیمار', cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300' },
auto_cancel_unpaid: { label: 'لغو خودکار', cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400' },
no_show: { label: 'غیبت', cls: 'bg-slate-100 dark:bg-slate-400/10 text-slate-600 dark:text-slate-400' },
};
const PAY_STATUS: Record<string, { label: string; cls: string }> = {
pending: { label: 'در انتظار', cls: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-700 dark:text-yellow-300' },
received: { label: 'موفق', cls: 'bg-green-100 dark:bg-green-400/10 text-green-700 dark:text-green-300' },
canceled: { label: 'لغو شده', cls: 'bg-red-100 dark:bg-red-400/10 text-red-700 dark:text-red-300' },
refund: { label: 'استرداد', cls: 'bg-blue-100 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300' },
};
function MicroBadge({ 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 dark:text-slate-400' };
return (
<span className={`shrink-0 text-[10px] font-medium px-2 py-0.5 rounded-full ${s.cls}`}>{s.label}</span>
);
}
interface StatCard {
label: string; label: string;
value: string | number; value: string;
sub?: string; sub?: string;
icon: React.ElementType; icon: React.ElementType;
iconBg: string; iconBg: string;
iconColor: string; iconColor: string;
loading?: boolean;
} }
function StatCard({ label, value, sub, icon: Icon, iconBg, iconColor, loading }: StatCardProps) { function StatCardSkeleton() {
return ( return (
<div className="bg-white rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,.08)] p-6"> <div className="cp-card p-5 flex items-start gap-4">
<div className="flex items-start justify-between"> <div className="w-11 h-11 rounded-xl skeleton shrink-0" />
<div className="min-w-0 flex-1"> <div className="flex-1 space-y-2 pt-0.5">
<p className="text-sm text-gray-500 mb-1">{label}</p> <div className="h-3 rounded skeleton w-2/3" />
{loading ? ( <div className="h-6 rounded skeleton w-1/2" />
<div className="h-8 w-24 bg-gray-100 rounded animate-pulse mt-1" /> <div className="h-3 rounded skeleton w-3/4" />
) : (
<p className="text-2xl font-bold text-gray-900 truncate">{value}</p>
)}
{sub && !loading && (
<p className="text-xs text-gray-400 mt-1.5">{sub}</p>
)}
{sub && loading && (
<div className="h-3 w-32 bg-gray-100 rounded animate-pulse mt-2" />
)}
</div>
<div className={`w-12 h-12 rounded-xl flex items-center justify-center shrink-0 mr-3 ${iconBg}`}>
<Icon className={`w-6 h-6 ${iconColor}`} />
</div>
</div> </div>
</div> </div>
); );
} }
function RecentSkeleton() {
return (
<div className="space-y-3 mt-1">
{[...Array(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>
</div>
))}
</div>
);
}
export default function DashboardPage() { export default function DashboardPage() {
const { data, isLoading, isError, refetch } = useQuery({ const statsQ = useQuery({
queryKey: ['dashboard-stats'], queryKey: ['dashboard-stats'],
queryFn: () => api.get<ApiResponse<DashboardStats>>('/api/v1/admin/dashboard/stats'), queryFn: () => api.get<ApiResponse<DashboardStats>>('/api/v1/admin/dashboard/stats'),
staleTime: 60_000, staleTime: 60_000,
}); });
const stats: DashboardStats | undefined = (data?.data as any)?.data ?? data?.data; const recentQ = useQuery({
queryKey: ['dashboard-recent'],
queryFn: () => api.get<ApiResponse<RecentData>>('/api/v1/admin/dashboard/recent'),
staleTime: 30_000,
});
const fn = (n: number | undefined) => (n !== undefined ? formatNumber(n) : '—'); const stats: DashboardStats | undefined = (statsQ.data?.data as any)?.data ?? statsQ.data?.data;
const recent: RecentData | undefined = (recentQ.data?.data as any)?.data ?? recentQ.data?.data;
const fn = (n?: number) => (n !== undefined ? formatNumber(n) : '—');
const cards: StatCardProps[] = [ const cards: StatCard[] = [
{ { label: 'کل کاربران', value: fn(stats?.total_users), icon: UserGroupIcon, iconBg: 'bg-violet-100 dark:bg-violet-400/10', iconColor: 'text-violet-600 dark:text-violet-400' },
label: 'کل کاربران', { 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' },
value: fn(stats?.total_users), { label: 'کلینیک‌ها', value: fn(stats?.total_clinics), icon: BuildingOffice2Icon, iconBg: 'bg-blue-100 dark:bg-blue-400/10', iconColor: 'text-blue-600 dark:text-blue-400' },
icon: UserGroupIcon, { label: 'نوبت‌های امروز', value: fn(stats?.today_appointments), sub: stats ? `مجموع: ${fn(stats.total_appointments)}` : undefined, icon: CalendarDaysIcon, iconBg: 'bg-orange-100 dark:bg-orange-400/10', iconColor: 'text-orange-600 dark:text-orange-400' },
iconBg: 'bg-violet-100', { label: 'درآمد امروز', value: stats?.today_payments_amount !== undefined ? formatRial(stats.today_payments_amount) : '—', sub: stats ? `${fn(stats.today_payments_count)} تراکنش` : undefined, icon: CreditCardIcon, iconBg: 'bg-pink-100 dark:bg-pink-400/10', iconColor: 'text-pink-600 dark:text-pink-400' },
iconColor: 'text-violet-600', { label: 'کل درآمد', value: stats?.total_payments_amount !== undefined ? formatRial(stats.total_payments_amount) : '—', icon: CreditCardIcon, iconBg: 'bg-indigo-100 dark:bg-indigo-400/10', iconColor: 'text-indigo-600 dark:text-indigo-400' },
}, { label: 'نظرات در انتظار', value: fn(stats?.pending_comments), icon: ChatBubbleLeftEllipsisIcon, iconBg: 'bg-yellow-100 dark:bg-yellow-400/10', iconColor: 'text-yellow-600 dark:text-yellow-400' },
{ { label: 'درخواست تسویه', value: fn(stats?.pending_settlements), icon: BanknotesIcon, iconBg: 'bg-teal-100 dark:bg-teal-400/10', iconColor: 'text-teal-600 dark:text-teal-400' },
label: 'پزشکان فعال',
value: fn(stats?.active_doctors),
sub: stats ? `از ${formatNumber(stats.total_doctors)} پزشک` : undefined,
icon: HeartIcon,
iconBg: 'bg-emerald-100',
iconColor: 'text-emerald-600',
},
{
label: 'کلینیک‌ها',
value: fn(stats?.total_clinics),
icon: BuildingOffice2Icon,
iconBg: 'bg-blue-100',
iconColor: 'text-blue-600',
},
{
label: 'نوبت‌های امروز',
value: fn(stats?.today_appointments),
sub: stats ? `مجموع: ${formatNumber(stats.total_appointments)} نوبت` : undefined,
icon: CalendarDaysIcon,
iconBg: 'bg-orange-100',
iconColor: 'text-orange-600',
},
{
label: 'درآمد امروز',
value: stats?.today_payments_amount !== undefined ? formatRial(stats.today_payments_amount) : '—',
sub: stats ? `${formatNumber(stats.today_payments_count)} تراکنش` : undefined,
icon: CreditCardIcon,
iconBg: 'bg-pink-100',
iconColor: 'text-pink-600',
},
{
label: 'کل درآمد',
value: stats?.total_payments_amount !== undefined ? formatRial(stats.total_payments_amount) : '—',
icon: CreditCardIcon,
iconBg: 'bg-indigo-100',
iconColor: 'text-indigo-600',
},
{
label: 'نظرات در انتظار',
value: fn(stats?.pending_comments),
icon: ChatBubbleLeftEllipsisIcon,
iconBg: 'bg-yellow-100',
iconColor: 'text-yellow-600',
},
{
label: 'درخواست‌های تسویه',
value: fn(stats?.pending_settlements),
icon: BanknotesIcon,
iconBg: 'bg-teal-100',
iconColor: 'text-teal-600',
},
]; ];
return ( return (
<div> <div className="animate-slide-up">
<div className="mb-6 flex items-center justify-between"> {/* Header */}
<div className="flex items-center justify-between mb-6">
<div> <div>
<h1 className="text-2xl font-bold text-gray-900">داشبورد</h1> <h1 className="text-xl font-bold text-slate-900 dark:text-slate-50">داشبورد</h1>
<p className="text-sm text-gray-500 mt-1">خلاصه وضعیت سیستم</p> <p className="text-sm text-slate-500 dark:text-slate-400 mt-0.5">خلاصه وضعیت سیستم</p>
</div> </div>
{isError && ( {statsQ.isError && (
<button <button onClick={() => statsQ.refetch()} 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">
onClick={() => refetch()}
className="flex items-center gap-1.5 text-sm text-gray-500 hover:text-primary-600 transition-colors"
>
<ArrowPathIcon className="w-4 h-4" /> <ArrowPathIcon className="w-4 h-4" />
تلاش مجدد تلاش مجدد
</button> </button>
)} )}
</div> </div>
{isError && ( {statsQ.isError && (
<div className="mb-4 bg-red-50 border border-red-200 rounded-xl px-4 py-3 text-sm text-red-600"> <div className="mb-5 cp-card border-red-200 dark:border-red-500/20 bg-red-50 dark:bg-red-500/5 px-4 py-3 text-sm text-red-600 dark:text-red-400">
خطا در دریافت اطلاعات — اطلاعات نمایش داده شده ممکن است به‌روز نباشند. خطا در دریافت آمار — اطلاعات ممکن است به‌روز نباشند.
</div> </div>
)} )}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5"> {/* Stats grid */}
{cards.map((card) => ( <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<StatCard key={card.label} {...card} loading={isLoading} /> {statsQ.isLoading
))} ? Array.from({ length: 8 }).map((_, i) => <StatCardSkeleton key={i} />)
: cards.map((c) => (
<div key={c.label} className="cp-card p-5 flex items-start gap-4">
<div className={`cp-stat-icon ${c.iconBg}`}>
<c.icon className={`w-5 h-5 ${c.iconColor}`} />
</div>
<div className="min-w-0 flex-1">
<p className="text-xs text-slate-500 dark:text-slate-400 mb-1">{c.label}</p>
<p className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-none">{c.value}</p>
{c.sub && <p className="text-xs text-slate-400 dark:text-slate-500 mt-1.5">{c.sub}</p>}
</div>
</div>
))
}
</div> </div>
<div className="mt-6 bg-white rounded-2xl shadow-[0_1px_3px_rgba(0,0,0,.08)] p-6"> {/* Recent activities */}
<h3 className="text-base font-semibold text-gray-800 mb-4">فعالیت‌های اخیر</h3> <div className="mt-5 grid grid-cols-1 lg:grid-cols-3 gap-4">
<div className="text-center py-10 text-gray-400 text-sm">
در حال توسعه... {/* 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 ? <RecentSkeleton /> : recentQ.isError ? (
<p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
) : !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>
<MicroBadge status={a.status} map={APPT_STATUS} />
</Link>
</li>
))}
</ul>
)}
</div> </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 ? <RecentSkeleton /> : recentQ.isError ? (
<p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
) : !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>
<MicroBadge status={p.status} map={PAY_STATUS} />
</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 ? <RecentSkeleton /> : recentQ.isError ? (
<p className="text-center py-6 text-sm text-slate-400">خطا در دریافت اطلاعات</p>
) : !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>
</div> </div>
</div> </div>
); );
assets/admin/pages/DoctorDetailPage.tsx
+6 -6
View File
@@ -11,9 +11,9 @@ import { ActiveBadge } from '../components/ui/StatusBadge';
function InfoRow({ label, value }: { label: string; value: React.ReactNode }) { function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
return ( return (
<div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0"> <div className="cp-info-row">
<span className="text-sm text-gray-500">{label}</span> <span className="cp-info-label text-sm">{label}</span>
<span className="text-sm font-medium text-gray-900">{value ?? '—'}</span> <span className="cp-info-value">{value ?? '—'}</span>
</div> </div>
); );
} }
@@ -42,7 +42,7 @@ export default function DoctorDetailPage() {
action={ action={
<button <button
onClick={() => navigate('/admin/doctors')} onClick={() => navigate('/admin/doctors')}
className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors" className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors"
> >
<ArrowRightIcon className="w-4 h-4" /> <ArrowRightIcon className="w-4 h-4" />
بازگشت بازگشت
@@ -51,9 +51,9 @@ export default function DoctorDetailPage() {
/> />
{isLoading ? ( {isLoading ? (
<div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3"> <div className="cp-card p-6 space-y-3">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" /> <div key={i} className="h-8 rounded-lg skeleton" />
))} ))}
</div> </div>
) : doctor ? ( ) : doctor ? (
assets/admin/pages/DoctorsPage.tsx
+7 -7
View File
@@ -52,7 +52,7 @@ export default function DoctorsPage() {
{d.first_name?.[0] ?? '?'} {d.first_name?.[0] ?? '?'}
</div> </div>
)} )}
<span className="font-medium text-gray-900">{d.first_name} {d.last_name}</span> <span className="font-medium text-slate-800 dark:text-slate-100">{d.first_name} {d.last_name}</span>
</div> </div>
), ),
}, },
@@ -60,7 +60,7 @@ export default function DoctorsPage() {
{ {
key: 'degree', key: 'degree',
header: 'درجه', header: 'درجه',
render: (d) => <span className="text-xs bg-blue-50 text-blue-700 px-2 py-0.5 rounded-full">{d.degree}</span>, render: (d) => <span className="text-xs bg-blue-50 dark:bg-blue-400/10 text-blue-700 dark:text-blue-300 px-2 py-0.5 rounded-full">{d.degree}</span>,
}, },
{ {
key: 'gender', key: 'gender',
@@ -73,7 +73,7 @@ export default function DoctorsPage() {
render: (d) => ( render: (d) => (
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
{d.specialties?.slice(0, 2).map((s) => ( {d.specialties?.slice(0, 2).map((s) => (
<span key={s.uuid} className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded-full">{s.name}</span> <span key={s.uuid} className="text-xs bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 px-2 py-0.5 rounded-full">{s.name}</span>
))} ))}
{(d.specialties?.length ?? 0) > 2 && ( {(d.specialties?.length ?? 0) > 2 && (
<span className="text-xs text-gray-400">+{d.specialties.length - 2}</span> <span className="text-xs text-gray-400">+{d.specialties.length - 2}</span>
@@ -103,7 +103,7 @@ export default function DoctorsPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پزشکان' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پزشکان' }]}
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<DataTable<Doctor> <DataTable<Doctor>
columns={columns} columns={columns}
data={items} data={items}
@@ -116,21 +116,21 @@ export default function DoctorsPage() {
<> <>
<button <button
onClick={() => navigate(`/admin/doctors/${doctor.uuid}`)} onClick={() => navigate(`/admin/doctors/${doctor.uuid}`)}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" className="cp-action-view"
title="مشاهده" title="مشاهده"
> >
<EyeIcon className="w-4 h-4" /> <EyeIcon className="w-4 h-4" />
</button> </button>
<button <button
onClick={() => navigate(`/admin/doctors/${doctor.uuid}?edit=1`)} onClick={() => navigate(`/admin/doctors/${doctor.uuid}?edit=1`)}
className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" className="cp-action-edit"
title="ویرایش" title="ویرایش"
> >
<PencilIcon className="w-4 h-4" /> <PencilIcon className="w-4 h-4" />
</button> </button>
<button <button
onClick={() => setDeleteTarget(doctor)} onClick={() => setDeleteTarget(doctor)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" className="cp-action-delete"
title="حذف" title="حذف"
> >
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
assets/admin/pages/LoginPage.tsx
+142 -45
View File
@@ -1,9 +1,11 @@
import React from 'react'; import React, { useEffect, useState } from 'react';
import { useForm } from 'react-hook-form'; import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod'; import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod'; import { z } from 'zod';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { EyeIcon, EyeSlashIcon, HeartIcon, SunIcon, MoonIcon } from '@heroicons/react/24/outline';
import { useAuthStore } from '../stores/authStore'; import { useAuthStore } from '../stores/authStore';
import { useUiStore } from '../stores/uiStore';
const schema = z.object({ const schema = z.object({
mobile: z.string().min(10, 'شماره موبایل معتبر نیست'), mobile: z.string().min(10, 'شماره موبایل معتبر نیست'),
@@ -14,10 +16,18 @@ type FormData = z.infer<typeof schema>;
export default function LoginPage() { export default function LoginPage() {
const login = useAuthStore((s) => s.login); 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>({ const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>({
resolver: zodResolver(schema), resolver: zodResolver(schema),
}); });
useEffect(() => {
document.documentElement.classList.toggle('dark', darkMode);
}, [darkMode]);
const onSubmit = async (data: FormData) => { const onSubmit = async (data: FormData) => {
try { try {
const res = await fetch('/api/v1/user/login', { const res = await fetch('/api/v1/user/login', {
@@ -28,66 +38,153 @@ export default function LoginPage() {
if (!res.ok) { if (!res.ok) {
const err = await res.json(); const err = await res.json();
toast.error(err.message || 'خطا در ورود'); toast.error(err?.errors?.[0]?.message ?? 'خطا در ورود');
return; return;
} }
const json = await res.json(); const json = await res.json();
login(json.access_token, json.refresh_token ?? ''); login(json.access_token, json.refresh_token ?? '');
toast.success('ورود موفق'); toast.success('خوش آمدید');
} catch { } catch {
toast.error('خطا در اتصال به سرور'); toast.error('خطا در اتصال به سرور');
} }
}; };
return ( return (
<div className="min-h-screen flex items-center justify-center bg-[#f1f5f9]"> <div className="min-h-screen flex bg-slate-50 dark:bg-gray-950 transition-colors duration-200">
<div className="bg-white rounded-2xl shadow-lg p-8 w-full max-w-sm">
<div className="text-center mb-8"> {/* ── Left panel: branding ───────────────── */}
<h1 className="text-2xl font-bold text-gray-900">ClinicPro</h1> <div className="hidden lg:flex flex-col flex-1 relative overflow-hidden bg-[#100c22]">
<p className="text-gray-500 text-sm mt-1">پنل مدیریت</p> {/* 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>
{/* 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>
</div> </div>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-5"> <div className="flex flex-col flex-1 items-center justify-center px-8 sm:px-12 py-12">
<div> {/* Mobile logo */}
<label className="block text-sm font-medium text-gray-700 mb-1"> <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">
</label> <HeartIcon className="w-5 h-5 text-white" />
<input </div>
{...register('mobile')} <span className="text-slate-900 dark:text-white font-bold text-xl">ClinicPro</span>
type="tel"
dir="ltr"
placeholder="09xxxxxxxxx"
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-right focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
/>
{errors.mobile && (
<p className="text-red-500 text-xs mt-1">{errors.mobile.message}</p>
)}
</div> </div>
<div> <div className="w-full max-w-sm">
<label className="block text-sm font-medium text-gray-700 mb-1"> <div className="mb-8">
رمز عبور <h1 className="text-2xl font-bold text-slate-900 dark:text-slate-50">ورود به پنل</h1>
</label> <p className="text-slate-500 dark:text-slate-400 text-sm mt-1.5">اطلاعات حساب مدیریتی خود را وارد کنید</p>
<input </div>
{...register('password')}
type="password"
placeholder="••••••••"
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
/>
{errors.password && (
<p className="text-red-500 text-xs mt-1">{errors.password.message}</p>
)}
</div>
<button <form onSubmit={handleSubmit(onSubmit)} className="space-y-5" noValidate>
type="submit" {/* Mobile number */}
disabled={isSubmitting} <div>
className="w-full h-11 bg-primary-600 hover:bg-primary-700 disabled:opacity-60 text-white font-medium rounded-[10px] transition-colors" <label className="cp-label">شماره موبایل</label>
> <input
{isSubmitting ? 'در حال ورود...' : 'ورود'} {...register('mobile')}
</button> type="tel"
</form> 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 */}
<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"
>
{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>
) : 'ورود به سیستم'}
</button>
</form>
</div>
</div>
</div> </div>
</div> </div>
); );
assets/admin/pages/PaymentDetailPage.tsx
+6 -6
View File
@@ -11,9 +11,9 @@ import StatusBadge from '../components/ui/StatusBadge';
function InfoRow({ label, value }: { label: string; value: React.ReactNode }) { function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
return ( return (
<div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0"> <div className="cp-info-row">
<span className="text-sm text-gray-500">{label}</span> <span className="cp-info-label text-sm">{label}</span>
<span className="text-sm font-medium text-gray-900">{value ?? '—'}</span> <span className="cp-info-value">{value ?? '—'}</span>
</div> </div>
); );
} }
@@ -41,7 +41,7 @@ export default function PaymentDetailPage() {
]} ]}
action={ action={
<button onClick={() => navigate('/admin/payments')} <button onClick={() => navigate('/admin/payments')}
className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors"> className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors">
<ArrowRightIcon className="w-4 h-4" /> <ArrowRightIcon className="w-4 h-4" />
بازگشت بازگشت
</button> </button>
@@ -49,9 +49,9 @@ export default function PaymentDetailPage() {
/> />
{isLoading ? ( {isLoading ? (
<div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3"> <div className="cp-card p-6 space-y-3">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" /> <div key={i} className="h-8 rounded-lg skeleton" />
))} ))}
</div> </div>
) : payment ? ( ) : payment ? (
assets/admin/pages/PaymentsPage.tsx
+4 -4
View File
@@ -56,7 +56,7 @@ export default function PaymentsPage() {
key: 'gateway', key: 'gateway',
header: 'درگاه', header: 'درگاه',
render: (p) => ( render: (p) => (
<span className="text-xs bg-gray-100 text-gray-700 px-2 py-0.5 rounded-full uppercase"> <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} {p.gateway}
</span> </span>
), ),
@@ -88,14 +88,14 @@ export default function PaymentsPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پرداخت‌ها' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'پرداخت‌ها' }]}
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<div className="flex items-center gap-3 mb-4 flex-wrap"> <div className="flex items-center gap-3 mb-4 flex-wrap">
{STATUS_FILTERS.map((f) => ( {STATUS_FILTERS.map((f) => (
<button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }} <button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${ className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
statusFilter === f.value statusFilter === f.value
? 'bg-primary-600 text-white' ? 'bg-primary-600 text-white'
: 'bg-gray-100 text-gray-600 hover:bg-gray-200' : '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} {f.label}
</button> </button>
@@ -112,7 +112,7 @@ export default function PaymentsPage() {
emptyMessage="هیچ پرداختی یافت نشد" emptyMessage="هیچ پرداختی یافت نشد"
actions={(payment) => ( actions={(payment) => (
<button onClick={() => navigate(`/admin/payments/${payment.uuid}`)} <button onClick={() => navigate(`/admin/payments/${payment.uuid}`)}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="مشاهده"> className="cp-action-view" title="مشاهده">
<EyeIcon className="w-4 h-4" /> <EyeIcon className="w-4 h-4" />
</button> </button>
)} )}
assets/admin/pages/RatingsPage.tsx
+2 -2
View File
@@ -71,7 +71,7 @@ export default function RatingsPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'امتیازها' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'امتیازها' }]}
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<DataTable<Rating> <DataTable<Rating>
columns={columns} columns={columns}
data={items} data={items}
@@ -82,7 +82,7 @@ export default function RatingsPage() {
emptyMessage="هیچ امتیازی یافت نشد" emptyMessage="هیچ امتیازی یافت نشد"
actions={(rating) => ( actions={(rating) => (
<button onClick={() => setDeleteTarget(rating)} <button onClick={() => setDeleteTarget(rating)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف"> className="cp-action-delete" title="حذف">
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
</button> </button>
)} )}
assets/admin/pages/RepresentationDetailPage.tsx
+15 -15
View File
@@ -14,9 +14,9 @@ import Modal from '../components/ui/Modal';
function DetailRow({ label, value }: { label: string; value: React.ReactNode }) { function DetailRow({ label, value }: { label: string; value: React.ReactNode }) {
return ( return (
<div className="flex items-start gap-4 py-3 border-b border-gray-100 last:border-0"> <div className="cp-info-row items-start gap-4">
<span className="text-sm text-gray-500 w-40 shrink-0">{label}</span> <span className="text-sm text-gray-500 w-40 shrink-0">{label}</span>
<span className="text-sm text-gray-800 font-medium">{value ?? '—'}</span> <span className="cp-info-value">{value ?? '—'}</span>
</div> </div>
); );
} }
@@ -122,7 +122,7 @@ export default function RepresentationDetailPage() {
{ label: 'نمایندگان', to: '/admin/representations' }, { label: 'نمایندگان', to: '/admin/representations' },
]} ]}
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-12 text-center text-gray-400"> <div className="cp-card p-12 text-center text-slate-400 dark:text-slate-500">
نماینده‌ای با این شناسه یافت نشد. نماینده‌ای با این شناسه یافت نشد.
</div> </div>
</div> </div>
@@ -176,7 +176,7 @@ export default function RepresentationDetailPage() {
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
{/* Basic Info */} {/* Basic Info */}
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<h2 className="text-sm font-semibold text-gray-700 mb-4">اطلاعات پایه</h2> <h2 className="text-sm font-semibold text-gray-700 mb-4">اطلاعات پایه</h2>
<DetailRow label="نام کامل" value={rep.full_name} /> <DetailRow label="نام کامل" value={rep.full_name} />
<DetailRow label="موبایل" value={ <DetailRow label="موبایل" value={
@@ -191,7 +191,7 @@ export default function RepresentationDetailPage() {
</div> </div>
{/* Bank Account */} {/* Bank Account */}
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<h2 className="text-sm font-semibold text-gray-700 mb-4">اطلاعات بانکی</h2> <h2 className="text-sm font-semibold text-gray-700 mb-4">اطلاعات بانکی</h2>
{rep.bank_account ? ( {rep.bank_account ? (
<> <>
@@ -219,7 +219,7 @@ export default function RepresentationDetailPage() {
footer={ footer={
<> <>
<button onClick={() => setEditOpen(false)} <button onClick={() => setEditOpen(false)}
className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors"> className="cp-btn-secondary">
لغو لغو
</button> </button>
<button <button
@@ -230,7 +230,7 @@ export default function RepresentationDetailPage() {
commission_percent: parseFloat(formData.commission_percent) || rep.commission_percent, commission_percent: parseFloat(formData.commission_percent) || rep.commission_percent,
} as any)} } as any)}
disabled={updateMutation.isPending} disabled={updateMutation.isPending}
className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors"> className="cp-btn-primary">
{updateMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'} {updateMutation.isPending ? 'در حال ذخیره...' : 'ذخیره'}
</button> </button>
</> </>
@@ -238,16 +238,16 @@ export default function RepresentationDetailPage() {
> >
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">نام کامل</label> <label className="cp-label">نام کامل</label>
<input value={formData.full_name} onChange={(e) => setFormData((p) => ({ ...p, full_name: e.target.value }))} <input value={formData.full_name} onChange={(e) => setFormData((p) => ({ ...p, full_name: e.target.value }))}
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> className="cp-input h-11" />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">شهر</label> <label className="cp-label">شهر</label>
<select <select
value={formData.city_id} value={formData.city_id}
onChange={(e) => setFormData((p) => ({ ...p, city_id: e.target.value }))} onChange={(e) => setFormData((p) => ({ ...p, city_id: e.target.value }))}
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white" className="cp-input h-11"
> >
<option value="">انتخاب شهر</option> <option value="">انتخاب شهر</option>
{cities.map((c) => ( {cities.map((c) => (
@@ -256,15 +256,15 @@ export default function RepresentationDetailPage() {
</select> </select>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">موبایل</label> <label className="cp-label">موبایل</label>
<input value={formData.mobile_number} onChange={(e) => setFormData((p) => ({ ...p, mobile_number: e.target.value }))} <input value={formData.mobile_number} onChange={(e) => setFormData((p) => ({ ...p, mobile_number: e.target.value }))}
dir="ltr" className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> dir="ltr" className="cp-input h-11" />
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">درصد کمیسیون</label> <label className="cp-label">درصد کمیسیون</label>
<input value={formData.commission_percent} onChange={(e) => setFormData((p) => ({ ...p, commission_percent: e.target.value }))} <input value={formData.commission_percent} onChange={(e) => setFormData((p) => ({ ...p, commission_percent: e.target.value }))}
type="number" min="0" max="100" dir="ltr" type="number" min="0" max="100" dir="ltr"
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> className="cp-input h-11" />
</div> </div>
</div> </div>
</Modal> </Modal>
assets/admin/pages/RepresentationsPage.tsx
+15 -15
View File
@@ -113,20 +113,20 @@ export default function RepresentationsPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نمایندگان' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'نمایندگان' }]}
action={ action={
<button onClick={() => setAddOpen(true)} <button onClick={() => setAddOpen(true)}
className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors"> className="cp-btn-primary">
<PlusIcon className="w-4 h-4" /> <PlusIcon className="w-4 h-4" />
افزودن نماینده افزودن نماینده
</button> </button>
} }
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
{/* City filter */} {/* City filter */}
<div className="mb-4 flex items-center gap-3"> <div className="mb-4 flex items-center gap-3">
<select <select
value={cityFilter} value={cityFilter}
onChange={(e) => { setCityFilter(e.target.value); setPage(1); }} onChange={(e) => { setCityFilter(e.target.value); setPage(1); }}
className="h-10 border border-gray-300 rounded-[10px] px-3 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white min-w-[160px]" className="cp-input min-w-[160px]"
> >
<option value="">همه شهرها</option> <option value="">همه شهرها</option>
{cities.map((c) => ( {cities.map((c) => (
@@ -154,11 +154,11 @@ export default function RepresentationsPage() {
actions={(rep) => ( actions={(rep) => (
<> <>
<button onClick={() => navigate(`/admin/representations/${rep.uuid}`)} <button onClick={() => navigate(`/admin/representations/${rep.uuid}`)}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="مشاهده"> className="cp-action-view" title="مشاهده">
<EyeIcon className="w-4 h-4" /> <EyeIcon className="w-4 h-4" />
</button> </button>
<button onClick={() => setDeleteTarget(rep)} <button onClick={() => setDeleteTarget(rep)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف"> className="cp-action-delete" title="حذف">
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
</button> </button>
</> </>
@@ -171,11 +171,11 @@ export default function RepresentationsPage() {
footer={ footer={
<> <>
<button onClick={() => { setAddOpen(false); reset(); }} <button onClick={() => { setAddOpen(false); reset(); }}
className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors"> className="cp-btn-secondary">
لغو لغو
</button> </button>
<button form="add-rep-form" type="submit" disabled={isSubmitting} <button form="add-rep-form" type="submit" disabled={isSubmitting}
className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors"> className="cp-btn-primary">
{isSubmitting ? 'در حال ذخیره...' : 'ذخیره'} {isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
</button> </button>
</> </>
@@ -183,21 +183,21 @@ export default function RepresentationsPage() {
> >
<form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4"> <form id="add-rep-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">نام کامل</label> <label className="cp-label">نام کامل</label>
<input {...register('full_name')} placeholder="علی محمدی" <input {...register('full_name')} placeholder="علی محمدی"
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> className="cp-input h-11" />
{errors.full_name && <p className="text-red-500 text-xs mt-1">{errors.full_name.message}</p>} {errors.full_name && <p className="text-red-500 text-xs mt-1">{errors.full_name.message}</p>}
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">شماره موبایل</label> <label className="cp-label">شماره موبایل</label>
<input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx" <input {...register('mobile_number')} dir="ltr" placeholder="09xxxxxxxxx"
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> className="cp-input h-11" />
{errors.mobile_number && <p className="text-red-500 text-xs mt-1">{errors.mobile_number.message}</p>} {errors.mobile_number && <p className="text-red-500 text-xs mt-1">{errors.mobile_number.message}</p>}
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">شهر</label> <label className="cp-label">شهر</label>
<select {...register('city_id')} <select {...register('city_id')}
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 bg-white"> className="cp-input h-11">
<option value="">انتخاب شهر</option> <option value="">انتخاب شهر</option>
{cities.map((c) => ( {cities.map((c) => (
<option key={c.id} value={c.id}>{c.label}</option> <option key={c.id} value={c.id}>{c.label}</option>
@@ -205,9 +205,9 @@ export default function RepresentationsPage() {
</select> </select>
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">درصد کمیسیون</label> <label className="cp-label">درصد کمیسیون</label>
<input {...register('commission_percent')} type="number" min="0" max="100" placeholder="10" dir="ltr" <input {...register('commission_percent')} type="number" min="0" max="100" placeholder="10" dir="ltr"
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> className="cp-input h-11" />
{errors.commission_percent && <p className="text-red-500 text-xs mt-1">{errors.commission_percent.message}</p>} {errors.commission_percent && <p className="text-red-500 text-xs mt-1">{errors.commission_percent.message}</p>}
</div> </div>
</form> </form>
assets/admin/pages/SecretariesPage.tsx
+7 -7
View File
@@ -94,7 +94,7 @@ function PermissionsMatrix({
const allActions = ['view', 'create', 'update', 'delete', 'cancel', 'update_status']; const allActions = ['view', 'create', 'update', 'delete', 'cancel', 'update_status'];
return ( return (
<tr key={section} className="border-t border-gray-100"> <tr key={section} className="border-t border-gray-100">
<td className="py-3 pr-0 text-gray-700 font-medium">{config.label}</td> <td className="py-3 pr-0 text-slate-700 dark:text-slate-300 font-medium">{config.label}</td>
{allActions.map((action) => { {allActions.map((action) => {
const actionConfig = config.actions.find((a) => a.key === action); const actionConfig = config.actions.find((a) => a.key === action);
if (!actionConfig) { if (!actionConfig) {
@@ -168,7 +168,7 @@ export default function SecretariesPage() {
{ {
key: 'user_name', key: 'user_name',
header: 'نام', header: 'نام',
render: (s) => <span className="font-medium text-gray-900">{s.user_name}</span>, render: (s) => <span className="font-medium text-slate-800 dark:text-slate-100">{s.user_name}</span>,
}, },
{ {
key: 'mobile_number', key: 'mobile_number',
@@ -190,7 +190,7 @@ export default function SecretariesPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'منشی‌ها' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'منشی‌ها' }]}
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<DataTable<Secretary> <DataTable<Secretary>
columns={columns} columns={columns}
data={items} data={items}
@@ -202,11 +202,11 @@ export default function SecretariesPage() {
actions={(sec) => ( actions={(sec) => (
<> <>
<button onClick={() => openEdit(sec)} <button onClick={() => openEdit(sec)}
className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" title="ویرایش دسترسی‌ها"> className="cp-action-edit" title="ویرایش دسترسی‌ها">
<PencilIcon className="w-4 h-4" /> <PencilIcon className="w-4 h-4" />
</button> </button>
<button onClick={() => setDeleteTarget(sec)} <button onClick={() => setDeleteTarget(sec)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف"> className="cp-action-delete" title="حذف">
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
</button> </button>
</> </>
@@ -223,13 +223,13 @@ export default function SecretariesPage() {
footer={ footer={
<> <>
<button onClick={() => setEditTarget(null)} <button onClick={() => setEditTarget(null)}
className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors"> className="cp-btn-secondary">
لغو لغو
</button> </button>
<button <button
onClick={() => editTarget && updatePermsMutation.mutate({ uuid: editTarget.uuid, permissions: editPerms })} onClick={() => editTarget && updatePermsMutation.mutate({ uuid: editTarget.uuid, permissions: editPerms })}
disabled={updatePermsMutation.isPending} disabled={updatePermsMutation.isPending}
className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors"> className="cp-btn-primary">
{updatePermsMutation.isPending ? 'در حال ذخیره...' : 'ذخیره دسترسی‌ها'} {updatePermsMutation.isPending ? 'در حال ذخیره...' : 'ذخیره دسترسی‌ها'}
</button> </button>
</> </>
assets/admin/pages/SettlementsPage.tsx
+8 -8
View File
@@ -82,12 +82,12 @@ export default function SettlementsPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'تسویه‌حساب' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'تسویه‌حساب' }]}
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<div className="flex items-center gap-3 mb-4"> <div className="flex items-center gap-3 mb-4">
{STATUS_FILTERS.map((f) => ( {STATUS_FILTERS.map((f) => (
<button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }} <button key={f.value} onClick={() => { setStatusFilter(f.value); setPage(1); }}
className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${ className={`px-3 py-1.5 rounded-lg text-xs font-medium transition-colors ${
statusFilter === f.value ? 'bg-primary-600 text-white' : 'bg-gray-100 text-gray-600 hover:bg-gray-200' 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} {f.label}
</button> </button>
@@ -102,7 +102,7 @@ export default function SettlementsPage() {
actions={(s) => ( actions={(s) => (
<> <>
<button onClick={() => navigate(`/admin/settlements/${s.uuid}`)} <button onClick={() => navigate(`/admin/settlements/${s.uuid}`)}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" title="مشاهده"> className="cp-action-view" title="مشاهده">
<EyeIcon className="w-4 h-4" /> <EyeIcon className="w-4 h-4" />
</button> </button>
{s.status === 'pending' && ( {s.status === 'pending' && (
@@ -112,7 +112,7 @@ export default function SettlementsPage() {
<CheckIcon className="w-4 h-4" /> <CheckIcon className="w-4 h-4" />
</button> </button>
<button onClick={() => setRejectTarget(s)} <button onClick={() => setRejectTarget(s)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="رد"> className="cp-action-delete" title="رد">
<XMarkIcon className="w-4 h-4" /> <XMarkIcon className="w-4 h-4" />
</button> </button>
</> </>
@@ -140,25 +140,25 @@ export default function SettlementsPage() {
footer={ footer={
<> <>
<button onClick={() => { setRejectTarget(null); setRejectReason(''); }} <button onClick={() => { setRejectTarget(null); setRejectReason(''); }}
className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors"> className="cp-btn-secondary">
لغو لغو
</button> </button>
<button <button
onClick={() => rejectTarget && rejectMutation.mutate({ s: rejectTarget, reason: rejectReason })} onClick={() => rejectTarget && rejectMutation.mutate({ s: rejectTarget, reason: rejectReason })}
disabled={!rejectReason || rejectMutation.isPending} disabled={!rejectReason || rejectMutation.isPending}
className="px-4 py-2 bg-red-600 text-white text-sm rounded-[10px] hover:bg-red-700 disabled:opacity-50 transition-colors"> className="cp-btn-danger">
{rejectMutation.isPending ? 'در حال ارسال...' : 'رد کردن'} {rejectMutation.isPending ? 'در حال ارسال...' : 'رد کردن'}
</button> </button>
</> </>
} }
> >
<label className="block text-sm font-medium text-gray-700 mb-2">دلیل رد:</label> <label className="cp-label mb-2">دلیل رد:</label>
<textarea <textarea
value={rejectReason} value={rejectReason}
onChange={(e) => setRejectReason(e.target.value)} onChange={(e) => setRejectReason(e.target.value)}
rows={4} rows={4}
placeholder="دلیل رد درخواست را بنویسید..." placeholder="دلیل رد درخواست را بنویسید..."
className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" className="cp-textarea resize-none"
/> />
</Modal> </Modal>
</div> </div>
assets/admin/pages/SmsPage.tsx
+16 -16
View File
@@ -164,7 +164,7 @@ export default function SmsPage() {
action={ action={
activeTab === 'samples' ? ( activeTab === 'samples' ? (
<button onClick={() => setAddOpen(true)} <button onClick={() => setAddOpen(true)}
className="flex items-center gap-2 px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 transition-colors"> className="cp-btn-primary">
<PlusIcon className="w-4 h-4" /> <PlusIcon className="w-4 h-4" />
افزودن قالب افزودن قالب
</button> </button>
@@ -172,14 +172,14 @@ export default function SmsPage() {
} }
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100"> <div className="cp-card">
<div className="flex border-b border-gray-200 px-6 pt-4"> <div className="flex border-b border-slate-200 dark:border-gray-700 px-6 pt-4">
{tabs.map((t) => ( {tabs.map((t) => (
<button key={t.key} onClick={() => handleTabChange(t.key)} <button key={t.key} onClick={() => handleTabChange(t.key)}
className={`pb-3 px-4 text-sm font-medium border-b-2 transition-colors -mb-px ${ className={`pb-3 px-4 text-sm font-medium border-b-2 transition-colors -mb-px ${
activeTab === t.key activeTab === t.key
? 'border-primary-600 text-primary-600' ? 'border-primary-600 text-primary-600'
: 'border-transparent text-gray-500 hover:text-gray-700' : 'border-transparent text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200'
}`}> }`}>
{t.label} {t.label}
</button> </button>
@@ -196,7 +196,7 @@ export default function SmsPage() {
emptyMessage="هیچ قالبی یافت نشد" emptyMessage="هیچ قالبی یافت نشد"
actions={(t) => ( actions={(t) => (
<button onClick={() => setDeleteTarget(t)} <button onClick={() => setDeleteTarget(t)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="حذف"> className="cp-action-delete" title="حذف">
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
</button> </button>
)} )}
@@ -224,7 +224,7 @@ export default function SmsPage() {
<CheckIcon className="w-4 h-4" /> <CheckIcon className="w-4 h-4" />
</button> </button>
<button onClick={() => setRejectTarget(t)} <button onClick={() => setRejectTarget(t)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" title="رد"> className="cp-action-delete" title="رد">
<XMarkIcon className="w-4 h-4" /> <XMarkIcon className="w-4 h-4" />
</button> </button>
</> </>
@@ -262,11 +262,11 @@ export default function SmsPage() {
footer={ footer={
<> <>
<button onClick={() => setAddOpen(false)} <button onClick={() => setAddOpen(false)}
className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors"> className="cp-btn-secondary">
لغو لغو
</button> </button>
<button form="add-sms-form" type="submit" disabled={isSubmitting} <button form="add-sms-form" type="submit" disabled={isSubmitting}
className="px-4 py-2 bg-primary-600 text-white text-sm rounded-[10px] hover:bg-primary-700 disabled:opacity-50 transition-colors"> className="cp-btn-primary">
{isSubmitting ? 'در حال ذخیره...' : 'ذخیره'} {isSubmitting ? 'در حال ذخیره...' : 'ذخیره'}
</button> </button>
</> </>
@@ -274,15 +274,15 @@ export default function SmsPage() {
> >
<form id="add-sms-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4"> <form id="add-sms-form" onSubmit={handleSubmit((d) => createMutation.mutate(d))} className="space-y-4">
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">نام قالب</label> <label className="cp-label">نام قالب</label>
<input {...register('name')} placeholder="مثال: تأیید نوبت" <input {...register('name')} placeholder="مثال: تأیید نوبت"
className="w-full h-11 border border-gray-300 rounded-[10px] px-3 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500" /> className="cp-input h-11" />
{errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>} {errors.name && <p className="text-red-500 text-xs mt-1">{errors.name.message}</p>}
</div> </div>
<div> <div>
<label className="block text-sm font-medium text-gray-700 mb-1">متن قالب</label> <label className="cp-label">متن قالب</label>
<textarea {...register('body')} rows={4} placeholder="متن پیامک..." <textarea {...register('body')} rows={4} placeholder="متن پیامک..."
className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" /> className="cp-textarea resize-none" />
{errors.body && <p className="text-red-500 text-xs mt-1">{errors.body.message}</p>} {errors.body && <p className="text-red-500 text-xs mt-1">{errors.body.message}</p>}
</div> </div>
</form> </form>
@@ -293,22 +293,22 @@ export default function SmsPage() {
footer={ footer={
<> <>
<button onClick={() => { setRejectTarget(null); setRejectReason(''); }} <button onClick={() => { setRejectTarget(null); setRejectReason(''); }}
className="px-4 py-2 border border-gray-300 text-sm text-gray-700 rounded-[10px] hover:bg-gray-50 transition-colors"> className="cp-btn-secondary">
لغو لغو
</button> </button>
<button <button
onClick={() => rejectTarget && rejectMutation.mutate({ t: rejectTarget, reason: rejectReason })} onClick={() => rejectTarget && rejectMutation.mutate({ t: rejectTarget, reason: rejectReason })}
disabled={!rejectReason || rejectMutation.isPending} disabled={!rejectReason || rejectMutation.isPending}
className="px-4 py-2 bg-red-600 text-white text-sm rounded-[10px] hover:bg-red-700 disabled:opacity-50 transition-colors"> className="cp-btn-danger">
رد کردن رد کردن
</button> </button>
</> </>
} }
> >
<label className="block text-sm font-medium text-gray-700 mb-2">دلیل رد:</label> <label className="cp-label mb-2">دلیل رد:</label>
<textarea value={rejectReason} onChange={(e) => setRejectReason(e.target.value)} <textarea value={rejectReason} onChange={(e) => setRejectReason(e.target.value)}
rows={4} placeholder="دلیل رد را بنویسید..." rows={4} placeholder="دلیل رد را بنویسید..."
className="w-full border border-gray-300 rounded-[10px] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 resize-none" /> className="cp-textarea resize-none" />
</Modal> </Modal>
<ConfirmDialog <ConfirmDialog
assets/admin/pages/UserDetailPage.tsx
+6 -6
View File
@@ -11,9 +11,9 @@ import { ActiveBadge } from '../components/ui/StatusBadge';
function InfoRow({ label, value }: { label: string; value: React.ReactNode }) { function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
return ( return (
<div className="flex items-center justify-between py-3 border-b border-gray-100 last:border-0"> <div className="cp-info-row">
<span className="text-sm text-gray-500">{label}</span> <span className="cp-info-label text-sm">{label}</span>
<span className="text-sm font-medium text-gray-900">{value ?? '—'}</span> <span className="cp-info-value">{value ?? '—'}</span>
</div> </div>
); );
} }
@@ -42,7 +42,7 @@ export default function UserDetailPage() {
action={ action={
<button <button
onClick={() => navigate('/admin/users')} onClick={() => navigate('/admin/users')}
className="flex items-center gap-2 text-sm text-gray-500 hover:text-gray-800 transition-colors" className="flex items-center gap-2 text-sm text-slate-500 dark:text-slate-400 hover:text-slate-800 dark:hover:text-slate-100 transition-colors"
> >
<ArrowRightIcon className="w-4 h-4" /> <ArrowRightIcon className="w-4 h-4" />
بازگشت بازگشت
@@ -51,9 +51,9 @@ export default function UserDetailPage() {
/> />
{isLoading ? ( {isLoading ? (
<div className="bg-white rounded-2xl border border-gray-100 p-6 space-y-3"> <div className="cp-card p-6 space-y-3">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (
<div key={i} className="h-8 bg-gray-100 rounded-lg animate-pulse" /> <div key={i} className="h-8 rounded-lg skeleton" />
))} ))}
</div> </div>
) : user ? ( ) : user ? (
assets/admin/pages/UsersPage.tsx
+6 -6
View File
@@ -44,7 +44,7 @@ export default function UsersPage() {
key: 'name', key: 'name',
header: 'نام', header: 'نام',
render: (u) => ( render: (u) => (
<span className="font-medium text-gray-900"> <span className="font-medium text-slate-800 dark:text-slate-100">
{u.name || (u.first_name || u.last_name ? `${u.first_name ?? ''} ${u.last_name ?? ''}`.trim() : '—')} {u.name || (u.first_name || u.last_name ? `${u.first_name ?? ''} ${u.last_name ?? ''}`.trim() : '—')}
</span> </span>
), ),
@@ -58,7 +58,7 @@ export default function UsersPage() {
key: 'roles', key: 'roles',
header: 'نقش', header: 'نقش',
render: (u) => ( render: (u) => (
<span className="text-xs bg-gray-100 text-gray-700 px-2 py-0.5 rounded-full"> <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">
{u.roles.includes('ROLE_ADMIN') {u.roles.includes('ROLE_ADMIN')
? 'ادمین' ? 'ادمین'
: u.roles.includes('ROLE_DOCTOR') : u.roles.includes('ROLE_DOCTOR')
@@ -89,7 +89,7 @@ export default function UsersPage() {
breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'کاربران' }]} breadcrumbs={[{ label: 'داشبورد', to: '/admin/dashboard' }, { label: 'کاربران' }]}
/> />
<div className="bg-white rounded-2xl shadow-sm border border-gray-100 p-6"> <div className="cp-card p-6">
<DataTable<User> <DataTable<User>
columns={columns} columns={columns}
data={items} data={items}
@@ -102,21 +102,21 @@ export default function UsersPage() {
<> <>
<button <button
onClick={() => navigate(`/admin/users/${user.uuid}`)} onClick={() => navigate(`/admin/users/${user.uuid}`)}
className="p-1.5 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors" className="cp-action-view"
title="مشاهده" title="مشاهده"
> >
<EyeIcon className="w-4 h-4" /> <EyeIcon className="w-4 h-4" />
</button> </button>
<button <button
onClick={() => navigate(`/admin/users/${user.uuid}?edit=1`)} onClick={() => navigate(`/admin/users/${user.uuid}?edit=1`)}
className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded-lg transition-colors" className="cp-action-edit"
title="ویرایش" title="ویرایش"
> >
<PencilIcon className="w-4 h-4" /> <PencilIcon className="w-4 h-4" />
</button> </button>
<button <button
onClick={() => setDeleteTarget(user)} onClick={() => setDeleteTarget(user)}
className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors" className="cp-action-delete"
title="حذف" title="حذف"
> >
<TrashIcon className="w-4 h-4" /> <TrashIcon className="w-4 h-4" />
assets/admin/stores/uiStore.ts
+26 -5
View File
@@ -1,13 +1,34 @@
import { create } from 'zustand'; import { create } from 'zustand';
import { persist } from 'zustand/middleware';
interface UiState { interface UiState {
sidebarOpen: boolean; sidebarOpen: boolean;
darkMode: boolean;
toggleSidebar: () => void; toggleSidebar: () => void;
setSidebarOpen: (open: boolean) => void; setSidebarOpen: (open: boolean) => void;
toggleDarkMode: () => void;
} }
export const useUiStore = create<UiState>((set) => ({ export const useUiStore = create<UiState>()(
sidebarOpen: true, persist(
toggleSidebar: () => set((s) => ({ sidebarOpen: !s.sidebarOpen })), (set, get) => ({
setSidebarOpen: (open) => set({ sidebarOpen: open }), sidebarOpen: true,
})); darkMode: 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);
},
}),
{
name: 'clinicpro-ui',
onRehydrateStorage: () => (state) => {
if (state?.darkMode) {
document.documentElement.classList.add('dark');
}
},
},
),
);
assets/admin/styles.css
+125 -11
View File
@@ -1,7 +1,11 @@
@import "tailwindcss"; @import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');
/* Class-based dark mode for Tailwind v4 */
@custom-variant dark (&:where(.dark, .dark *));
@theme { @theme {
--color-primary-50: #f5f3ff; --color-primary-50: #f5f3ff;
--color-primary-100: #ede9fe; --color-primary-100: #ede9fe;
--color-primary-200: #ddd6fe; --color-primary-200: #ddd6fe;
--color-primary-300: #c4b5fd; --color-primary-300: #c4b5fd;
@@ -12,27 +16,137 @@
--color-primary-800: #5b21b6; --color-primary-800: #5b21b6;
--color-primary-900: #4c1d95; --color-primary-900: #4c1d95;
--color-bg-body: #f1f5f9; --font-sans: "Vazirmatn", ui-sans-serif, system-ui, sans-serif;
--color-bg-card: #ffffff;
--color-bg-sidebar: #0f172a;
--color-bg-sidebar-active: rgba(139, 92, 246, 0.15);
--font-sans: "Vazirmatn", "Inter", ui-sans-serif, system-ui, sans-serif;
} }
* { *, *::before, *::after {
font-family: var(--font-sans); font-family: var(--font-sans);
} }
html {
scroll-behavior: smooth;
}
body { body {
background-color: var(--color-bg-body);
direction: rtl; direction: rtl;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
/* ── Scrollbar ──────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-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; }
/* ── Animations ─────────────────────────────── */
@keyframes scale-in { @keyframes scale-in {
from { opacity: 0; transform: scale(0.95); } from { opacity: 0; transform: scale(0.96) translateY(-4px); }
to { opacity: 1; transform: scale(1); } 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; }
} }
.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; }
/* ── Skeleton shimmer ───────────────────────── */
.skeleton {
background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 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 ────────────────────────── */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .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-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 ─────────────────── */
@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;
}
/* 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;
}
.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;
}
.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;
}
.cp-label {
@apply block text-sm font-medium text-slate-700 dark:text-slate-300 mb-1.5;
}
/* 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;
}
.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;
}
.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;
}
.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;
}
/* 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; }
/* 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;
}
.cp-stat-icon {
@apply w-11 h-11 rounded-xl flex items-center justify-center shrink-0;
}
/* Section heading inside a card */
.cp-section-title {
@apply text-sm font-semibold text-slate-700 dark:text-slate-200 mb-4;
}
/* 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;
}
.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; }
}
package-lock.json
Generated
+6 -5
View File
@@ -41,6 +41,12 @@
"typescript": "^5.0.0", "typescript": "^5.0.0",
"webpack": "^5.72", "webpack": "^5.72",
"webpack-cli": "^6.0.0" "webpack-cli": "^6.0.0"
},
"optionalDependencies": {
"@tailwindcss/oxide-darwin-arm64": "^4.3.0",
"@tailwindcss/oxide-linux-arm64-gnu": "^4.3.0",
"lightningcss-darwin-arm64": "^1.32.0",
"lightningcss-linux-arm64-gnu": "^1.32.0"
} }
}, },
"node_modules/@adobe/css-tools": { "node_modules/@adobe/css-tools": {
@@ -2839,7 +2845,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -2907,7 +2912,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"license": "MIT", "license": "MIT",
"optional": true, "optional": true,
"os": [ "os": [
@@ -3308,7 +3312,6 @@
"version": "19.2.17", "version": "19.2.17",
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz", "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
"integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==", "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
"dev": true,
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"csstype": "^3.2.2" "csstype": "^3.2.2"
@@ -5630,7 +5633,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"license": "MPL-2.0", "license": "MPL-2.0",
"optional": true, "optional": true,
"os": [ "os": [
@@ -5714,7 +5716,6 @@
"cpu": [ "cpu": [
"arm64" "arm64"
], ],
"dev": true,
"license": "MPL-2.0", "license": "MPL-2.0",
"optional": true, "optional": true,
"os": [ "os": [
package.json
+6
View File
@@ -36,6 +36,12 @@
"zod": "^3.0.0", "zod": "^3.0.0",
"zustand": "^5.0.0" "zustand": "^5.0.0"
}, },
"optionalDependencies": {
"lightningcss-darwin-arm64": "^1.32.0",
"lightningcss-linux-arm64-gnu": "^1.32.0",
"@tailwindcss/oxide-darwin-arm64": "^4.3.0",
"@tailwindcss/oxide-linux-arm64-gnu": "^4.3.0"
},
"license": "UNLICENSED", "license": "UNLICENSED",
"private": true, "private": true,
"scripts": { "scripts": {