refactor: update UI components for consistency and dark mode support
- 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
@@ -27,39 +27,43 @@ export default function ConfirmDialog({
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div className="absolute inset-0 bg-black/40" onClick={onCancel} />
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
|
||||
<div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" onClick={onCancel} />
|
||||
<div
|
||||
className="relative bg-white rounded-2xl shadow-2xl w-full max-w-sm mx-4 p-6"
|
||||
style={{ animation: 'scale-in 200ms ease' }}
|
||||
className="relative bg-white dark:bg-gray-900 rounded-2xl shadow-2xl dark:shadow-black/40 border border-slate-200/60 dark:border-gray-700/50 w-full max-w-sm p-6 animate-scale-in"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${danger ? 'bg-red-100' : 'bg-yellow-100'}`}>
|
||||
<ExclamationTriangleIcon className={`w-5 h-5 ${danger ? 'text-red-600' : 'text-yellow-600'}`} />
|
||||
<div className={`shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${danger ? 'bg-red-100 dark:bg-red-500/10' : 'bg-amber-100 dark:bg-amber-500/10'}`}>
|
||||
<ExclamationTriangleIcon className={`w-5 h-5 ${danger ? 'text-red-600 dark:text-red-400' : 'text-amber-600 dark:text-amber-400'}`} />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900 text-base">{title}</h3>
|
||||
<p className="text-sm text-gray-500 mt-1">{message}</p>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100 text-base leading-snug">{title}</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed">{message}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 mt-6 justify-end">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
className="px-4 py-2 rounded-[10px] border border-gray-300 text-sm text-gray-700 hover:bg-gray-50 disabled:opacity-50 transition-colors"
|
||||
className="cp-btn-secondary px-5 py-2"
|
||||
>
|
||||
{cancelLabel}
|
||||
</button>
|
||||
<button
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
className={`px-4 py-2 rounded-[10px] text-sm text-white font-medium disabled:opacity-50 transition-colors ${
|
||||
danger
|
||||
? 'bg-red-600 hover:bg-red-700'
|
||||
: 'bg-primary-600 hover:bg-primary-700'
|
||||
}`}
|
||||
className={`px-5 py-2 text-white font-medium ${danger ? 'cp-btn-danger' : 'cp-btn-primary'}`}
|
||||
>
|
||||
{loading ? 'در حال انجام...' : confirmLabel}
|
||||
{loading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
|
||||
</svg>
|
||||
در حال انجام...
|
||||
</span>
|
||||
) : confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,6 +6,7 @@ export interface Column<T> {
|
||||
header: string;
|
||||
render?: (row: T) => React.ReactNode;
|
||||
sortable?: boolean;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface Props<T> {
|
||||
@@ -18,14 +19,15 @@ interface Props<T> {
|
||||
actions?: (row: T) => React.ReactNode;
|
||||
emptyMessage?: string;
|
||||
emptyAction?: React.ReactNode;
|
||||
headerExtra?: React.ReactNode;
|
||||
}
|
||||
|
||||
function SkeletonRow({ cols }: { cols: number }) {
|
||||
return (
|
||||
<tr>
|
||||
{Array.from({ length: cols }).map((_, i) => (
|
||||
<td key={i} className="px-4 py-3">
|
||||
<div className="h-4 bg-gray-200 rounded animate-pulse w-full" />
|
||||
<td key={i} className="px-4 py-3.5">
|
||||
<div className="h-4 rounded-lg skeleton" style={{ width: `${60 + (i * 17) % 40}%` }} />
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
@@ -42,73 +44,86 @@ export default function DataTable<T extends object>({
|
||||
actions,
|
||||
emptyMessage = 'هیچ موردی یافت نشد',
|
||||
emptyAction,
|
||||
headerExtra,
|
||||
}: Props<T>) {
|
||||
const allColumns = actions
|
||||
? [...columns, { key: '__actions', header: 'اقدامات' }]
|
||||
? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-28' }]
|
||||
: columns;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{onSearchChange !== undefined && (
|
||||
<div className="mb-4">
|
||||
<div className="relative max-w-xs">
|
||||
<MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchValue}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
placeholder={searchPlaceholder}
|
||||
className="w-full h-10 pr-9 pl-3 border border-gray-300 rounded-[10px] text-sm focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
{/* Search + extras header bar */}
|
||||
{(onSearchChange !== undefined || headerExtra) && (
|
||||
<div className="flex items-center justify-between gap-3 mb-4 flex-wrap">
|
||||
{onSearchChange !== undefined && (
|
||||
<div className="relative w-72 max-w-full">
|
||||
<MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-slate-500 pointer-events-none" />
|
||||
<input
|
||||
type="text"
|
||||
value={searchValue}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
placeholder={searchPlaceholder}
|
||||
className="cp-input pr-9"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{headerExtra && <div className="flex items-center gap-2">{headerExtra}</div>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="overflow-x-auto rounded-xl border border-gray-200">
|
||||
<div className="overflow-x-auto rounded-xl border border-slate-200 dark:border-gray-700/50">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="bg-gray-50 border-b border-gray-200">
|
||||
<tr className="bg-slate-50 dark:bg-gray-800/60 border-b border-slate-200 dark:border-gray-700/50">
|
||||
{allColumns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
className="px-4 py-3 text-right text-xs font-semibold text-gray-500 uppercase tracking-wide whitespace-nowrap"
|
||||
className={`px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap ${col.className ?? ''}`}
|
||||
>
|
||||
{col.header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
|
||||
{loading ? (
|
||||
Array.from({ length: 5 }).map((_, i) => (
|
||||
Array.from({ length: 6 }).map((_, i) => (
|
||||
<SkeletonRow key={i} cols={allColumns.length} />
|
||||
))
|
||||
) : data.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={allColumns.length} className="text-center py-16">
|
||||
<div className="flex flex-col items-center gap-3 text-gray-400">
|
||||
<svg className="w-12 h-12" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
<p className="text-sm">{emptyMessage}</p>
|
||||
<td colSpan={allColumns.length} className="py-16 text-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-gray-800 flex items-center justify-center">
|
||||
<svg className="w-7 h-7 text-slate-400 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">{emptyMessage}</p>
|
||||
{emptyAction}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
data.map((row, rowIdx) => (
|
||||
<tr key={rowIdx} className="hover:bg-gray-50 transition-colors">
|
||||
<tr
|
||||
key={rowIdx}
|
||||
className="hover:bg-slate-50/80 dark:hover:bg-gray-800/40 transition-colors"
|
||||
>
|
||||
{columns.map((col) => (
|
||||
<td key={col.key} className="px-4 py-3 text-gray-700 whitespace-nowrap">
|
||||
<td
|
||||
key={col.key}
|
||||
className="px-4 py-3.5 text-slate-700 dark:text-slate-300 whitespace-nowrap"
|
||||
>
|
||||
{col.render
|
||||
? col.render(row)
|
||||
: ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
|
||||
</td>
|
||||
))}
|
||||
{actions && (
|
||||
<td className="px-4 py-3 whitespace-nowrap">
|
||||
<div className="flex items-center gap-2">{actions(row)}</div>
|
||||
<td className="px-4 py-3.5 whitespace-nowrap">
|
||||
<div className="flex items-center gap-1">{actions(row)}</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import React from 'react';
|
||||
import React, { useEffect } from 'react';
|
||||
import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
|
||||
@@ -20,27 +20,50 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function Modal({ open, title, size = 'md', onClose, children, footer }: Props) {
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
|
||||
document.addEventListener('keydown', onKey);
|
||||
return () => document.removeEventListener('keydown', onKey);
|
||||
}, [open, onClose]);
|
||||
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||||
<div className="absolute inset-0 bg-black/40" onClick={onClose} />
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
|
||||
{/* Backdrop */}
|
||||
<div
|
||||
className={`relative bg-white rounded-2xl shadow-2xl w-full ${sizeMap[size]} flex flex-col max-h-[90vh]`}
|
||||
style={{ animation: 'scale-in 200ms ease' }}
|
||||
className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Panel */}
|
||||
<div
|
||||
className={`
|
||||
relative bg-white dark:bg-gray-900
|
||||
rounded-2xl shadow-2xl dark:shadow-black/40
|
||||
border border-slate-200/60 dark:border-gray-700/50
|
||||
w-full ${sizeMap[size]} flex flex-col max-h-[90vh]
|
||||
animate-scale-in
|
||||
`}
|
||||
>
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 shrink-0">
|
||||
<h2 className="font-semibold text-gray-900 text-base">{title}</h2>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-gray-700/50 shrink-0">
|
||||
<h2 className="font-semibold text-slate-900 dark:text-slate-100 text-base">{title}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-md hover:bg-gray-100"
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<XMarkIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5">{children}</div>
|
||||
|
||||
{/* Footer */}
|
||||
{footer && (
|
||||
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 shrink-0">
|
||||
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-100 dark:border-gray-700/50 shrink-0 bg-slate-50/50 dark:bg-gray-800/30 rounded-b-2xl">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ChevronLeftIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface Crumb {
|
||||
label: string;
|
||||
@@ -10,31 +11,35 @@ interface Props {
|
||||
title: string;
|
||||
breadcrumbs?: Crumb[];
|
||||
action?: React.ReactNode;
|
||||
description?: string;
|
||||
}
|
||||
|
||||
export default function PageHeader({ title, breadcrumbs, action }: Props) {
|
||||
export default function PageHeader({ title, breadcrumbs, action, description }: Props) {
|
||||
return (
|
||||
<div className="flex items-start justify-between mb-6">
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-gray-900">{title}</h1>
|
||||
<div className="flex items-start justify-between mb-6 gap-4">
|
||||
<div className="min-w-0">
|
||||
{breadcrumbs && breadcrumbs.length > 0 && (
|
||||
<nav className="flex items-center gap-1 mt-1 text-sm text-gray-500">
|
||||
<nav className="flex items-center gap-0.5 mb-1.5 text-xs text-slate-500 dark:text-slate-400">
|
||||
{breadcrumbs.map((crumb, i) => (
|
||||
<React.Fragment key={i}>
|
||||
{i > 0 && <span className="text-gray-300">/</span>}
|
||||
{i > 0 && <ChevronLeftIcon className="w-3 h-3 text-slate-300 dark:text-slate-600 mx-0.5 shrink-0" />}
|
||||
{crumb.to ? (
|
||||
<Link to={crumb.to} className="hover:text-primary-600 transition-colors">
|
||||
<Link to={crumb.to} className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors truncate">
|
||||
{crumb.label}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-gray-700">{crumb.label}</span>
|
||||
<span className="text-slate-700 dark:text-slate-300 font-medium truncate">{crumb.label}</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-tight">{title}</h1>
|
||||
{description && (
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{action && <div>{action}</div>}
|
||||
{action && <div className="shrink-0">{action}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -22,47 +22,48 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
|
||||
} else {
|
||||
pages.push(1);
|
||||
if (page > 3) pages.push('...');
|
||||
for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) pages.push(i);
|
||||
if (page < totalPages - 2) pages.push('...');
|
||||
pages.push(totalPages);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between mt-4 text-sm">
|
||||
<span className="text-gray-500">
|
||||
نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)}
|
||||
<div className="flex items-center justify-between mt-5 pt-4 border-t border-slate-100 dark:border-gray-700/40 text-sm flex-wrap gap-3">
|
||||
<span className="text-slate-500 dark:text-slate-400 text-xs">
|
||||
نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)} مورد
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<button
|
||||
onClick={() => onPageChange(page - 1)}
|
||||
disabled={page === 1}
|
||||
className="p-1.5 rounded-lg hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronRightIcon className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{pages.map((p, i) =>
|
||||
p === '...' ? (
|
||||
<span key={`dots-${i}`} className="px-2 text-gray-400">...</span>
|
||||
<span key={`dots-${i}`} className="w-8 text-center text-slate-400 dark:text-slate-500 text-xs">…</span>
|
||||
) : (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => onPageChange(p as number)}
|
||||
className={`w-8 h-8 rounded-lg text-sm transition-colors ${
|
||||
className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
|
||||
p === page
|
||||
? 'bg-primary-600 text-white font-semibold'
|
||||
: 'text-gray-600 hover:bg-gray-100'
|
||||
? 'bg-primary-600 text-white shadow-sm shadow-primary-500/30'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
>
|
||||
{formatNumber(p as number)}
|
||||
</button>
|
||||
)
|
||||
)}
|
||||
|
||||
<button
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
disabled={page === totalPages}
|
||||
className="p-1.5 rounded-lg hover:bg-gray-100 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronLeftIcon className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
@@ -2,62 +2,62 @@ import React from 'react';
|
||||
import type { AppointmentStatus, PaymentStatus, SmsTemplateStatus, SettlementStatus } from '../../types';
|
||||
|
||||
const variants: Record<string, string> = {
|
||||
yellow: 'bg-yellow-100 text-yellow-800',
|
||||
blue: 'bg-blue-100 text-blue-800',
|
||||
purple: 'bg-purple-100 text-purple-800',
|
||||
orange: 'bg-orange-100 text-orange-800',
|
||||
indigo: 'bg-indigo-100 text-indigo-800',
|
||||
green: 'bg-green-100 text-green-800',
|
||||
red: 'bg-red-100 text-red-800',
|
||||
gray: 'bg-gray-100 text-gray-700',
|
||||
rose: 'bg-rose-100 text-rose-800',
|
||||
yellow: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-800 dark:text-yellow-300',
|
||||
blue: 'bg-blue-100 dark:bg-blue-400/10 text-blue-800 dark:text-blue-300',
|
||||
purple: 'bg-purple-100 dark:bg-purple-400/10 text-purple-800 dark:text-purple-300',
|
||||
orange: 'bg-orange-100 dark:bg-orange-400/10 text-orange-800 dark:text-orange-300',
|
||||
indigo: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-800 dark:text-indigo-300',
|
||||
green: 'bg-green-100 dark:bg-green-400/10 text-green-800 dark:text-green-300',
|
||||
red: 'bg-red-100 dark:bg-red-400/10 text-red-800 dark:text-red-300',
|
||||
gray: 'bg-slate-100 dark:bg-slate-400/10 text-slate-700 dark:text-slate-400',
|
||||
rose: 'bg-rose-100 dark:bg-rose-400/10 text-rose-800 dark:text-rose-300',
|
||||
};
|
||||
|
||||
const dots: Record<string, string> = {
|
||||
yellow: 'bg-yellow-500',
|
||||
blue: 'bg-blue-500',
|
||||
blue: 'bg-blue-500',
|
||||
purple: 'bg-purple-500',
|
||||
orange: 'bg-orange-500',
|
||||
indigo: 'bg-indigo-500',
|
||||
green: 'bg-green-500',
|
||||
red: 'bg-red-500',
|
||||
gray: 'bg-gray-400',
|
||||
rose: 'bg-rose-500',
|
||||
green: 'bg-green-500',
|
||||
red: 'bg-red-500',
|
||||
gray: 'bg-slate-400',
|
||||
rose: 'bg-rose-500',
|
||||
};
|
||||
|
||||
const appointmentMap: Record<AppointmentStatus, { color: string; label: string }> = {
|
||||
waiting_for_payment: { color: 'yellow', label: 'در انتظار پرداخت' },
|
||||
reserved: { color: 'blue', label: 'رزرو شده' },
|
||||
checked_in: { color: 'purple', label: 'ورود به مطب' },
|
||||
waiting: { color: 'orange', label: 'در صف انتظار' },
|
||||
in_progress: { color: 'indigo', label: 'در حال ویزیت' },
|
||||
visited: { color: 'green', label: 'ویزیت شده' },
|
||||
completed: { color: 'green', label: 'تکمیل شده' },
|
||||
cancelled_by_user: { color: 'red', label: 'لغو توسط بیمار' },
|
||||
cancelled_by_doctor: { color: 'red', label: 'لغو توسط پزشک' },
|
||||
cancelled_by_admin: { color: 'red', label: 'لغو توسط ادمین' },
|
||||
auto_cancel_unpaid: { color: 'gray', label: 'لغو خودکار' },
|
||||
no_show: { color: 'rose', label: 'غیبت' },
|
||||
waiting_for_payment: { color: 'yellow', label: 'انتظار پرداخت' },
|
||||
reserved: { color: 'blue', label: 'رزرو شده' },
|
||||
checked_in: { color: 'purple', label: 'ورود به مطب' },
|
||||
waiting: { color: 'orange', label: 'صف انتظار' },
|
||||
in_progress: { color: 'indigo', label: 'در حال ویزیت' },
|
||||
visited: { color: 'green', label: 'ویزیت شده' },
|
||||
completed: { color: 'green', label: 'تکمیل شده' },
|
||||
cancelled_by_user: { color: 'red', label: 'لغو بیمار' },
|
||||
cancelled_by_doctor: { color: 'red', label: 'لغو پزشک' },
|
||||
cancelled_by_admin: { color: 'red', label: 'لغو ادمین' },
|
||||
auto_cancel_unpaid: { color: 'gray', label: 'لغو خودکار' },
|
||||
no_show: { color: 'rose', label: 'غیبت' },
|
||||
};
|
||||
|
||||
const paymentMap: Record<PaymentStatus, { color: string; label: string }> = {
|
||||
pending: { color: 'yellow', label: 'در انتظار' },
|
||||
received: { color: 'green', label: 'موفق' },
|
||||
canceled: { color: 'red', label: 'لغو شده' },
|
||||
refund: { color: 'blue', label: 'استرداد' },
|
||||
pending: { color: 'yellow', label: 'در انتظار' },
|
||||
received: { color: 'green', label: 'موفق' },
|
||||
canceled: { color: 'red', label: 'لغو شده' },
|
||||
refund: { color: 'blue', label: 'استرداد' },
|
||||
};
|
||||
|
||||
const smsMap: Record<SmsTemplateStatus, { color: string; label: string }> = {
|
||||
draft: { color: 'gray', label: 'پیشنویس' },
|
||||
pending: { color: 'yellow', label: 'در انتظار تأیید' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
draft: { color: 'gray', label: 'پیشنویس' },
|
||||
pending: { color: 'yellow', label: 'در انتظار تأیید' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
};
|
||||
|
||||
const settlementMap: Record<SettlementStatus, { color: string; label: string }> = {
|
||||
pending: { color: 'yellow', label: 'در انتظار' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
pending: { color: 'yellow', label: 'در انتظار' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
};
|
||||
|
||||
interface Props {
|
||||
@@ -88,14 +88,12 @@ export default function StatusBadge({ type, value }: Props) {
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium ${variants[color] ?? variants.gray}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full ${dots[color] ?? dots.gray}`} />
|
||||
<span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dots[color] ?? dots.gray}`} />
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export function ActiveBadge({ active }: { active: boolean }) {
|
||||
return (
|
||||
<StatusBadge type="active" value={active ? 'active' : 'inactive'} />
|
||||
);
|
||||
return <StatusBadge type="active" value={active ? 'active' : 'inactive'} />;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user