withdraw

src/config/Pages.ts

@@ -159,5 +159,6 @@ export const Pages = {
   reseller: {
     list: "/reseller/list",
     create: "/reseller/create",
+    withdraw: "/reseller/withdraw",
   },
 };

src/langs/fa.json

@@ -87,7 +87,8 @@
     "dmail": "دی میل",
     "domain": "دامنه",
     "reseller": "نماینده",
-    "resellers": "نمایندگان"
+    "resellers": "نمایندگان",
+    "withdraw": "درخواست های برداشت"
   },
   "reseller": {
     "list": "لیست نمایندکان",
@@ -95,7 +96,10 @@
     "name": "نام نمایندگی",
     "user": "کاربر",
     "submit": "ساخت",
-    "phone": "شماره"
+    "phone": "شماره",
+    "withdraws": "درخواست های برداشت",
+    "requestedAmount": "مبلغ درخواستی",
+    "paitAt": "تاریخ پرداخت"
   },
   "dmail": {
     "domain": "لیست دامنه ها"

src/pages/reseller/Withdraw.tsx

@@ -0,0 +1,91 @@
+import { useState, type FC } from 'react'
+import { useGetWithdraws } from './hooks/useResellerData'
+import { useTranslation } from 'react-i18next'
+import PageLoading from '../../components/PageLoading'
+import Td from '../../components/Td'
+import { WithDrawItemType } from './types/Types'
+import { NumberFormat } from '../../config/func'
+import moment from 'moment-jalaali'
+import Button from '../../components/Button'
+import Pagination from '../../components/Pagination'
+import DefaulModal from '../../components/DefaulModal'
+import Input from '../../components/Input'
+
+const Withdraw: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [page, setPage] = useState<number>(1)
+    const [showModal, setShowModal] = useState<boolean>(false)
+    const getWithdraw = useGetWithdraws(page)
+
+    return (
+        <div className='mt-4 min-h-[500px]'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('reseller.withdraws')}
+                </div>
+            </div>
+
+            {
+                getWithdraw.isPending ?
+                    <PageLoading />
+                    :
+                    <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('reseller.requestedAmount')} />
+                                    <Td text={t('reseller.user')} />
+                                    <Td text={t('reseller.paitAt')} />
+                                    <Td text={''} />
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {
+                                    getWithdraw?.data?.data?.requests?.map((item: WithDrawItemType) => {
+                                        return (
+                                            <tr key={item.id} className='tr'>
+                                                <Td text={NumberFormat(+item.requestedAmount)} />
+                                                <Td text={item?.user?.firstName + ' ' + item.user?.lastName} />
+                                                <Td text={item?.paidAt ? moment(item.paidAt).format('jYYYY-jMM-jDD') : '-'} />
+                                                <Td text=''>
+                                                    <Button
+                                                        className='w-fit px-4'
+                                                        label='پرداخت'
+                                                    />
+                                                </Td>
+                                            </tr>
+                                        )
+                                    })
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+            }
+
+            <Pagination
+                currentPage={page}
+                onPageChange={setPage}
+                totalPages={getWithdraw.data?.data?.pager?.totalPages}
+            />
+
+            <DefaulModal
+                open={showModal}
+                close={() => setShowModal(false)}
+                isHeader
+                title_header='پرداخت'
+            >
+
+                <div className='mt-5'>
+                    <Input
+
+                    />
+                </div>
+
+            </DefaulModal>
+
+        </div>
+    )
+}
+
+export default Withdraw

src/pages/reseller/components/Payment.tsx

@@ -0,0 +1,9 @@
+import { type FC } from 'react'
+
+const Payment: FC = () => {
+    return (
+        <div>Payment</div>
+    )
+}
+
+export default Payment

src/pages/reseller/hooks/useResellerData.ts

@@ -13,3 +13,10 @@ export const useCreateResellers = () => {
     mutationFn: api.createReseller,
   });
 };
+
+export const useGetWithdraws = (page: number) => {
+  return useQuery({
+    queryKey: ["withdraw", page],
+    queryFn: () => api.getWithDraws(page),
+  });
+};

src/pages/reseller/service/ResellerService.ts

@@ -10,3 +10,10 @@ export const createReseller = async (params: CreateResellerType) => {
   const { data } = await axios.post(`/reseller`, params);
   return data;
 };
+
+export const getWithDraws = async (page: number) => {
+  const { data } = await axios.get(
+    `/reseller/withdraw-request/admin?page=${page}`,
+  );
+  return data;
+};

src/pages/reseller/types/Types.ts

@@ -11,3 +11,10 @@ export type CreateResellerType = {
   name: string;
   phone: string;
 };
+
+export type WithDrawItemType = {
+  id: string;
+  user: UserItemType;
+  requestedAmount: string;
+  paidAt: string;
+};

src/router/Main.tsx

@@ -93,6 +93,7 @@ import SubscriptionsList from '../pages/subscriptions/List.tsx'
 import Domains from '../pages/dmail/Domains.tsx'
 import ResellerList from '../pages/reseller/List.tsx'
 import CreateReseller from '../pages/reseller/Create.tsx'
+import Withdraw from '../pages/reseller/Withdraw.tsx'
 // import WarningsList from '../pages/dmenu/reports/List' // TODO: Create this component
 const MainRouter: FC = () => {
 
@@ -203,6 +204,7 @@ const MainRouter: FC = () => {
 
                             <Route path={Pages.reseller.list} element={<ResellerList />} />
                             <Route path={Pages.reseller.create} element={<CreateReseller />} />
+                            <Route path={Pages.reseller.withdraw} element={<Withdraw />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect, useState } 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, Gallery, Headphone, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms, Chart21, ArrowDown2, Global, UserTick } from 'iconsax-react'
+import { Card, Code, CodeCircle, DocumentLike, DocumentText, Element3, Gallery, Headphone, Home2, Logout, Messages3, Money3, NotificationStatus, People, Profile, Receipt21, Setting2, SmsTracking, Teacher, TicketDiscount, UserSquare, Activity, Icon, Category, Warning2, Building, Sms, Chart21, ArrowDown2, Global, UserTick, Money } from 'iconsax-react'
 import SideBarItem from './SideBarItem'
 import { useLocation } from 'react-router-dom'
 import { Pages } from '../config/Pages'
@@ -359,6 +359,16 @@ const SideBar: FC = () => {
                                         activeName='reseller'
                                     />
                                 </div>
+
+                                <div className='text-xs text-[#8C90A3]'>
+                                    <SideBarItem
+                                        icon={<Money variant={isActive('reseller/withdraw') ? 'Bold' : 'Outline'} color={isActive('reseller/withdraw') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
+                                        title={t('sidebar.withdraw')}
+                                        isActive={isActive('reseller/withdraw')}
+                                        link={Pages.reseller.withdraw}
+                                        activeName='reseller'
+                                    />
+                                </div>
                             </div>
                         </>
                     }