From 19636230ba669fe9dbe1a6cdff03b1ad70165a6b Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 8 Feb 2025 14:20:50 +0330
Subject: [PATCH] payment

---
 .env                                          |   4 +-
 src/components/ModalConfrim.tsx               |  31 ++-
 src/components/Textarea.tsx                   |  11 +-
 src/config/Pages.ts                           |   3 +
 src/config/SideBarSubMenu.ts                  |   1 -
 src/config/func.ts                            |   4 +
 src/langs/fa.json                             |  28 ++-
 src/pages/payment/List.tsx                    | 178 +++++++++++++++++
 src/pages/payment/components/Accept.tsx       |  51 +++++
 src/pages/payment/components/Reject.tsx       |  56 ++++++
 src/pages/payment/hooks/usePaymentData.ts     |  30 +++
 src/pages/payment/service/PaymentService.ts   |  27 +++
 src/pages/payment/types/PaymentTypes.ts       |  57 ++++++
 src/pages/transaction/List.tsx                | 181 ++++++++----------
 .../transaction/hooks/useTransactionData.ts   |  14 ++
 .../transaction/service/TransactionService.ts |  24 +++
 .../transaction/types/TransactionTypes.ts     |   7 +
 src/router/Main.tsx                           |   2 +
 src/shared/SideBar.tsx                        |  30 +--
 19 files changed, 612 insertions(+), 127 deletions(-)
 create mode 100644 src/pages/payment/List.tsx
 create mode 100644 src/pages/payment/components/Accept.tsx
 create mode 100644 src/pages/payment/components/Reject.tsx
 create mode 100644 src/pages/payment/hooks/usePaymentData.ts
 create mode 100644 src/pages/payment/service/PaymentService.ts
 create mode 100644 src/pages/payment/types/PaymentTypes.ts
 create mode 100644 src/pages/transaction/hooks/useTransactionData.ts
 create mode 100644 src/pages/transaction/service/TransactionService.ts
 create mode 100644 src/pages/transaction/types/TransactionTypes.ts

diff --git a/.env b/.env
index baf030d..e4cd019 100644
--- a/.env
+++ b/.env
@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
-VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.0.221:4000'
\ No newline at end of file
+# VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
+VITE_BASE_URL = 'http://192.168.0.245:4000'
\ No newline at end of file
diff --git a/src/components/ModalConfrim.tsx b/src/components/ModalConfrim.tsx
index 769ac1f..ae92f28 100644
--- a/src/components/ModalConfrim.tsx
+++ b/src/components/ModalConfrim.tsx
@@ -1,18 +1,22 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import DefaulModal from './DefaulModal'
 import { useTranslation } from 'react-i18next'
 import Button from './Button'
+import Textarea from './Textarea'
 
 type Props = {
     isLoading?: boolean,
     close: () => void,
     isOpen: boolean,
-    onConfrim: () => void,
+    onConfrim: (text?: string) => void,
+    label?: string,
+    isHasDescription?: boolean
 }
 
 const ModalConfrim: FC<Props> = (props: Props) => {
 
     const { t } = useTranslation('global')
+    const [description, setDescription] = useState<string>('')
 
     return (
         <DefaulModal
@@ -22,12 +26,31 @@ const ModalConfrim: FC<Props> = (props: Props) => {
             isHeader
         >
             <div className='mt-6'>
-                <div className='text-sm text-center'> {t('confrim.content')}</div>
+                <div className='text-sm text-center'>
+                    {
+                        props.label ?
+                            props.label
+                            :
+                            t('confrim.content')
+                    }
+
+                    {
+                        props.isHasDescription &&
+                        <div className='mt-4'>
+                            <Textarea
+                                placeholder={t('description')}
+                                onChange={(e) => setDescription(e.target.value)}
+                                value={description}
+                                className='bg-transparent border border-gray-500 rounded-xl w-[300px] p-2'
+                            />
+                        </div>
+                    }
+                </div>
 
                 <div className='flex gap-4 justify-center mt-10'>
                     <Button
                         label={t('confrim.yes')}
-                        onClick={props.onConfrim}
+                        onClick={() => props.onConfrim(props.isHasDescription ? description : undefined)}
                         isLoading={props.isLoading}
                     />
                     <Button
diff --git a/src/components/Textarea.tsx b/src/components/Textarea.tsx
index 0546ac6..d454719 100644
--- a/src/components/Textarea.tsx
+++ b/src/components/Textarea.tsx
@@ -2,16 +2,19 @@ import { FC, InputHTMLAttributes } from 'react'
 import Error from './Error'
 
 type Props = {
-    label: string,
+    label?: string,
     error_text?: string
 } & InputHTMLAttributes<HTMLTextAreaElement>
 
 const Textarea: FC<Props> = (props: Props) => {
     return (
         <div className='w-full relative'>
-            <label className='text-sm'>
-                {props.label}
-            </label>
+            {
+                props.label &&
+                <div className='text-xs text-gray-500 absolute top-2 right-2' >
+                    {props.label}
+                </div>
+            }
 
             <textarea
                 className='border border-border leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs'
diff --git a/src/config/Pages.ts b/src/config/Pages.ts
index c4bf670..f640002 100644
--- a/src/config/Pages.ts
+++ b/src/config/Pages.ts
@@ -82,4 +82,7 @@ export const Pages = {
     create: "/card-bank/create",
     detail: "/card-bank/detail/",
   },
+  payment: {
+    list: "/payments/list",
+  },
 };
diff --git a/src/config/SideBarSubMenu.ts b/src/config/SideBarSubMenu.ts
index 0c9c25c..d9c9209 100644
--- a/src/config/SideBarSubMenu.ts
+++ b/src/config/SideBarSubMenu.ts
@@ -3,6 +3,5 @@ export const SideBarItemHasSubMenu = [
   "customers",
   "receipts",
   "users",
-  "transactions",
   "tickets",
 ];
diff --git a/src/config/func.ts b/src/config/func.ts
index c16ba63..fdb3d58 100644
--- a/src/config/func.ts
+++ b/src/config/func.ts
@@ -2,3 +2,7 @@ export function isEmail(input: string): boolean {
   const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
   return emailRegex.test(input);
 }
+
+export function NumberFormat(number: number): string {
+  return Intl.NumberFormat("fa-IR").format(number);
+}
diff --git a/src/langs/fa.json b/src/langs/fa.json
index 746e2eb..a7c22e0 100644
--- a/src/langs/fa.json
+++ b/src/langs/fa.json
@@ -68,7 +68,8 @@
     "learning": "آموزش",
     "setting": "تنظیمات",
     "logout": "خروج",
-    "card": "حساب های بانکی"
+    "card": "حساب های بانکی",
+    "payments": "پرداخت ها"
   },
   "submenu": {
     "services_list": "لیست سرویس ها",
@@ -380,7 +381,9 @@
     "description_transaction": "شرح تراکنش",
     "amount": "مبلغ",
     "date": "تاریخ تراکنش",
-    "order_number": "شماره سفارش"
+    "order_number": "شماره سفارش",
+    "description": "توضیحات تراکنش",
+    "user_search": "جستجو کاربر"
   },
   "announcement": {
     "announcements": "اطلاعیه ها",
@@ -569,5 +572,26 @@
     "sheba": "شماره شبا",
     "manage_banks": "مدیریت حساب های بانکی",
     "add_account": "افزودن حساب"
+  },
+  "payment": {
+    "payments": "پرداخت ها",
+    "status_payment": "وضعیت پرداخت",
+    "user": "کاربر",
+    "card_number": "شماره کارت",
+    "sheba_number": "شماره شبا",
+    "amount": "مبلغ",
+    "date": "تاریخ",
+    "payment_type": "نوع پرداخت",
+    "PENDING": "در انتظار",
+    "FAILD": "ناموفق",
+    "COMPELETED": "تکمیل شده",
+    "CANCELED": "لغو شده",
+    "REJECTED": "رد شده",
+    "APPROVED": "تایید شده",
+    "aceept": "تایید",
+    "reject": "رد",
+    "accept_confrim": "آیا از تایید این پرداخت مطمئن هستید؟",
+    "reject_comment_error": "لطفا دلیل رد پرداخت را وارد کنید",
+    "receip_image": "تصویر فیش واریزی"
   }
 }
diff --git a/src/pages/payment/List.tsx b/src/pages/payment/List.tsx
new file mode 100644
index 0000000..02728c2
--- /dev/null
+++ b/src/pages/payment/List.tsx
@@ -0,0 +1,178 @@
+import { FC, Fragment, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Tabs from '../../components/Tabs'
+import { Cards, Money3, MoneyRecive } from 'iconsax-react'
+import { useGetGateWayPayment, useGetPayments } from './hooks/usePaymentData'
+import PageLoading from '../../components/PageLoading'
+import Td from '../../components/Td'
+import { PaymentGatewayType, PaymentItemsType, PaymentStatusType } from './types/PaymentTypes'
+import Pagination from '../../components/Pagination'
+import moment from 'moment-jalaali'
+import Accept from './components/Accept'
+import Reject from './components/Reject'
+
+const PaymentList: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
+    const [pageGateWay, setPageGateWay] = useState<number>(1)
+    const [activeTab, setActiveTab] = useState<PaymentStatusType>('GATEWAY')
+    const getGateWayPayment = useGetGateWayPayment(pageGateWay)
+    const getPayments = useGetPayments(page, activeTab)
+
+    return (
+        <div className='mt-4'>
+            <div className='mt-8 flex gap-6'>
+                <div className='flex-1'>
+                    <Tabs
+                        active={activeTab}
+                        items={[
+                            {
+                                label: t('wallet.online_pay'),
+                                value: 'GATEWAY',
+                                icon: <MoneyRecive color={activeTab === 'GATEWAY' ? 'black' : '#8C90A3'} size={22} />
+                            },
+                            {
+                                icon: <Cards color={activeTab === 'CARD_TO_CARD' ? 'black' : '#8C90A3'} size={22} />,
+                                label: t('wallet.card_to_card'),
+                                value: 'CARD_TO_CARD'
+                            },
+                            {
+                                icon: <Money3 color={activeTab === 'SHEBA' ? 'black' : '#8C90A3'} size={22} />,
+                                label: t('wallet.sheba'),
+                                value: 'SHEBA'
+                            },
+                        ]}
+                        onChange={(value) => setActiveTab(value as PaymentStatusType)}
+                    />
+
+                    {
+                        getPayments.isFetching || getGateWayPayment.isPending ?
+                            <PageLoading />
+                            :
+                            <Fragment>
+                                {
+                                    activeTab === 'GATEWAY' &&
+                                    <Fragment>
+                                        <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                                            <table className='w-full text-sm '>
+                                                <thead className='thead'>
+                                                    <tr>
+                                                        <Td text={t('payment.user')} />
+                                                        <Td text={t('payment.amount')} />
+                                                        <Td text={t('payment.date')} />
+                                                        <Td text={t('payment.status_payment')} />
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    {
+                                                        getGateWayPayment.data?.data?.payments?.map((item: PaymentGatewayType) => {
+                                                            return (
+                                                                <tr className='tr' key={item.id}>
+                                                                    <Td text={`${item.user.firstName} ${item.user.lastName}`} />
+                                                                    <Td text={item.amount.toLocaleString()} />
+                                                                    <Td text={''}>
+                                                                        <div className='dltr text-right'>
+                                                                            {moment(item.createdAt).format('jYYYY/jMM/jDD HH:mm')}
+                                                                        </div>
+                                                                    </Td>
+                                                                    <Td text={t(`payment.${item.status}`)} />
+                                                                </tr>
+                                                            )
+                                                        })
+                                                    }
+                                                </tbody>
+                                            </table>
+                                        </div>
+                                        <div className='flex justify-end'>
+                                            <Pagination
+                                                currentPage={pageGateWay}
+                                                totalPages={getGateWayPayment.data?.data?.pager?.totalPages}
+                                                onPageChange={setPageGateWay}
+                                            />
+                                        </div>
+                                    </Fragment>
+
+                                }
+                                {
+                                    activeTab !== 'GATEWAY' &&
+                                    <Fragment>
+                                        <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                                            <table className='w-full text-sm '>
+                                                <thead className='thead'>
+                                                    <tr>
+                                                        <Td text={t('payment.receip_image')} />
+                                                        <Td text={t('payment.user')} />
+                                                        <Td text={t('payment.card_number')} />
+                                                        <Td text={t('payment.sheba_number')} />
+                                                        <Td text={t('payment.amount')} />
+                                                        <Td text={t('payment.date')} />
+                                                        <Td text={t('payment.payment_type')} />
+                                                        <Td text={t('payment.status_payment')} />
+                                                        <Td text={''} />
+                                                    </tr>
+                                                </thead>
+                                                <tbody>
+                                                    {
+                                                        getPayments.data?.data?.depositRequests?.map((item: PaymentItemsType) => {
+                                                            return (
+                                                                <tr className='tr' key={item.id}>
+                                                                    <Td text={''}>
+                                                                        <a href={item.receiptUrl} target='_blank'>
+                                                                            <img
+                                                                                src={item.receiptUrl}
+                                                                                className='w-16 h-16 rounded-lg'
+                                                                            />
+                                                                        </a>
+                                                                    </Td>
+                                                                    <Td text={`${item.user.firstName} ${item.user.lastName}`} />
+                                                                    <Td text={item.bankAccount.cardNumber} />
+                                                                    <Td text={item.bankAccount.IBan} />
+                                                                    <Td text={item.amount.toLocaleString()} />
+                                                                    <Td text={''}>
+                                                                        <div className='dltr text-right'>
+                                                                            {moment(item.createdAt).format('jYYYY/jMM/jDD HH:mm')}
+                                                                        </div>
+                                                                    </Td>
+                                                                    <Td text={item.type === 'CARD_TO_CARD' ? t('wallet.card_to_card') : t('wallet.bank_transfer')} />
+                                                                    <Td text={t(`payment.${item.status}`)} />
+                                                                    <Td text={''}>
+                                                                        {
+                                                                            item.status === 'PENDING' &&
+                                                                            <Fragment>
+                                                                                <div className='flex gap-2'>
+                                                                                    <Accept
+                                                                                        id={item.id}
+                                                                                    />
+                                                                                    <Reject id={item.id} />
+                                                                                </div>
+                                                                            </Fragment>
+                                                                        }
+                                                                    </Td>
+                                                                </tr>
+                                                            )
+                                                        })
+                                                    }
+                                                </tbody>
+                                            </table>
+                                        </div>
+
+                                        <div className='flex justify-end'>
+                                            <Pagination
+                                                currentPage={page}
+                                                totalPages={getPayments.data?.data?.pager?.totalPages}
+                                                onPageChange={setPage}
+                                            />
+                                        </div>
+                                    </Fragment>
+                                }
+
+                            </Fragment>
+                    }
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default PaymentList
\ No newline at end of file
diff --git a/src/pages/payment/components/Accept.tsx b/src/pages/payment/components/Accept.tsx
new file mode 100644
index 0000000..5d1388e
--- /dev/null
+++ b/src/pages/payment/components/Accept.tsx
@@ -0,0 +1,51 @@
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../../components/Button'
+import { useApproveTransfer } from '../hooks/usePaymentData'
+import ModalConfrim from '../../../components/ModalConfrim'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    id: string
+}
+
+const Accept: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [openConfrimModal, setOpenConfrimModal] = useState<boolean>(false)
+    const approveTransfer = useApproveTransfer()
+
+    const handleApproveTransfer = () => {
+        approveTransfer.mutate(props.id, {
+            onSuccess: () => {
+                toast.success(t('success'))
+                setOpenConfrimModal(false)
+                window.location.reload()
+            },
+            onError(error: ErrorType) {
+                toast.error(error?.response?.data?.error?.message[0])
+            },
+        })
+    }
+
+    return (
+        <div>
+            <Button
+                label={t('payment.aceept')}
+                className='px-4 bg-green-50 text-green-500 font-semibold'
+                onClick={() => setOpenConfrimModal(true)}
+            />
+
+            <ModalConfrim
+                isOpen={openConfrimModal}
+                close={() => setOpenConfrimModal(false)}
+                onConfrim={handleApproveTransfer}
+                isLoading={approveTransfer.isPending}
+                label={t('payment.accept_confrim')}
+            />
+        </div>
+    )
+}
+
+export default Accept
\ No newline at end of file
diff --git a/src/pages/payment/components/Reject.tsx b/src/pages/payment/components/Reject.tsx
new file mode 100644
index 0000000..997818d
--- /dev/null
+++ b/src/pages/payment/components/Reject.tsx
@@ -0,0 +1,56 @@
+import { FC, useState } from 'react'
+import Button from '../../../components/Button'
+import { useTranslation } from 'react-i18next'
+import { useRejectTransfer } from '../hooks/usePaymentData'
+import ModalConfrim from '../../../components/ModalConfrim'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    id: string
+}
+
+const Reject: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [openConfrimModal, setOpenConfrimModal] = useState<boolean>(false)
+    const rejectTransfer = useRejectTransfer()
+
+    const handleRejectTransfer = (text?: string) => {
+        if (text && text.length > 0) {
+            rejectTransfer.mutate({ id: props.id, comment: text }, {
+                onSuccess: () => {
+                    toast.success(t('success'))
+                    setOpenConfrimModal(false)
+                    window.location.reload()
+                },
+                onError(error: ErrorType) {
+                    toast.error(error?.response?.data?.error?.message[0])
+                },
+            })
+        } else {
+            toast.error(t('payment.reject_comment_error'))
+        }
+    }
+
+    return (
+        <div>
+            <Button
+                label={t('payment.reject')}
+                className='px-4 w-fit bg-red-50 text-red-500 font-semibold'
+                onClick={() => setOpenConfrimModal(true)}
+            />
+
+            <ModalConfrim
+                isOpen={openConfrimModal}
+                close={() => setOpenConfrimModal(false)}
+                onConfrim={handleRejectTransfer}
+                isLoading={rejectTransfer.isPending}
+                label={t('payment.accept_confrim')}
+                isHasDescription
+            />
+        </div>
+    )
+}
+
+export default Reject
\ No newline at end of file
diff --git a/src/pages/payment/hooks/usePaymentData.ts b/src/pages/payment/hooks/usePaymentData.ts
new file mode 100644
index 0000000..a7c8d74
--- /dev/null
+++ b/src/pages/payment/hooks/usePaymentData.ts
@@ -0,0 +1,30 @@
+import { useMutation, useQuery } from "@tanstack/react-query";
+import * as api from "../service/PaymentService";
+import { PaymentStatusType, RejectPaymentType } from "../types/PaymentTypes";
+
+export const useGetPayments = (page: number, type: PaymentStatusType) => {
+  return useQuery({
+    queryKey: ["payments", page, type],
+    queryFn: () => api.getPayments(page, type),
+    enabled: type !== "GATEWAY",
+  });
+};
+
+export const useApproveTransfer = () => {
+  return useMutation({
+    mutationFn: (variables: string) => api.approveTransfer(variables),
+  });
+};
+
+export const useRejectTransfer = () => {
+  return useMutation({
+    mutationFn: (variables: RejectPaymentType) => api.rejectTransfer(variables),
+  });
+};
+
+export const useGetGateWayPayment = (page: number) => {
+  return useQuery({
+    queryKey: ["gateway-payments", page],
+    queryFn: () => api.getPaymentGateways(page),
+  });
+};
diff --git a/src/pages/payment/service/PaymentService.ts b/src/pages/payment/service/PaymentService.ts
new file mode 100644
index 0000000..ab89560
--- /dev/null
+++ b/src/pages/payment/service/PaymentService.ts
@@ -0,0 +1,27 @@
+import axios from "../../../config/axios";
+import { PaymentStatusType, RejectPaymentType } from "../types/PaymentTypes";
+
+export const getPayments = async (page: number, type: PaymentStatusType) => {
+  const { data } = await axios.get(
+    `/payments/deposit/transfer?page=${page}&type=${type}`
+  );
+  return data;
+};
+
+export const approveTransfer = async (id: string) => {
+  const { data } = await axios.post(`/payments/deposit/transfer/approve/${id}`);
+  return data;
+};
+
+export const rejectTransfer = async (params: RejectPaymentType) => {
+  const { data } = await axios.post(
+    `/payments/deposit/transfer/reject/${params.id}`,
+    params
+  );
+  return data;
+};
+
+export const getPaymentGateways = async (page: number) => {
+  const { data } = await axios.get(`/payments/deposit/gateway?page=${page}`);
+  return data;
+};
diff --git a/src/pages/payment/types/PaymentTypes.ts b/src/pages/payment/types/PaymentTypes.ts
new file mode 100644
index 0000000..e56edfa
--- /dev/null
+++ b/src/pages/payment/types/PaymentTypes.ts
@@ -0,0 +1,57 @@
+export type PaymentType = {
+  id: string;
+  amount: number;
+  createdAt: string;
+  reference: string;
+  status: "PENDING" | "COMPLETED" | "FAILED" | "CANCELED";
+  transactionId: string | null;
+  type: "CARD_TO_CARD" | "BANK_TRANSFER";
+};
+
+export type PaymentItemsType = {
+  id: string;
+  amount: number;
+  bankAccount: {
+    IBan: string;
+    cardNumber: string;
+    accountOwnerName: string;
+  };
+  comment?: string;
+  createdAt: string;
+  receiptUrl: string;
+  status: "PENDING" | "APPROVED" | "REJECTED";
+  user: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    phone: string;
+  };
+  type: PaymentStatusType;
+};
+
+export type PaymentStatusType = "CARD_TO_CARD" | "GATEWAY" | "SHEBA";
+
+export type PaymentGatewayType = {
+  amount: string;
+  id: string;
+  createdAt: string;
+  reference: string;
+  status: "PENDING" | "COMPLETED" | "FAILED" | "CANCELED";
+  paymentGateway: {
+    id: string;
+    name: string;
+    nameFa: string;
+    description: string;
+  };
+  user: {
+    id: string;
+    firstName: string;
+    lastName: string;
+    phone: string;
+  };
+};
+
+export type RejectPaymentType = {
+  id: string;
+  comment?: string;
+};
diff --git a/src/pages/transaction/List.tsx b/src/pages/transaction/List.tsx
index c14696d..20a98ca 100644
--- a/src/pages/transaction/List.tsx
+++ b/src/pages/transaction/List.tsx
@@ -1,12 +1,23 @@
-import { ArrowRight, MoneyRecive, MoneySend } from 'iconsax-react'
-import { FC } from 'react'
+import { FC, Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Td from '../../components/Td'
 import Detail from './components/Detail'
+import { useGetTransactions } from './hooks/useTransactionData'
+import PageLoading from '../../components/PageLoading'
+import { TransactionItemType } from './types/TransactionTypes'
+import moment from 'moment-jalaali'
+import Pagination from '../../components/Pagination'
+import Input from '../../components/Input'
+import DatePickerComponent from '../../components/DatePicker'
 
 const TransactionList: FC = () => {
 
     const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
+    const [userSearch, setUserSearch] = useState<string>('')
+    const [dateSearch, setDateSearch] = useState<string>('')
+    const [search, setSearch] = useState<string>('')
+    const getTransactions = useGetTransactions(page, userSearch, dateSearch, search)
 
     return (
         <div className='mt-4'>
@@ -14,109 +25,79 @@ const TransactionList: FC = () => {
                 {t('transaction.transaction')}
             </div>
 
-            <div className='mt-6 flex xl:gap-6 gap-1 justify-center'>
-                <div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
-                    <div className='flex xl:flex-row flex-col gap-2 items-center'>
-                        <div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-center'>
-                            <MoneySend size={18} color='black' />
-                        </div>
-                        <div className='xl:text-xs text-[10px] text-[#101828]'>
-                            {t('transaction.totao_deposit')}
-                        </div>
-                    </div>
-                    <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
-                        <div className='text-[#101828] xl:text-xs text-[10px]'>
-                            ۱۴۰,۰۰۰,۰۰۰ ریال
-                        </div>
-                        <div className='flex gap gap-0.5 px-2 py-1 bg-green-100 rounded-lg text-[10px] text-success'>
-                            <ArrowRight size={12} color='#00BA4B' className='-rotate-45' />
-                            <div>۳۰٪</div>
-                        </div>
-                    </div>
+            <div className='flex justify-between items-center mt-12'>
+                <div className='flex gap-4 items-center'>
+                    <Input
+                        variant='search'
+                        placeholder={t('transaction.user_search')}
+                        className='bg-white border border-border'
+                        onChangeSearchFinal={(value) => setUserSearch(value)}
+                    />
+                    <DatePickerComponent
+                        placeholder={t('ticket.date')}
+                        className='w-36'
+                        onChange={(date) => setDateSearch(date)}
+                        defaulValue={dateSearch}
+                    />
                 </div>
-                <div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
-                    <div className='flex xl:flex-row flex-col gap-2 items-center'>
-                        <div className='size-8 bg-[#EEF0F7] rounded-full flex justify-center items-center'>
-                            <MoneyRecive size={18} color='black' />
-                        </div>
-                        <div className='xl:text-xs text-[10px] text-[#101828]'>
-                            {t('transaction.total_withdrawal')}
-                        </div>
-                    </div>
-                    <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
-                        <div className='text-[#101828] xl:text-xs text-[10px]'>
-                            ۱۴۰,۰۰۰,۰۰۰ ریال
-                        </div>
-                        <div className='flex gap gap-0.5 px-2 py-1 bg-green-100 rounded-lg text-[10px] text-success'>
-                            <ArrowRight size={12} color='#00BA4B' className='-rotate-45' />
-                            <div>۳۰٪</div>
-                        </div>
-                    </div>
-                </div>
-                <div className='bg-white flex-1 rounded-2xl xl:p-6 py-2 px-4 xl:max-w-[253px]'>
-                    <div className='flex xl:flex-row flex-col gap-2 items-center'>
-                        <div className='size-8 bg-[#EEF0F7] rounded-full flex xl:flex-row flex-col justify-center items-center'>
-                            <MoneyRecive size={18} color='black' />
-                        </div>
-                        <div className='xl:text-xs text-[10px] text-[#101828]'>
-                            {t('transaction.balance')}
-                        </div>
-                    </div>
-                    <div className='mt-2 flex xl:flex-row flex-col gap-2 items-center'>
-                        <div className='text-[#101828] xl:text-xs text-[10px]'>
-                            ۱۴۰,۰۰۰,۰۰۰ ریال
-                        </div>
-                        <div className='flex gap gap-0.5 px-2 py-1 text-red-400 rounded-lg text-[10px] bg-red-100'>
-                            <ArrowRight size={12} color='red' className='rotate-45' />
-                            <div>۳۰٪</div>
-                        </div>
-                    </div>
+                <div>
+                    <Input
+                        variant='search'
+                        placeholder={t('search')}
+                        className='bg-white border border-border'
+                        onChangeSearchFinal={(value) => setSearch(value)}
+                    />
                 </div>
             </div>
 
-            <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
-                <table className='w-full text-sm '>
-                    <thead className='thead'>
-                        <tr>
-                            <Td text={t('ticket.number')} />
-                            <Td text={t('ticket.title')} />
-                            <Td text={t('ticket.team')} />
-                            <Td text={t('ticket.date')} />
-                            <Td text={t('ticket.status')} />
-                            <Td text={t('ticket.priority')} />
-                            <Td text={t('ticket.detail')} />
-                            <Td text={''} />
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr className='tr'>
-                            <Td text={t('ticket.number')} />
-                            <Td text={t('ticket.title')} />
-                            <Td text={t('ticket.team')} />
-                            <Td text={t('ticket.date')} />
-                            <Td text={t('ticket.status')} />
-                            <Td text={t('ticket.priority')} />
-                            <Td text={t('ticket.detail')} />
-                            <Td text={''}>
-                                <Detail
-                                />
-                            </Td>
-                        </tr>
-                        <tr className='tr'>
-                            <Td text={t('ticket.number')} />
-                            <Td text={t('ticket.title')} />
-                            <Td text={t('ticket.team')} />
-                            <Td text={t('ticket.date')} />
-                            <Td text={t('ticket.status')} />
-                            <Td text={t('ticket.priority')} />
-                            <Td text={t('ticket.detail')} />
-                            <Td text={''} />
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
+            {
+                getTransactions.isPending ?
+                    <PageLoading />
+                    :
+                    <Fragment>
 
-        </div>
+                        <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
+                            <table className='w-full text-sm '>
+                                <thead className='thead'>
+                                    <tr>
+                                        <Td text={t('ticket.number')} />
+                                        <Td text={t('transaction.description')} />
+                                        <Td text={t('transaction.amount')} />
+                                        <Td text={t('ticket.date')} />
+                                        <Td text={t('ticket.detail')} />
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {
+                                        getTransactions.data?.data?.transactions?.map((item: TransactionItemType) => {
+                                            return (
+                                                <tr key={item.id}>
+                                                    <Td text={item.numericId + ''} />
+                                                    <Td text={item.description} />
+                                                    <Td text={item.amount} />
+                                                    <Td text={moment(item.createdAt).format('jYYYY-jMM-jDD')} />
+                                                    <Td text={''}>
+                                                        <Detail />
+                                                    </Td>
+                                                </tr>
+                                            )
+                                        })
+                                    }
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <div className='flex justify-end'>
+                            <Pagination
+                                currentPage={page}
+                                totalPages={getTransactions.data?.data?.pager?.totalPages}
+                                onPageChange={setPage}
+                            />
+                        </div>
+
+                    </Fragment>
+            }
+        </div >
     )
 }
 
diff --git a/src/pages/transaction/hooks/useTransactionData.ts b/src/pages/transaction/hooks/useTransactionData.ts
new file mode 100644
index 0000000..396ed6d
--- /dev/null
+++ b/src/pages/transaction/hooks/useTransactionData.ts
@@ -0,0 +1,14 @@
+import * as api from "../service/TransactionService";
+import { useQuery } from "@tanstack/react-query";
+
+export const useGetTransactions = (
+  page: number,
+  userSearch: string,
+  dateSearch: string,
+  search: string
+) => {
+  return useQuery({
+    queryKey: ["transactions", page, userSearch, dateSearch, search],
+    queryFn: () => api.getTransactions(page, userSearch, dateSearch, search),
+  });
+};
diff --git a/src/pages/transaction/service/TransactionService.ts b/src/pages/transaction/service/TransactionService.ts
new file mode 100644
index 0000000..217e36f
--- /dev/null
+++ b/src/pages/transaction/service/TransactionService.ts
@@ -0,0 +1,24 @@
+import moment from "moment-jalaali";
+import axios from "../../../config/axios";
+
+export const getTransactions = async (
+  page: number,
+  userSearch: string,
+  dateSearch: string,
+  search: string
+) => {
+  let query = `?page=${page}`;
+  if (userSearch) {
+    query += `&user=${userSearch}`;
+  }
+  if (dateSearch) {
+    query += `&date=${moment(dateSearch, "jYYYY-jMM-jDD").format(
+      "YYYY-MM-DD"
+    )}`;
+  }
+  if (search) {
+    query += `&q=${search}`;
+  }
+  const { data } = await axios.get(`/payments/transactions${query}`);
+  return data;
+};
diff --git a/src/pages/transaction/types/TransactionTypes.ts b/src/pages/transaction/types/TransactionTypes.ts
new file mode 100644
index 0000000..184fd66
--- /dev/null
+++ b/src/pages/transaction/types/TransactionTypes.ts
@@ -0,0 +1,7 @@
+export type TransactionItemType = {
+  amount: string;
+  description: string;
+  numericId: number;
+  id: string;
+  createdAt: string;
+};
diff --git a/src/router/Main.tsx b/src/router/Main.tsx
index 5bd96bb..69bf0aa 100644
--- a/src/router/Main.tsx
+++ b/src/router/Main.tsx
@@ -48,6 +48,7 @@ import MessageDetail from '../pages/messages/Detail'
 import CreateBankCard from '../pages/cardBank/Create'
 import CardBankList from '../pages/cardBank/List'
 import EditBankCard from '../pages/cardBank/Edit'
+import PaymentList from '../pages/payment/List'
 
 const MainRouter: FC = () => {
 
@@ -108,6 +109,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.cardBank.create} element={<CreateBankCard />} />
                             <Route path={Pages.cardBank.list} element={<CardBankList />} />
                             <Route path={Pages.cardBank.detail + ':id'} element={<EditBankCard />} />
+                            <Route path={Pages.payment.list} element={<PaymentList />} />
 
                         </Routes>
                     </div>
diff --git a/src/shared/SideBar.tsx b/src/shared/SideBar.tsx
index 044f0c4..7bff134 100644
--- a/src/shared/SideBar.tsx
+++ b/src/shared/SideBar.tsx
@@ -2,7 +2,7 @@ import { FC, useEffect } from 'react'
 import LogoImage from '../assets/images/logo.svg'
 import LogoSmall from '../assets/images/logo-small.svg'
 import { useTranslation } from 'react-i18next'
-import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Home2, Logout, Messages3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } from 'iconsax-react'
+import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -10,7 +10,6 @@ import { useSharedStore } from './store/sharedStore'
 import { clx } from '../helpers/utils'
 import ServicesSubMenu from './components/ServicesSubMenu'
 import { SideBarItemHasSubMenu } from '../config/SideBarSubMenu'
-import TransactionsSubMenu from './components/TransactionsSubMenu'
 import ReceiptSubMenu from './components/ReceiptSubMenu'
 import CustomerSubMenu from './components/CustomerSubMenu'
 import TicketSubMenu from './components/TicketSubMenu'
@@ -122,6 +121,12 @@ const SideBar: FC = () => {
                             isActive={isActive('transactions')}
                             link={Pages.transactions}
                         />
+                        <SideBarItem
+                            icon={<Money3 variant={isActive('payments') ? 'Bold' : 'Outline'} color={isActive('payments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                            title={t('sidebar.payments')}
+                            isActive={isActive('payments')}
+                            link={Pages.payment.list}
+                        />
                         <SideBarItem
                             icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.discounts')}
@@ -259,18 +264,15 @@ const SideBar: FC = () => {
                     {
                         subMenuName === 'services' ?
                             <ServicesSubMenu />
-                            :
-                            subMenuName === 'transactions' ?
-                                <TransactionsSubMenu />
-                                : subMenuName === 'receipts' ?
-                                    <ReceiptSubMenu />
-                                    : subMenuName === 'customers' ?
-                                        <CustomerSubMenu />
-                                        : subMenuName === 'tickets' ?
-                                            <TicketSubMenu />
-                                            : subMenuName === 'users' ?
-                                                <UsersSubMenu />
-                                                : null
+                            : subMenuName === 'receipts' ?
+                                <ReceiptSubMenu />
+                                : subMenuName === 'customers' ?
+                                    <CustomerSubMenu />
+                                    : subMenuName === 'tickets' ?
+                                        <TicketSubMenu />
+                                        : subMenuName === 'users' ?
+                                            <UsersSubMenu />
+                                            : null
                     }
                 </div>
             }