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);
+      return <Status status={status} className='text-right' />
-      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>
-      )
     }
   }
 ]

src/app/[name]/(Main)/transactions/enum/Enum.ts

@@ -0,0 +1,6 @@
+export const enum PaymentStatusEnum {
+  Pending = "pending",
+  Paid = "paid",
+  Failed = "failed",
+  Refunded = "refunded",
+}

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

@@ -1,50 +1,15 @@
 'use client';
-import { ef } from '@/lib/helpers/utfNumbers'
+import React from 'react'
-import {
+import { useGetTransactions } from './hooks/useTransactionData';
-  MoneyRecive,
-  MoneySend,
-  Wallet
-} from 'iconsax-react'
-import React, { useMemo } from 'react'
-import { useGetTransactions, useGetUserWallet } from './hooks/useTransactionData';
-import { Transaction } from './types/Types';
 import { TransactionsTable } from './components/TransactionsTable';
 import LoadingOverlay from '@/components/overlays/LoadingOverlay';
 
 function TransactionsReviewIndex() {
   const { data: transactionsResponse, isLoading: isLoadingTransactions } = useGetTransactions();
-  const { data: walletResponse, isLoading: isLoadingWallet } = useGetUserWallet();
 
   const transactions = transactionsResponse?.data || [];
-  const walletAmount = walletResponse?.data?.wallet || 0;
 
-  const stats = useMemo(() => {
+  const isLoading = isLoadingTransactions;
-    if (!transactions.length) {
-      return {
-        totalDeposits: 0,
-        totalWithdrawals: 0,
-      };
-    }
-
-    const deposits = transactions
-      .filter((t: Transaction) => t.status === 'SUCCESS' && t.amount > 0)
-      .reduce((sum: number, t: Transaction) => sum + t.amount, 0);
-
-    const withdrawals = transactions
-      .filter((t: Transaction) => t.status === 'SUCCESS' && t.amount < 0)
-      .reduce((sum: number, t: Transaction) => sum + Math.abs(t.amount), 0);
-
-    return {
-      totalDeposits: deposits,
-      totalWithdrawals: withdrawals,
-    };
-  }, [transactions]);
-
-  const formatPrice = (amount: number) => {
-    return ef(amount.toLocaleString('fa-IR'));
-  };
-
-  const isLoading = isLoadingTransactions || isLoadingWallet;
 
   return (
     <section className='flex flex-col h-full pb-10 pt-6 gap-4 relative'>
@@ -52,7 +17,7 @@ function TransactionsReviewIndex() {
 
       <h1 className='font-medium text-base'>لیست تراکنش ها</h1>
 
-      <div className='grid grid-cols-3 gap-2 h-28'>
+      {/* <div className='grid grid-cols-3 gap-2 h-28'>
         <div className='w-full h-full flex flex-col items-center justify-center p-2.5 text-center bg-container rounded-xl'>
           <div className='size-8 bg-background rounded-full grid items-center'>
             <MoneySend
@@ -89,7 +54,7 @@ function TransactionsReviewIndex() {
             {formatPrice(walletAmount)} ریال
           </span>
         </div>
-      </div>
+      </div> */}
 
       <div className='w-full h-full bg-container rounded-3xl mt-0'>
         <TransactionsTable transactions={transactions} />

src/components/utils/Status.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import React from 'react';
+import clsx from 'clsx';
+
+type Props = {
+  status: string;
+  className?: string;
+};
+
+const getStatusConfig = (status: string): { text: string; color: string } => {
+  const statusUpper = status.toUpperCase();
+  
+  const statusMap: Record<string, { text: string; color: string }> = {
+    'SUCCESS': { text: 'موفق', color: 'bg-[#00BA4B]' },
+    'FAILED': { text: 'ناموفق', color: 'bg-red-500' },
+    'PENDING': { text: 'در انتظار', color: 'bg-yellow-500' },
+    'CANCELLED': { text: 'لغو شده', color: 'bg-gray-500' },
+    'PAID': { text: 'پرداخت شده', color: 'bg-[#00BA4B]' },
+    'REFUNDED': { text: 'بازگشت شده', color: 'bg-gray-500' },
+  };
+
+  return statusMap[statusUpper] || { text: status, color: 'bg-transparent border border-primary' };
+};
+
+function Status({ status, className = '' }: Props) {
+  const { text, color } = getStatusConfig(status);
+
+  return (
+    <div className={clsx('flex items-center gap-x-2', className)}>
+      <span
+        className={clsx(
+          'size-2 rounded-full',
+          color
+        )}
+      ></span>
+      {text}
+    </div>
+  );
+}
+
+export default Status;
+