badge

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<StatusVariant, string> = {
+  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<Props> = ({ status, label, className }) => {
+  const config = getStatusConfig(status)
+  const displayLabel = label ?? config?.label ?? status
+  const variant: StatusVariant = config?.variant ?? 'neutral'
+
+  return (
+    <span
+      className={clx(
+        'inline-flex items-center px-2 py-1 rounded-full text-xs font-medium border',
+        variantStyles[variant],
+        className
+      )}
+    >
+      {displayLabel}
+    </span>
+  )
+}
+
+export default StatusBadge

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<string, StatusConfig> = {
+  // --- 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
+}

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<number>(1)
@@ -78,6 +79,11 @@ const MyOrders: FC = () => {
             {
               key: 'status',
               title: 'وضعیت سفارش',
+              render: (item) => {
+                return (
+                  <StatusBadge status={item.status} />
+                )
+              },
             },
             {
               key: 'actions',