Refactor code structure for improved readability and maintainability
This commit is contained in:
hamed
@@ -1,5 +1,5 @@
|
||||
import React from 'react';
|
||||
import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
||||
import { XMarkIcon, ExclamationTriangleIcon } from '@heroicons/react/24/outline';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
@@ -27,43 +27,36 @@ export default function ConfirmDialog({
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
|
||||
<div className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm" onClick={onCancel} />
|
||||
<div
|
||||
className="relative bg-white dark:bg-gray-900 rounded-2xl shadow-2xl dark:shadow-black/40 border border-slate-200/60 dark:border-gray-700/50 w-full max-w-sm p-6 animate-scale-in"
|
||||
>
|
||||
<div className="flex items-start gap-4">
|
||||
<div className={`shrink-0 w-10 h-10 rounded-xl flex items-center justify-center ${danger ? 'bg-red-100 dark:bg-red-500/10' : 'bg-amber-100 dark:bg-amber-500/10'}`}>
|
||||
<ExclamationTriangleIcon className={`w-5 h-5 ${danger ? 'text-red-600 dark:text-red-400' : 'text-amber-600 dark:text-amber-400'}`} />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-slate-900 dark:text-slate-100 text-base leading-snug">{title}</h3>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1.5 leading-relaxed">{message}</p>
|
||||
<div className="overlay" onClick={onCancel}>
|
||||
<div className="modal" style={{ maxWidth: 420 }} onClick={(e) => e.stopPropagation()}>
|
||||
<div className="modal-head">
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
|
||||
<span style={{
|
||||
width: 36, height: 36, borderRadius: 10, display: 'grid', placeItems: 'center', flexShrink: 0,
|
||||
background: danger ? 'var(--danger-bg)' : 'var(--warning-bg)',
|
||||
color: danger ? 'var(--danger)' : 'var(--warning)',
|
||||
}}>
|
||||
<ExclamationTriangleIcon style={{ width: 18, height: 18 }} />
|
||||
</span>
|
||||
<h2 style={{ fontSize: 16 }}>{title}</h2>
|
||||
</div>
|
||||
<button className="mini-btn" onClick={onCancel}>
|
||||
<XMarkIcon style={{ width: 18, height: 18 }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-3 mt-6 justify-end">
|
||||
<button
|
||||
onClick={onCancel}
|
||||
disabled={loading}
|
||||
className="cp-btn-secondary px-5 py-2"
|
||||
>
|
||||
<div className="modal-body">
|
||||
<p style={{ color: 'var(--text-2)', lineHeight: 1.75, margin: 0 }}>{message}</p>
|
||||
</div>
|
||||
<div className="modal-foot" style={{ justifyContent: 'flex-end' }}>
|
||||
<button className="btn ghost sm" onClick={onCancel} disabled={loading}>
|
||||
{cancelLabel}
|
||||
</button>
|
||||
<button
|
||||
className={`btn ${danger ? 'danger' : 'primary'} sm`}
|
||||
onClick={onConfirm}
|
||||
disabled={loading}
|
||||
className={`px-5 py-2 text-white font-medium ${danger ? 'cp-btn-danger' : 'cp-btn-primary'}`}
|
||||
>
|
||||
{loading ? (
|
||||
<span className="flex items-center gap-2">
|
||||
<svg className="w-4 h-4 animate-spin" viewBox="0 0 24 24" fill="none">
|
||||
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
|
||||
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z" />
|
||||
</svg>
|
||||
در حال انجام...
|
||||
</span>
|
||||
) : confirmLabel}
|
||||
{loading ? 'در حال انجام...' : confirmLabel}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -26,8 +26,8 @@ function SkeletonRow({ cols }: { cols: number }) {
|
||||
return (
|
||||
<tr>
|
||||
{Array.from({ length: cols }).map((_, i) => (
|
||||
<td key={i} className="px-4 py-3.5">
|
||||
<div className="h-4 rounded-lg skeleton" style={{ width: `${60 + (i * 17) % 40}%` }} />
|
||||
<td key={i}>
|
||||
<div className="skeleton" style={{ height: 14, borderRadius: 6, width: `${55 + (i * 17) % 40}%` }} />
|
||||
</td>
|
||||
))}
|
||||
</tr>
|
||||
@@ -47,83 +47,78 @@ export default function DataTable<T extends object>({
|
||||
headerExtra,
|
||||
}: Props<T>) {
|
||||
const allColumns = actions
|
||||
? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-28' }]
|
||||
? [...columns, { key: '__actions', header: 'اقدامات', className: 'w-[120px]' }]
|
||||
: columns;
|
||||
|
||||
return (
|
||||
<div>
|
||||
{/* Search + extras header bar */}
|
||||
{/* Toolbar row */}
|
||||
{(onSearchChange !== undefined || headerExtra) && (
|
||||
<div className="flex items-center justify-between gap-3 mb-4 flex-wrap">
|
||||
<div className="toolbar">
|
||||
{onSearchChange !== undefined && (
|
||||
<div className="relative w-full sm:w-72">
|
||||
<MagnifyingGlassIcon className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 dark:text-slate-500 pointer-events-none" />
|
||||
<div className="field" style={{ flex: '0 0 auto', minWidth: 240 }}>
|
||||
<MagnifyingGlassIcon style={{ width: 16, height: 16, flexShrink: 0 }} />
|
||||
<input
|
||||
type="text"
|
||||
value={searchValue}
|
||||
onChange={(e) => onSearchChange(e.target.value)}
|
||||
placeholder={searchPlaceholder}
|
||||
className="cp-input pr-9"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{headerExtra && <div className="flex items-center gap-2">{headerExtra}</div>}
|
||||
{headerExtra && <>{headerExtra}</>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="overflow-x-auto rounded-xl border border-slate-200 dark:border-gray-700/50">
|
||||
<table className="w-full text-sm">
|
||||
<div className="table-wrap">
|
||||
<table className="t">
|
||||
<thead>
|
||||
<tr className="bg-slate-50 dark:bg-gray-800/60 border-b border-slate-200 dark:border-gray-700/50">
|
||||
<tr>
|
||||
{allColumns.map((col) => (
|
||||
<th
|
||||
key={col.key}
|
||||
className={`px-4 py-3 text-right text-xs font-semibold text-slate-500 dark:text-slate-400 uppercase tracking-wide whitespace-nowrap ${col.className ?? ''}`}
|
||||
>
|
||||
<th key={col.key} className={col.className ?? ''}>
|
||||
{col.header}
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-100 dark:divide-gray-700/40">
|
||||
<tbody>
|
||||
{loading ? (
|
||||
Array.from({ length: 6 }).map((_, i) => (
|
||||
<SkeletonRow key={i} cols={allColumns.length} />
|
||||
))
|
||||
) : data.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={allColumns.length} className="py-16 text-center">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<div className="w-14 h-14 rounded-2xl bg-slate-100 dark:bg-gray-800 flex items-center justify-center">
|
||||
<svg className="w-7 h-7 text-slate-400 dark:text-slate-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<td colSpan={allColumns.length}>
|
||||
<div style={{ textAlign: 'center', padding: '48px 20px' }}>
|
||||
<div style={{
|
||||
width: 56, height: 56, borderRadius: 16, background: 'var(--surface-2)',
|
||||
display: 'grid', placeItems: 'center', margin: '0 auto 12px',
|
||||
}}>
|
||||
<svg style={{ width: 28, height: 28, color: 'var(--text-3)' }} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5}
|
||||
d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
|
||||
</svg>
|
||||
</div>
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400">{emptyMessage}</p>
|
||||
<p style={{ fontSize: 13.5, color: 'var(--text-3)', margin: '0 0 12px' }}>{emptyMessage}</p>
|
||||
{emptyAction}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
data.map((row, rowIdx) => (
|
||||
<tr
|
||||
key={rowIdx}
|
||||
className="hover:bg-slate-50/80 dark:hover:bg-gray-800/40 transition-colors"
|
||||
>
|
||||
<tr key={rowIdx}>
|
||||
{columns.map((col) => (
|
||||
<td
|
||||
key={col.key}
|
||||
className="px-4 py-3.5 text-slate-700 dark:text-slate-300 whitespace-nowrap"
|
||||
>
|
||||
<td key={col.key} className={col.className ?? ''}>
|
||||
{col.render
|
||||
? col.render(row)
|
||||
: ((row as Record<string, unknown>)[col.key] as React.ReactNode) ?? '—'}
|
||||
</td>
|
||||
))}
|
||||
{actions && (
|
||||
<td className="px-4 py-3.5 whitespace-nowrap">
|
||||
<div className="flex items-center gap-1">{actions(row)}</div>
|
||||
<td>
|
||||
<div className="row-actions">
|
||||
{actions(row)}
|
||||
</div>
|
||||
</td>
|
||||
)}
|
||||
</tr>
|
||||
|
||||
@@ -4,10 +4,10 @@ import { XMarkIcon } from '@heroicons/react/24/outline';
|
||||
type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
|
||||
|
||||
const sizeMap: Record<ModalSize, string> = {
|
||||
sm: 'max-w-sm',
|
||||
md: 'max-w-lg',
|
||||
lg: 'max-w-2xl',
|
||||
xl: 'max-w-4xl',
|
||||
sm: '420px',
|
||||
md: '540px',
|
||||
lg: '720px',
|
||||
xl: '960px',
|
||||
};
|
||||
|
||||
interface Props {
|
||||
@@ -30,43 +30,20 @@ export default function Modal({ open, title, size = 'md', onClose, children, foo
|
||||
if (!open) return null;
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 animate-fade-in">
|
||||
{/* Backdrop */}
|
||||
<div className="overlay" onClick={onClose}>
|
||||
<div
|
||||
className="absolute inset-0 bg-black/50 dark:bg-black/70 backdrop-blur-sm"
|
||||
onClick={onClose}
|
||||
/>
|
||||
|
||||
{/* Panel */}
|
||||
<div
|
||||
className={`
|
||||
relative bg-white dark:bg-gray-900
|
||||
rounded-2xl shadow-2xl dark:shadow-black/40
|
||||
border border-slate-200/60 dark:border-gray-700/50
|
||||
w-full ${sizeMap[size]} flex flex-col max-h-[90vh]
|
||||
animate-scale-in
|
||||
`}
|
||||
className="modal"
|
||||
style={{ maxWidth: sizeMap[size] }}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-slate-100 dark:border-gray-700/50 shrink-0">
|
||||
<h2 className="font-semibold text-slate-900 dark:text-slate-100 text-base">{title}</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg text-slate-400 hover:text-slate-600 dark:hover:text-slate-200 hover:bg-slate-100 dark:hover:bg-gray-700 transition-colors"
|
||||
>
|
||||
<XMarkIcon className="w-5 h-5" />
|
||||
<div className="modal-head">
|
||||
<h2>{title}</h2>
|
||||
<button className="mini-btn" onClick={onClose}>
|
||||
<XMarkIcon style={{ width: 18, height: 18 }} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto px-6 py-5">{children}</div>
|
||||
|
||||
{/* Footer */}
|
||||
{footer && (
|
||||
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-slate-100 dark:border-gray-700/50 shrink-0 bg-slate-50/50 dark:bg-gray-800/30 rounded-b-2xl">
|
||||
{footer}
|
||||
</div>
|
||||
)}
|
||||
<div className="modal-body">{children}</div>
|
||||
{footer && <div className="modal-foot">{footer}</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -16,30 +16,33 @@ interface Props {
|
||||
|
||||
export default function PageHeader({ title, breadcrumbs, action, description }: Props) {
|
||||
return (
|
||||
<div className="flex items-start justify-between mb-6 gap-4">
|
||||
<div className="min-w-0">
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16, marginBottom: 24 }}>
|
||||
<div style={{ minWidth: 0 }}>
|
||||
{breadcrumbs && breadcrumbs.length > 0 && (
|
||||
<nav className="flex items-center gap-0.5 mb-1.5 text-xs text-slate-500 dark:text-slate-400">
|
||||
<nav style={{ display: 'flex', alignItems: 'center', gap: 4, marginBottom: 6, fontSize: 12, color: 'var(--text-3)' }}>
|
||||
{breadcrumbs.map((crumb, i) => (
|
||||
<React.Fragment key={i}>
|
||||
{i > 0 && <ChevronLeftIcon className="w-3 h-3 text-slate-300 dark:text-slate-600 mx-0.5 shrink-0" />}
|
||||
{i > 0 && <ChevronLeftIcon style={{ width: 12, height: 12 }} />}
|
||||
{crumb.to ? (
|
||||
<Link to={crumb.to} className="hover:text-primary-600 dark:hover:text-primary-400 transition-colors truncate">
|
||||
<Link to={crumb.to} style={{ color: 'var(--text-3)', textDecoration: 'none' }}
|
||||
onMouseEnter={(e) => (e.currentTarget.style.color = 'var(--primary)')}
|
||||
onMouseLeave={(e) => (e.currentTarget.style.color = 'var(--text-3)')}
|
||||
>
|
||||
{crumb.label}
|
||||
</Link>
|
||||
) : (
|
||||
<span className="text-slate-700 dark:text-slate-300 font-medium truncate">{crumb.label}</span>
|
||||
<span style={{ color: 'var(--text)', fontWeight: 600 }}>{crumb.label}</span>
|
||||
)}
|
||||
</React.Fragment>
|
||||
))}
|
||||
</nav>
|
||||
)}
|
||||
<h1 className="text-xl font-bold text-slate-900 dark:text-slate-50 leading-tight">{title}</h1>
|
||||
<h1 className="section-title">{title}</h1>
|
||||
{description && (
|
||||
<p className="text-sm text-slate-500 dark:text-slate-400 mt-1">{description}</p>
|
||||
<p style={{ fontSize: 13, color: 'var(--text-3)', marginTop: 4 }}>{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{action && <div className="shrink-0">{action}</div>}
|
||||
{action && <div style={{ flexShrink: 0 }}>{action}</div>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -14,7 +14,7 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
const from = (page - 1) * limit + 1;
|
||||
const to = Math.min(page * limit, total);
|
||||
const to = Math.min(page * limit, total);
|
||||
|
||||
const pages: (number | '...')[] = [];
|
||||
if (totalPages <= 7) {
|
||||
@@ -28,32 +28,29 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-between mt-5 pt-4 border-t border-slate-100 dark:border-gray-700/40 text-sm flex-wrap gap-3">
|
||||
<span className="text-slate-500 dark:text-slate-400 text-xs">
|
||||
<div className="pagination">
|
||||
<span style={{ fontSize: 12.5, color: 'var(--text-3)' }}>
|
||||
نمایش {formatNumber(from)}–{formatNumber(to)} از {formatNumber(total)} مورد
|
||||
</span>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<div className="page-btns">
|
||||
<button
|
||||
onClick={() => onPageChange(page - 1)}
|
||||
disabled={page === 1}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronRightIcon className="w-4 h-4" />
|
||||
<ChevronRightIcon style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
|
||||
{pages.map((p, i) =>
|
||||
p === '...' ? (
|
||||
<span key={`dots-${i}`} className="w-8 text-center text-slate-400 dark:text-slate-500 text-xs">…</span>
|
||||
<span key={`d-${i}`} style={{ minWidth: 36, height: 36, display: 'grid', placeItems: 'center', fontSize: 13, color: 'var(--text-3)' }}>
|
||||
…
|
||||
</span>
|
||||
) : (
|
||||
<button
|
||||
key={p}
|
||||
onClick={() => onPageChange(p as number)}
|
||||
className={`w-8 h-8 rounded-lg text-sm font-medium transition-colors ${
|
||||
p === page
|
||||
? 'bg-primary-600 text-white shadow-sm shadow-primary-500/30'
|
||||
: 'text-slate-600 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-gray-700'
|
||||
}`}
|
||||
className={p === page ? 'on' : ''}
|
||||
>
|
||||
{formatNumber(p as number)}
|
||||
</button>
|
||||
@@ -63,9 +60,8 @@ export default function Pagination({ page, total, limit, onPageChange }: Props)
|
||||
<button
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
disabled={page === totalPages}
|
||||
className="w-8 h-8 flex items-center justify-center rounded-lg hover:bg-slate-100 dark:hover:bg-gray-700 text-slate-500 dark:text-slate-400 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
|
||||
>
|
||||
<ChevronLeftIcon className="w-4 h-4" />
|
||||
<ChevronLeftIcon style={{ width: 16, height: 16 }} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,63 +1,41 @@
|
||||
import React from 'react';
|
||||
import type { AppointmentStatus, PaymentStatus, SmsTemplateStatus, SettlementStatus } from '../../types';
|
||||
|
||||
const variants: Record<string, string> = {
|
||||
yellow: 'bg-yellow-100 dark:bg-yellow-400/10 text-yellow-800 dark:text-yellow-300',
|
||||
blue: 'bg-blue-100 dark:bg-blue-400/10 text-blue-800 dark:text-blue-300',
|
||||
purple: 'bg-purple-100 dark:bg-purple-400/10 text-purple-800 dark:text-purple-300',
|
||||
orange: 'bg-orange-100 dark:bg-orange-400/10 text-orange-800 dark:text-orange-300',
|
||||
indigo: 'bg-indigo-100 dark:bg-indigo-400/10 text-indigo-800 dark:text-indigo-300',
|
||||
green: 'bg-green-100 dark:bg-green-400/10 text-green-800 dark:text-green-300',
|
||||
red: 'bg-red-100 dark:bg-red-400/10 text-red-800 dark:text-red-300',
|
||||
gray: 'bg-slate-100 dark:bg-slate-400/10 text-slate-700 dark:text-slate-400',
|
||||
rose: 'bg-rose-100 dark:bg-rose-400/10 text-rose-800 dark:text-rose-300',
|
||||
};
|
||||
type BadgeColor = 'green' | 'amber' | 'red' | 'blue' | 'violet' | 'gray';
|
||||
|
||||
const dots: Record<string, string> = {
|
||||
yellow: 'bg-yellow-500',
|
||||
blue: 'bg-blue-500',
|
||||
purple: 'bg-purple-500',
|
||||
orange: 'bg-orange-500',
|
||||
indigo: 'bg-indigo-500',
|
||||
green: 'bg-green-500',
|
||||
red: 'bg-red-500',
|
||||
gray: 'bg-slate-400',
|
||||
rose: 'bg-rose-500',
|
||||
};
|
||||
|
||||
const appointmentMap: Record<AppointmentStatus, { color: string; label: string }> = {
|
||||
waiting_for_payment: { color: 'yellow', label: 'انتظار پرداخت' },
|
||||
const appointmentMap: Record<AppointmentStatus, { color: BadgeColor; label: string }> = {
|
||||
waiting_for_payment: { color: 'amber', label: 'انتظار پرداخت' },
|
||||
reserved: { color: 'blue', label: 'رزرو شده' },
|
||||
checked_in: { color: 'purple', label: 'ورود به مطب' },
|
||||
waiting: { color: 'orange', label: 'صف انتظار' },
|
||||
in_progress: { color: 'indigo', label: 'در حال ویزیت' },
|
||||
checked_in: { color: 'violet', label: 'ورود به مطب' },
|
||||
waiting: { color: 'amber', label: 'صف انتظار' },
|
||||
in_progress: { color: 'blue', label: 'در حال ویزیت' },
|
||||
visited: { color: 'green', label: 'ویزیت شده' },
|
||||
completed: { color: 'green', label: 'تکمیل شده' },
|
||||
cancelled_by_user: { color: 'red', label: 'لغو بیمار' },
|
||||
cancelled_by_doctor: { color: 'red', label: 'لغو پزشک' },
|
||||
cancelled_by_admin: { color: 'red', label: 'لغو ادمین' },
|
||||
auto_cancel_unpaid: { color: 'gray', label: 'لغو خودکار' },
|
||||
no_show: { color: 'rose', label: 'غیبت' },
|
||||
no_show: { color: 'gray', label: 'غیبت' },
|
||||
};
|
||||
|
||||
const paymentMap: Record<PaymentStatus, { color: string; label: string }> = {
|
||||
pending: { color: 'yellow', label: 'در انتظار' },
|
||||
received: { color: 'green', label: 'موفق' },
|
||||
canceled: { color: 'red', label: 'لغو شده' },
|
||||
refund: { color: 'blue', label: 'استرداد' },
|
||||
const paymentMap: Record<PaymentStatus, { color: BadgeColor; label: string }> = {
|
||||
pending: { color: 'amber', label: 'در انتظار' },
|
||||
received: { color: 'green', label: 'موفق' },
|
||||
canceled: { color: 'red', label: 'لغو شده' },
|
||||
refund: { color: 'blue', label: 'استرداد' },
|
||||
};
|
||||
|
||||
const smsMap: Record<SmsTemplateStatus, { color: string; label: string }> = {
|
||||
draft: { color: 'gray', label: 'پیشنویس' },
|
||||
pending: { color: 'yellow', label: 'در انتظار تأیید' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
const smsMap: Record<SmsTemplateStatus, { color: BadgeColor; label: string }> = {
|
||||
draft: { color: 'gray', label: 'پیشنویس' },
|
||||
pending: { color: 'amber', label: 'در انتظار تأیید' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
};
|
||||
|
||||
const settlementMap: Record<SettlementStatus, { color: string; label: string }> = {
|
||||
pending: { color: 'yellow', label: 'در انتظار' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
const settlementMap: Record<SettlementStatus, { color: BadgeColor; label: string }> = {
|
||||
pending: { color: 'amber', label: 'در انتظار' },
|
||||
approved: { color: 'green', label: 'تأیید شده' },
|
||||
rejected: { color: 'red', label: 'رد شده' },
|
||||
};
|
||||
|
||||
interface Props {
|
||||
@@ -66,7 +44,7 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function StatusBadge({ type, value }: Props) {
|
||||
let color = 'gray';
|
||||
let color: BadgeColor = 'gray';
|
||||
let label = value;
|
||||
|
||||
if (type === 'appointment') {
|
||||
@@ -87,8 +65,8 @@ export default function StatusBadge({ type, value }: Props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<span className={`inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium ${variants[color] ?? variants.gray}`}>
|
||||
<span className={`w-1.5 h-1.5 rounded-full shrink-0 ${dots[color] ?? dots.gray}`} />
|
||||
<span className={`badge ${color}`}>
|
||||
<span className="bdot" />
|
||||
{label}
|
||||
</span>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user