diff --git a/src/components/StatusBadge.tsx b/src/components/StatusBadge.tsx new file mode 100644 index 0000000..c075fd4 --- /dev/null +++ b/src/components/StatusBadge.tsx @@ -0,0 +1,44 @@ +import { type FC } from 'react' +import { clx } from '@/helpers/utils' +import { getStatusConfig, type StatusVariant } from '@/config/statusRegistry' + +const variantStyles: Record = { + success: 'bg-green-50 text-green-600 border-green-200', + warning: 'bg-amber-50 text-amber-700 border-amber-200', + error: 'bg-red-50 text-red-600 border-red-200', + info: 'bg-blue-50 text-blue-600 border-blue-200', + neutral: 'bg-gray-100 text-gray-700 border-gray-200', +} + +type Props = { + /** مقدار وضعیت (از enum یا API) برای پیدا کردن ترجمه و رنگ از رجیستری */ + status: string + /** در صورت نیاز می‌توانی ترجمه را خودت بدی و فقط از رنگ رجیستری استفاده شود */ + label?: string + /** کلاس اضافه */ + className?: string +} + +/** + * نمایش وضعیت با ترجمه و رنگ بر اساس رجیستری. + * وضعیت‌ها و ترجمه و نوع (موفق/هشدار/خطا/...) را در src/config/statusRegistry.ts تعریف کن. + */ +const StatusBadge: FC = ({ status, label, className }) => { + const config = getStatusConfig(status) + const displayLabel = label ?? config?.label ?? status + const variant: StatusVariant = config?.variant ?? 'neutral' + + return ( + + {displayLabel} + + ) +} + +export default StatusBadge diff --git a/src/config/statusRegistry.ts b/src/config/statusRegistry.ts new file mode 100644 index 0000000..e58b32d --- /dev/null +++ b/src/config/statusRegistry.ts @@ -0,0 +1,69 @@ +import { OrderStatusEnum } from '@/pages/order/enum/OrderEnum' +import { RequestStatusEnum } from '@/pages/request/enum/RequestEnum' +import { ProformaInvoiceStatusEnum } from '@/pages/invoice/enum/InvoiceEnum' +import { PaymentStatusEnum } from '@/pages/payment/enum/Enum' + +/** نوع ظاهری وضعیت: موفق، هشدار، خطا، اطلاعات */ +export type StatusVariant = 'success' | 'warning' | 'error' | 'info' | 'neutral' + +export type StatusConfig = { + label: string + variant: StatusVariant +} + +/** + * رجیستری مرکزی وضعیت‌ها. + * هر وضعیت (از هر enum) را با ترجمه و نوع ظاهری ثبت کن تا در StatusBadge استفاده شود. + * برای اضافه کردن وضعیت جدید: یک کلید (مقدار enum یا string از API) و مقدار { label, variant } بگذار. + */ +export const statusRegistry: Record = { + // --- RequestStatusEnum --- + [RequestStatusEnum.PENDING]: { label: 'در انتظار تایید', variant: 'warning' }, + // INVOICED shared with OrderStatusEnum (same value 'invoiced') — see OrderStatusEnum.INVOICED below + + // --- ProformaInvoiceStatusEnum --- + [ProformaInvoiceStatusEnum.ALL]: { label: 'همه', variant: 'neutral' }, + [ProformaInvoiceStatusEnum.NOT_CONFIRMED]: { label: 'تایید نشده', variant: 'warning' }, + [ProformaInvoiceStatusEnum.CONFIRMED]: { label: 'تایید شده', variant: 'success' }, + + // --- OrderStatusEnum --- + [OrderStatusEnum.CREATED]: { label: 'ایجاد شده', variant: 'info' }, + [OrderStatusEnum.INVOICED]: { label: 'فاکتور شده', variant: 'success' }, + [OrderStatusEnum.WAITING_to_CONFIRM_INVOICE]: { label: 'در انتظار تایید فاکتور', variant: 'warning' }, + [OrderStatusEnum.DESIGN_INITIATED]: { label: 'شروع طراحی', variant: 'info' }, + [OrderStatusEnum.DESIGN_FINISHED]: { label: 'طراحی تمام شده', variant: 'success' }, + [OrderStatusEnum.DESIGN_REVISION]: { label: 'بازنگری طراحی', variant: 'warning' }, + [OrderStatusEnum.READY_TO_PRINTING]: { label: 'آماده چاپ', variant: 'info' }, + [OrderStatusEnum.IN_PRINTING]: { label: 'در حال چاپ', variant: 'info' }, + [OrderStatusEnum.AFTER_PRINT_COVER]: { label: 'پس از چاپ جلد', variant: 'info' }, + [OrderStatusEnum.AFTER_PRINT_CARTONING]: { label: 'کارتن‌سازی', variant: 'info' }, + [OrderStatusEnum.AFTER_PRINT_BOXING]: { label: 'بسته‌بندی', variant: 'info' }, + [OrderStatusEnum.READY_FOR_DELIVERY]: { label: 'آماده ارسال', variant: 'info' }, + [OrderStatusEnum.DELIVERED]: { label: 'تحویل شده', variant: 'success' }, + [OrderStatusEnum.FINISHED]: { label: 'پایان یافته', variant: 'success' }, + [OrderStatusEnum.CANCELED]: { label: 'لغو شده', variant: 'error' }, + + // --- PaymentStatusEnum --- + // Pending shared with RequestStatusEnum.PENDING and ticket (same value 'pending') — see above and ticket section + [PaymentStatusEnum.Paid]: { label: 'پرداخت شده', variant: 'success' }, + [PaymentStatusEnum.Failed]: { label: 'ناموفق', variant: 'error' }, + [PaymentStatusEnum.Refunded]: { label: 'مسترد شده', variant: 'info' }, + + // --- تیکت (مقادیر از API معمولاً uppercase می‌آیند؛ getStatusConfig از toUpperCase/toLowerCase استفاده می‌کند) --- + PENDING: { label: 'در انتظار', variant: 'warning' }, + ANSWERED: { label: 'پاسخ داده شده', variant: 'success' }, + CLOSED: { label: 'بسته شده', variant: 'error' }, +} + +/** + * ثبت یا به‌روزرسانی یک وضعیت در رجیستری (برای استفاده در ران‌تایم اگر لازم شد). + * برای تعریف ثابت، مستقیم به آبجکت statusRegistry اضافه کن. + */ +export function registerStatus(key: string, config: StatusConfig): void { + statusRegistry[key] = config +} + +export function getStatusConfig(status: string | undefined | null): StatusConfig | null { + if (status == null || status === '') return null + return statusRegistry[status] ?? statusRegistry[status.toUpperCase()] ?? statusRegistry[status.toLowerCase()] ?? null +} diff --git a/src/pages/order/MyOrders.tsx b/src/pages/order/MyOrders.tsx index 8d56968..90f64df 100644 --- a/src/pages/order/MyOrders.tsx +++ b/src/pages/order/MyOrders.tsx @@ -8,6 +8,7 @@ import { useGetMyOrders } from './hooks/useOrderData' import moment from 'moment-jalaali' import { Link } from 'react-router-dom' import { Paths } from '@/config/Paths' +import StatusBadge from '@/components/StatusBadge' const MyOrders: FC = () => { const [page, setPage] = useState(1) @@ -51,7 +52,7 @@ const MyOrders: FC = () => { ], }, ]} - onChange={() => {}} + onChange={() => { }} /> @@ -78,6 +79,11 @@ const MyOrders: FC = () => { { key: 'status', title: 'وضعیت سفارش', + render: (item) => { + return ( + + ) + }, }, { key: 'actions',