danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

payment

Browse Source
This commit is contained in:
hamid zarghami
2025-02-08 14:20:50 +03:30
parent 1e8b542960
commit 19636230ba
19 changed files with 612 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env
+2 -2
View File
@@ -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'
# VITE_BASE_URL = 'https://danak-dsc-api.run.danakcorp.com'
VITE_BASE_URL = 'http://192.168.0.245:4000'
src/components/ModalConfrim.tsx
+27 -4
View File
@@ -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
src/components/Textarea.tsx
+6 -3
View File
@@ -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 &&
<div className='text-xs text-gray-500 absolute top-2 right-2' >
{props.label}
</label>
</div>
}
<textarea
className='border border-border leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs'
src/config/Pages.ts
+3
View File
@@ -82,4 +82,7 @@ export const Pages = {
create: "/card-bank/create",
detail: "/card-bank/detail/",
},
payment: {
list: "/payments/list",
},
};
src/config/SideBarSubMenu.ts
-1
View File
@@ -3,6 +3,5 @@ export const SideBarItemHasSubMenu = [
"customers",
"receipts",
"users",
"transactions",
"tickets",
];
src/config/func.ts
+4
View File
@@ -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);
}
src/langs/fa.json
+26 -2
View File
@@ -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": "تصویر فیش واریزی"
}
}
src/pages/payment/List.tsx
+178
View File
@@ -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
src/pages/payment/components/Accept.tsx
+51
View File
@@ -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
src/pages/payment/components/Reject.tsx
+56
View File
@@ -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
src/pages/payment/hooks/usePaymentData.ts
+30
View File
@@ -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),
});
};
src/pages/payment/service/PaymentService.ts
+27
View File
@@ -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;
};
src/pages/payment/types/PaymentTypes.ts
+57
View File
@@ -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;
};
src/pages/transaction/List.tsx
+64 -83
View File
@@ -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,108 +25,78 @@ 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>
<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 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>
<Input
variant='search'
placeholder={t('search')}
className='bg-white border border-border'
onChangeSearchFinal={(value) => setSearch(value)}
/>
</div>
</div>
{
getTransactions.isPending ?
<PageLoading />
:
<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('ticket.number')} />
<Td text={t('ticket.title')} />
<Td text={t('ticket.team')} />
<Td text={t('transaction.description')} />
<Td text={t('transaction.amount')} />
<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')} />
{
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
/>
<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>
<div className='flex justify-end'>
<Pagination
currentPage={page}
totalPages={getTransactions.data?.data?.pager?.totalPages}
onPageChange={setPage}
/>
</div>
</Fragment>
}
</div >
)
}
src/pages/transaction/hooks/useTransactionData.ts
+14
View File
@@ -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),
});
};
src/pages/transaction/service/TransactionService.ts
+24
View File
@@ -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;
};
src/pages/transaction/types/TransactionTypes.ts
+7
View File
@@ -0,0 +1,7 @@
export type TransactionItemType = {
amount: string;
description: string;
numericId: number;
id: string;
createdAt: string;
};
src/router/Main.tsx
+2
View File
@@ -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>
src/shared/SideBar.tsx
+7 -5
View File
@@ -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,9 +264,6 @@ const SideBar: FC = () => {
{
subMenuName === 'services' ?
<ServicesSubMenu />
:
subMenuName === 'transactions' ?
<TransactionsSubMenu />
: subMenuName === 'receipts' ?
<ReceiptSubMenu />
: subMenuName === 'customers' ?