transaction list

src/pages/payment/List.tsx

@@ -0,0 +1,139 @@
+import { type FC, useState } from 'react'
+import { useGetPayments } from './hooks/usePaymentData'
+import { type Payment } from './types/Types'
+import PageLoading from '../../components/PageLoading'
+import Error from '../../components/Error'
+import PaginationUi from '../../components/PaginationUi'
+import Td from '../../components/Td'
+import StatusWithText from '../../components/StatusWithText'
+import { Calendar, User as UserIcon, Card } from 'iconsax-react'
+
+const PaymentList: FC = () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const { data: paymentsData, isLoading, error } = useGetPayments(currentPage);
+
+    if (isLoading) {
+        return (
+            <div className="flex justify-center items-center min-h-[400px]">
+                <PageLoading />
+            </div>
+        );
+    }
+
+    if (error) {
+        return (
+            <div className="flex justify-center items-center min-h-[400px]">
+                <Error errorText="خطا در بارگذاری پرداخت‌ها" />
+            </div>
+        );
+    }
+
+    const payments = paymentsData?.results?.payments || [];
+    const pager = paymentsData?.results?.pager;
+
+    const getStatusVariant = (status: string) => {
+        switch (status.toLowerCase()) {
+            case 'success':
+            case 'successful':
+                return 'success';
+            case 'failed':
+            case 'failure':
+                return 'error';
+            case 'pending':
+                return 'warning';
+            case 'processing':
+                return 'warning';
+            default:
+                return 'warning';
+        }
+    };
+
+    const getStatusText = (status: string) => {
+        switch (status.toLowerCase()) {
+            case 'success':
+            case 'successful':
+                return 'موفق';
+            case 'failed':
+            case 'failure':
+                return 'ناموفق';
+            case 'pending':
+                return 'در انتظار';
+            case 'processing':
+                return 'در حال پردازش';
+            default:
+                return status;
+        }
+    };
+
+    const formatPrice = (price: number) => {
+        return `${price.toLocaleString('fa-IR')} تومان`;
+    };
+
+    return (
+        <div>
+            <div className='relative overflow-x-auto rounded-3xl mt-5 w-full'>
+                <table className='w-full text-sm'>
+                    <thead className='thead'>
+                        <tr>
+                            <Td text={'کاربر'} />
+                            <Td text={'روش پرداخت'} />
+                            <Td text={'شناسه تراکنش'} />
+                            <Td text={'مجموع قیمت'} />
+                            <Td text={'وضعیت'} />
+                            <Td text={'تاریخ ایجاد'} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {payments.length === 0 ? (
+                            <tr className='tr'>
+                                <td colSpan={6} className="text-center py-8 text-gray-500">
+                                    هیچ پرداختی یافت نشد
+                                </td>
+                            </tr>
+                        ) : (
+                            payments.map((payment: Payment) => (
+                                <tr key={payment._id} className='tr'>
+                                    <Td text="">
+                                        <div className="flex items-center gap-2">
+                                            <UserIcon size={16} color="#8C90A3" />
+                                            <span>{payment.user?.fullName || '-'}</span>
+                                        </div>
+                                    </Td>
+                                    <Td text={payment.payment_method?.title_fa || '-'} />
+                                    <Td text="">
+                                        <div className="flex items-center gap-2">
+                                            <Card size={16} color="#8C90A3" />
+                                            <span>{payment.transaction_id || '-'}</span>
+                                        </div>
+                                    </Td>
+                                    <Td text={formatPrice(payment.totalPrice)} />
+                                    <Td text="">
+                                        <StatusWithText
+                                            variant={getStatusVariant(payment.paymentStatus)}
+                                            text={getStatusText(payment.paymentStatus)}
+                                        />
+                                    </Td>
+                                    <Td text="">
+                                        <div className="flex items-center gap-2">
+                                            <Calendar size={16} color="#8C90A3" />
+                                            <span>{payment.createdAt}</span>
+                                        </div>
+                                    </Td>
+                                </tr>
+                            ))
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            <PaginationUi
+                pager={pager}
+                onPageChange={(page) => {
+                    setCurrentPage(page);
+                }}
+            />
+        </div>
+    )
+}
+
+export default PaymentList

src/pages/payment/hooks/usePaymentData.ts

@@ -0,0 +1,9 @@
+import * as api from "../service/PaymentService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetPayments = (page: number = 1) => {
+  return useQuery({
+    queryKey: ["payments", page],
+    queryFn: () => api.getPayments(page),
+  });
+};

src/pages/payment/service/PaymentService.ts

@@ -0,0 +1,9 @@
+import axios from "../../../config/axios";
+import type { PaymentResponse } from "../types/Types";
+
+export const getPayments = async (
+  page: number = 1
+): Promise<PaymentResponse> => {
+  const { data } = await axios.get(`/admin/financial/payments?page=${page}`);
+  return data;
+};

src/pages/payment/types/Types.ts

@@ -0,0 +1,51 @@
+export interface PaymentResponse {
+  status: number;
+  success: boolean;
+  results: {
+    pager: Pager;
+    payments: Payment[];
+  };
+}
+
+export interface Payment {
+  _id: string;
+  user: User;
+  transaction_id: string | null;
+  payment_method: PaymentMethod;
+  priceDetails: PriceDetails;
+  totalPrice: number;
+  paymentStatus: string;
+  createdAt: string;
+}
+
+export interface User {
+  fullName: string;
+}
+
+export interface PaymentMethod {
+  _id: string;
+  title_fa: string;
+  title_en: string;
+  description: string;
+  provider: string;
+  isActive: boolean;
+  type: string;
+}
+
+export interface PriceDetails {
+  shipping_cost: number;
+  process_cost: number;
+  total_retail_price: number;
+  total_payable_price: number;
+  total_discount: number;
+  coupon_discount: number;
+}
+
+export interface Pager {
+  page: number;
+  limit: number;
+  totalItems: number;
+  totalPages: number;
+  prevPage: boolean | null;
+  nextPage: string | null;
+}