withdraw request

src/config/Pages.ts

@@ -197,5 +197,6 @@ export const Pages = {
   sellers: {
     list: "/sellers/list",
     wholesaleRequests: "/sellers/wholesale-requests",
+    withdrawalRequests: "/sellers/withdrawal-requests",
   },
 };

src/pages/seller/WithdrawalRequest.tsx

@@ -0,0 +1,104 @@
+import { type FC, useState } from 'react'
+import { useGetWithdrawalRequests } from './hooks/useSellerData'
+import PageLoading from '../../components/PageLoading'
+import Error from '../../components/Error'
+import PaginationUi from '../../components/PaginationUi'
+import Td from '../../components/Td'
+import WithdrawalRequestTableRow from './components/WithdrawalRequestTableRow'
+import WithdrawalRequestModal from './components/WithdrawalRequestModal'
+
+interface WithdrawalRequestData {
+    wallet: {
+        _id: string;
+        seller: {
+            fullName: string;
+            email?: string;
+            phoneNumber: string;
+        };
+        balance: number;
+    };
+    withdrawals: unknown[];
+    lastPaidAmount: number | null;
+    lastPaidDate: string | null;
+}
+
+const WithdrawalRequest: FC = () => {
+
+    const [currentPage, setCurrentPage] = useState(1);
+    const [selectedRequest, setSelectedRequest] = useState<WithdrawalRequestData | null>(null);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const { data: withdrawalData, isLoading, error } = useGetWithdrawalRequests(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 withdrawalRequests = withdrawalData?.results?.walletData || [];
+
+    const handleViewDetails = (request: WithdrawalRequestData) => {
+        setSelectedRequest(request);
+        setIsModalOpen(true);
+    };
+
+    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={'عملیات'} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {withdrawalRequests.length === 0 ? (
+                            <tr className='tr'>
+                                <td colSpan={5} className="text-center py-8 text-gray-500">
+                                    هیچ درخواست برداشتی یافت نشد
+                                </td>
+                            </tr>
+                        ) : (
+                            withdrawalRequests.map((request: WithdrawalRequestData) => (
+                                <WithdrawalRequestTableRow
+                                    key={request.wallet._id}
+                                    request={request}
+                                    onViewDetails={handleViewDetails}
+                                />
+                            ))
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            <PaginationUi
+                pager={{ page: currentPage, limit: 10, totalItems: withdrawalRequests.length, totalPages: 1, prevPage: null, nextPage: null }}
+                onPageChange={(page) => {
+                    setCurrentPage(page);
+                }}
+            />
+
+            <WithdrawalRequestModal
+                open={isModalOpen}
+                close={() => setIsModalOpen(false)}
+                request={selectedRequest}
+            />
+        </div>
+    )
+}
+
+export default WithdrawalRequest

src/pages/seller/components/WithdrawalRequestModal.tsx

@@ -0,0 +1,183 @@
+import { type FC } from 'react'
+import DefaulModal from '../../../components/DefaulModal'
+import { Calendar, Call, Card, User as UserIcon, Shop, Money } from 'iconsax-react'
+import type { WithdrawalRequestData } from '../WithdrawalRequest'
+
+interface Props {
+    open: boolean
+    close: () => void
+    request: WithdrawalRequestData | null
+}
+
+const WithdrawalRequestModal: FC<Props> = ({ open, close, request }) => {
+
+    const formatCurrency = (amount: number) => {
+        return new Intl.NumberFormat('fa-IR', {
+            style: 'currency',
+            currency: 'IRR',
+            minimumFractionDigits: 0,
+        }).format(amount);
+    };
+
+    const formatDate = (dateString: string) => {
+        return new Date(dateString).toLocaleDateString('fa-IR');
+    };
+
+    const getStatusText = (status: string) => {
+        switch (status) {
+            case 'Approved': return 'تایید شده';
+            case 'Pending': return 'در انتظار';
+            default: return status;
+        }
+    };
+
+    const getStatusColor = (status: string) => {
+        switch (status) {
+            case 'Approved': return 'text-green-600';
+            case 'Pending': return 'text-yellow-600';
+            default: return 'text-gray-600';
+        }
+    };
+
+    if (!request) return null;
+
+    return (
+        <DefaulModal
+            open={open}
+            close={close}
+            isHeader={true}
+            title_header="جزئیات درخواست برداشت"
+            width={700}
+        >
+            <div className="p-4 space-y-6">
+                {/* Seller Information */}
+                <div className="border-b pb-4">
+                    <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                        <UserIcon size={20} />
+                        اطلاعات فروشنده
+                    </h3>
+                    <div className="grid grid-cols-2 gap-4">
+                        <div className="flex items-center gap-2">
+                            <UserIcon size={16} className="text-gray-500" />
+                            <div>
+                                <span className="text-sm text-gray-500">نام و نام خانوادگی:</span>
+                                <p className="font-medium">{request.wallet?.seller?.fullName || '-'}</p>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                            <Card size={16} className="text-gray-500" />
+                            <div>
+                                <span className="text-sm text-gray-500">ایمیل:</span>
+                                <p className="font-medium">{request.wallet?.seller?.email || '-'}</p>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                            <Call size={16} className="text-gray-500" />
+                            <div>
+                                <span className="text-sm text-gray-500">شماره تلفن:</span>
+                                <p className="font-medium">{request.wallet?.seller?.phoneNumber}</p>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                            <Calendar size={16} className="text-gray-500" />
+                            <div>
+                                <span className="text-sm text-gray-500">تاریخ تولد:</span>
+                                <p className="font-medium">
+                                    {request.wallet?.seller?.dateOfBirth ? formatDate(request.wallet.seller.dateOfBirth) : '-'}
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                            <Shop size={16} className="text-gray-500" />
+                            <div>
+                                <span className="text-sm text-gray-500">نوع کسب‌وکار:</span>
+                                <p className="font-medium">{request.wallet?.seller?.businessType || '-'}</p>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                            <div className="w-4 h-4 rounded-full bg-gray-400"></div>
+                            <div>
+                                <span className="text-sm text-gray-500">وضعیت حساب:</span>
+                                <p className={`font-medium ${getStatusColor(request.wallet?.seller?.accountStatus || '')}`}>
+                                    {getStatusText(request.wallet?.seller?.accountStatus || '')}
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Wallet Information */}
+                <div className="border-b pb-4">
+                    <h3 className="text-lg font-semibold mb-4 flex items-center gap-2">
+                        <Money size={20} />
+                        اطلاعات کیف پول
+                    </h3>
+                    <div className="grid grid-cols-2 gap-4">
+                        <div className="flex items-center gap-2">
+                            <Money size={16} className="text-gray-500" />
+                            <div>
+                                <span className="text-sm text-gray-500">موجودی:</span>
+                                <p className="font-medium text-green-600">{formatCurrency(request.wallet?.balance || 0)}</p>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center gap-2">
+                            <Calendar size={16} className="text-gray-500" />
+                            <div>
+                                <span className="text-sm text-gray-500">تاریخ ایجاد کیف پول:</span>
+                                <p className="font-medium">{formatDate(request.wallet?.createdAt || '')}</p>
+                            </div>
+                        </div>
+
+                        <div className="flex items-center gap-2 col-span-2">
+                            <Calendar size={16} className="text-gray-500" />
+                            <div>
+                                <span className="text-sm text-gray-500">آخرین بروزرسانی:</span>
+                                <p className="font-medium">{formatDate(request.wallet?.updatedAt || '')}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Additional Information */}
+                <div>
+                    <h3 className="text-lg font-semibold mb-4">اطلاعات تکمیلی</h3>
+                    <div className="grid grid-cols-2 gap-4">
+                        <div>
+                            <span className="text-sm text-gray-500">تاریخ عضویت:</span>
+                            <p className="font-medium">
+                                {request.wallet?.seller?.createdAt ? formatDate(request.wallet.seller.createdAt) : '-'}
+                            </p>
+                        </div>
+
+                        <div>
+                            <span className="text-sm text-gray-500">وضعیت تکمیل ثبت‌نام:</span>
+                            <p className={`font-medium ${request.wallet?.seller?.isRegisterCompleted ? 'text-green-600' : 'text-red-600'}`}>
+                                {request.wallet?.seller?.isRegisterCompleted ? 'تکمیل شده' : 'ناتمام'}
+                            </p>
+                        </div>
+
+                        <div>
+                            <span className="text-sm text-gray-500">فروشنده عمده:</span>
+                            <p className={`font-medium ${request.wallet?.seller?.isWholesaler ? 'text-blue-600' : 'text-gray-600'}`}>
+                                {request.wallet?.seller?.isWholesaler ? 'بله' : 'خیر'}
+                            </p>
+                        </div>
+
+                        <div>
+                            <span className="text-sm text-gray-500">تعداد درخواست‌های برداشت:</span>
+                            <p className="font-medium">{request.withdrawals?.length || 0}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default WithdrawalRequestModal

src/pages/seller/components/WithdrawalRequestTableRow.tsx

@@ -0,0 +1,79 @@
+import { type FC } from 'react'
+import Td from '../../../components/Td'
+import { Call, Card, User as UserIcon, Money, Eye } from 'iconsax-react'
+
+interface WithdrawalRequestData {
+    wallet: {
+        _id: string;
+        seller: {
+            fullName: string;
+            email?: string;
+            phoneNumber: string;
+        };
+        balance: number;
+    };
+    withdrawals: unknown[];
+    lastPaidAmount: number | null;
+    lastPaidDate: string | null;
+}
+
+interface Props {
+    request: WithdrawalRequestData
+    onViewDetails: (request: WithdrawalRequestData) => void
+}
+
+const WithdrawalRequestTableRow: FC<Props> = ({ request, onViewDetails }) => {
+
+    const handleViewDetails = () => {
+        onViewDetails(request);
+    };
+
+    const formatCurrency = (amount: number | null) => {
+        if (amount === null) return '-';
+        return new Intl.NumberFormat('fa-IR', {
+            style: 'currency',
+            currency: 'IRR',
+            minimumFractionDigits: 0,
+        }).format(amount);
+    };
+
+    return (
+        <tr className='tr'>
+            <Td text="">
+                <div className="flex items-center gap-1">
+                    <UserIcon size={16} color="#8C90A3" />
+                    <span>{request.wallet?.seller?.fullName || '-'}</span>
+                </div>
+            </Td>
+            <Td text="">
+                <div className="flex items-center gap-1">
+                    <Card size={16} color="#8C90A3" />
+                    <span>{request.wallet?.seller?.email || '-'}</span>
+                </div>
+            </Td>
+            <Td text="">
+                <div className="flex items-center gap-1">
+                    <Call size={16} color="#8C90A3" />
+                    <span>{request.wallet?.seller?.phoneNumber}</span>
+                </div>
+            </Td>
+            <Td text="">
+                <div className="flex items-center gap-1">
+                    <Money size={16} color="#8C90A3" />
+                    <span>{formatCurrency(request.wallet?.balance || 0)}</span>
+                </div>
+            </Td>
+            <Td text="">
+                <button
+                    className="flex items-center gap-1 px-3 py-1 text-xs border border-gray-300 rounded-xl bg-transparent text-gray-700 hover:bg-gray-50 hover:border-gray-400 transition-colors"
+                    onClick={handleViewDetails}
+                >
+                    <Eye color="#8C90A3" size={14} />
+                    مشاهده جزئیات
+                </button>
+            </Td>
+        </tr>
+    )
+}
+
+export default WithdrawalRequestTableRow

src/pages/seller/hooks/useSellerData.ts

@@ -32,3 +32,10 @@ export const useApproveWholesaleRequest = () => {
     mutationFn: api.approveWholesaleRequest,
   });
 };
+
+export const useGetWithdrawalRequests = (page: number = 1) => {
+  return useQuery({
+    queryKey: ["withdrawal-requests", page],
+    queryFn: () => api.getWithdrawalRequests(page),
+  });
+};

src/pages/seller/service/SellerService.ts

@@ -2,6 +2,7 @@ import axios from "@/config/axios";
 import type {
   SellersResponse,
   WholesaleRequestsResponse,
+  WithdrawalRequestsResponse,
 } from "../types/Types";
 
 export const getSellers = async (
@@ -38,3 +39,12 @@ export const approveWholesaleRequest = async (id: string) => {
   const { data } = await axios.patch(`/admin/sellers/wholesale-requests/${id}`);
   return data;
 };
+
+export const getWithdrawalRequests = async (
+  page: number = 1
+): Promise<WithdrawalRequestsResponse> => {
+  const { data } = await axios.get(
+    `/admin/financial/withdrawal/requests?page=${page}`
+  );
+  return data;
+};

src/pages/seller/types/Types.ts

@@ -122,3 +122,40 @@ export interface WholesaleRequestsResponse {
     };
   };
 }
+
+export interface WalletSeller {
+  _id: string;
+  fullName: string;
+  dateOfBirth: string | null;
+  phoneNumber: string;
+  accountStatus: "Pending" | "Approved";
+  isRegisterCompleted: boolean;
+  businessType: string | null;
+  isWholesaler: boolean;
+  createdAt: string;
+  updatedAt: string;
+  email?: string;
+}
+
+export interface Wallet {
+  _id: string;
+  seller: WalletSeller;
+  balance: number;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface WithdrawalRequest {
+  wallet: Wallet;
+  withdrawals: unknown[]; // Empty array in example, can be expanded later
+  lastPaidAmount: number | null;
+  lastPaidDate: string | null;
+}
+
+export interface WithdrawalRequestsResponse {
+  status: number;
+  success: boolean;
+  results: {
+    walletData: WithdrawalRequest[];
+  };
+}

src/router/Main.tsx

@@ -64,6 +64,7 @@ import ContactUsList from '@/pages/contactUs/List'
 import Dashboard from '@/pages/dashboard/Dashboard'
 import SellerList from '@/pages/seller/List'
 import WholeSaleRequest from '@/pages/seller/WholeSaleRequest'
+import WithdrawalRequestPage from '@/pages/seller/WithdrawalRequest'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -161,6 +162,7 @@ const MainRouter: FC = () => {
 
                             <Route path={Pages.sellers.list} element={<SellerList />} />
                             <Route path={Pages.sellers.wholesaleRequests} element={<WholeSaleRequest />} />
+                            <Route path={Pages.sellers.withdrawalRequests} element={<WithdrawalRequestPage />} />
                         </Routes>
                     </div>
                 </div>

src/shared/SideBar.tsx

@@ -499,17 +499,17 @@ const SellersSubMenu: FC = () => {
                 <SubMenuItem
                     title={'لیست فروشندگان'}
                     isActive={isActive('list')}
-                    link="/sellers/list"
+                    link={Pages.sellers.list}
                 />
                 <SubMenuItem
                     title={'کیف پول فروشندگان'}
                     isActive={isActive('wallet')}
-                    link="/sellers/wallet"
+                    link={Pages.sellers.withdrawalRequests}
                 />
                 <SubMenuItem
                     title={'درخواست ها عمده فروشی'}
                     isActive={isActive('wholesale-requests')}
-                    link="/sellers/wholesale-requests"
+                    link={Pages.sellers.wholesaleRequests}
                 />
                 <SubMenuItem
                     title={'ارسال اطلاعیه'}