From 9a923f931f95d4c639176cb84dab3e421015c895 Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Wed, 5 Feb 2025 12:13:56 +0330 Subject: [PATCH] transaction and charge wallet online --- .env | 4 +- src/components/Pagination.tsx | 99 ++++++++ src/config/func.ts | 4 + src/langs/fa.json | 5 +- src/pages/transaction/List.tsx | 214 +++++++++--------- .../transaction/hooks/useTransactionData.ts | 9 + .../transaction/service/TransactionService.ts | 6 + .../transaction/types/TransactionTypes.ts | 7 + 8 files changed, 244 insertions(+), 104 deletions(-) create mode 100644 src/components/Pagination.tsx 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 d62a7ef..ed70d10 100644 --- a/.env +++ b/.env @@ -1,4 +1,4 @@ VITE_TOKEN_NAME = 'dsc_token' VITE_REFRESH_TOKEN_NAME = 'dsc_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.221:4000' \ No newline at end of file diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx new file mode 100644 index 0000000..c39cd30 --- /dev/null +++ b/src/components/Pagination.tsx @@ -0,0 +1,99 @@ +import React from "react"; + +interface PaginationProps { + currentPage: number; + totalPages: number; + onPageChange: (page: number) => void; +} + +const Pagination: React.FC = ({ + currentPage, + totalPages, + onPageChange, +}) => { + const getPageNumbers = () => { + const pageNumbers: (number | string)[] = []; + const maxVisiblePages = 5; // تعداد حداکثری صفحات قابل مشاهده + + if (totalPages <= maxVisiblePages) { + for (let i = 1; i <= totalPages; i++) { + pageNumbers.push(i); + } + } else { + if (currentPage > 3) { + pageNumbers.push(1); + if (currentPage > 4) { + pageNumbers.push("..."); + } + } + + const start = Math.max(2, currentPage - 1); + const end = Math.min(totalPages - 1, currentPage + 1); + + for (let i = start; i <= end; i++) { + pageNumbers.push(i); + } + + if (currentPage < totalPages - 2) { + if (currentPage < totalPages - 3) { + pageNumbers.push("..."); + } + pageNumbers.push(totalPages); + } + } + + return pageNumbers; + }; + + const pageNumbers = getPageNumbers(); + + return ( +
+ {/* دکمه قبلی */} + {/* */} + + {/* شماره صفحات */} + {pageNumbers.map((page, index) => + typeof page === "number" ? ( + + ) : ( + + {page} + + ) + )} + + {/* دکمه بعدی */} + {/* */} +
+ ); +}; + +export default Pagination; \ No newline at end of file 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 4e7abd4..2b7959a 100644 --- a/src/langs/fa.json +++ b/src/langs/fa.json @@ -214,8 +214,11 @@ "description_transaction": "شرح تراکنش", "amount": "مبلغ", "date": "تاریخ تراکنش", - "order_number": "شماره سفارش" + "order_number": "شماره سفارش", + "transaction_type": "نوع تراکنش", + "description": "توضیحات" }, + "toman": "تومان", "announcement": { "announcements": "اطلاعیه ها", "search": "جستجو در اطلاعیه ها", diff --git a/src/pages/transaction/List.tsx b/src/pages/transaction/List.tsx index c14696d..1c7d891 100644 --- a/src/pages/transaction/List.tsx +++ b/src/pages/transaction/List.tsx @@ -1,12 +1,20 @@ 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 { NumberFormat } from '../../config/func' +import Pagination from '../../components/Pagination' const TransactionList: FC = () => { + const [page, setPage] = useState(1) const { t } = useTranslation('global') + const getTransactions = useGetTransactions(page) return (
@@ -14,109 +22,113 @@ const TransactionList: FC = () => { {t('transaction.transaction')}
-
-
-
-
- + { + getTransactions.isPending ? + + : + +
+
+
+
+ +
+
+ {t('transaction.totao_deposit')} +
+
+
+
+ {NumberFormat(getTransactions.data?.data?.totalDeposits)} {t('toman')} +
+
+ +
۳۰٪
+
+
+
+
+
+
+ +
+
+ {t('transaction.total_withdrawal')} +
+
+
+
+ {NumberFormat(getTransactions.data?.data?.totalWithdrawals)} {t('toman')} +
+
+ +
۳۰٪
+
+
+
+
+
+
+ +
+
+ {t('transaction.balance')} +
+
+
+
+ {NumberFormat(getTransactions.data?.data?.balance)} {t('toman')} +
+
+ +
۳۰٪
+
+
+
-
- {t('transaction.totao_deposit')} -
-
-
-
- ۱۴۰,۰۰۰,۰۰۰ ریال -
-
- -
۳۰٪
-
-
-
-
-
-
- -
-
- {t('transaction.total_withdrawal')} -
-
-
-
- ۱۴۰,۰۰۰,۰۰۰ ریال -
-
- -
۳۰٪
-
-
-
-
-
-
- -
-
- {t('transaction.balance')} -
-
-
-
- ۱۴۰,۰۰۰,۰۰۰ ریال -
-
- -
۳۰٪
-
-
-
-
-
- - - - - - - - - - - - -
- - - - - - - -
- - - - - - - - -
- - - - - - - -
-
+
+ + + + + + + { + getTransactions.data?.data?.transactions?.map((item: TransactionItemType) => { + return ( + + + + ) + }) + } + +
+ + + + +
+ + + + + +
+
-
+
+ +
+ + + } + ) } diff --git a/src/pages/transaction/hooks/useTransactionData.ts b/src/pages/transaction/hooks/useTransactionData.ts new file mode 100644 index 0000000..8a03979 --- /dev/null +++ b/src/pages/transaction/hooks/useTransactionData.ts @@ -0,0 +1,9 @@ +import * as api from "../service/TransactionService"; +import { useQuery } from "@tanstack/react-query"; + +export const useGetTransactions = (page: number) => { + return useQuery({ + queryKey: ["transactions", page], + queryFn: () => api.getTransactions(page), + }); +}; diff --git a/src/pages/transaction/service/TransactionService.ts b/src/pages/transaction/service/TransactionService.ts new file mode 100644 index 0000000..66a59c8 --- /dev/null +++ b/src/pages/transaction/service/TransactionService.ts @@ -0,0 +1,6 @@ +import axios from "../../../config/axios"; + +export const getTransactions = async (page: number) => { + const { data } = await axios.get(`/wallets/transactions?page=${page}`); + 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; +};