transaction change

src/app/[name]/(Main)/transactions/components/TransactionsTable.tsx

@@ -23,10 +23,10 @@ import {
   TableHeader,
   TableRow
 } from '@/components/ui/table'
-import clsx from 'clsx'
 import { ArrowLeft2, ArrowRight2 } from 'iconsax-react'
 import { ef } from '@/lib/helpers/utfNumbers'
 import { Transaction } from '../types/Types'
+import Status from '@/components/utils/Status'
 
 interface TransactionsTableProps {
   transactions: Transaction[]
@@ -41,26 +41,6 @@ const formatDate = (dateString: string): string => {
   });
 };
 
-const getStatusText = (status: string): string => {
-  const statusMap: Record<string, string> = {
-    'SUCCESS': 'موفق',
-    'FAILED': 'ناموفق',
-    'PENDING': 'در انتظار',
-    'CANCELLED': 'لغو شده',
-  };
-  return statusMap[status] || status;
-};
-
-const getStatusColor = (status: string): string => {
-  const colorMap: Record<string, string> = {
-    'SUCCESS': 'bg-[#00BA4B]',
-    'FAILED': 'bg-red-500',
-    'PENDING': 'bg-yellow-500',
-    'CANCELLED': 'bg-gray-500',
-  };
-  return colorMap[status] || 'bg-transparent border border-primary';
-};
-
 export const columns: ColumnDef<Transaction>[] = [
   {
     accessorKey: 'order.orderNumber',
@@ -102,20 +82,7 @@ export const columns: ColumnDef<Transaction>[] = [
     header: () => <div className='text-center'>وضعیت</div>,
     cell: ({ row }) => {
       const status = row.original.status;
-      const statusText = getStatusText(status);
-      const statusColor = getStatusColor(status);
-
-      return (
-        <div className='text-right flex items-center justify-center gap-x-2'>
-          <span
-            className={clsx(
-              'size-2 rounded-full',
-              statusColor
-            )}
-          ></span>
-          {statusText}
-        </div>
-      )
+      return <Status status={status} className='text-right' />
     }
   }
 ]