seller list + view contract and confrim + approve register

src/components/Select.tsx

@@ -13,7 +13,7 @@ type Props = {
     error_text?: string,
     placeholder?: string,
     label?: string,
-    value?: string,
+    value?: string | number,
 } & SelectHTMLAttributes<HTMLSelectElement>
 
 const Select: FC<Props> = (props: Props) => {

src/config/Pages.ts

@@ -194,4 +194,7 @@ export const Pages = {
   contactUs: {
     list: "/contact-us/list",
   },
+  sellers: {
+    list: "/sellers/list",
+  },
 };

src/index.css

@@ -55,7 +55,7 @@ textarea::placeholder {
   @apply flex flex-col sm:flex-row sm:gap-5 gap-5;
 }
 .td {
-  @apply px-6 py-4 whitespace-nowrap text-xs;
+  @apply px-2 py-2 whitespace-nowrap text-xs;
 }
 .thead {
   @apply h-[69px] bg-white text-sm text-[#8C90A3] rounded-3xl overflow-hidden;

src/pages/dashboard/components/DashboardOverview.tsx

@@ -9,33 +9,6 @@ const DashboardOverview: FC<{ data?: DashboardData }> = ({ data }) => {
 
     return (
         <div className="space-y-6">
-            {/* دیباگ داده‌های API */}
-            <div className="bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6">
-                <h4 className="text-sm font-medium text-blue-800 mb-2">ℹ️ وضعیت اتصال به API</h4>
-                <div className="text-xs text-blue-700 space-y-1">
-                    <div><strong>داده‌های واقعی API:</strong> {Array.isArray(data?.FiveDaysAgoSales) ? `✅ ${data.FiveDaysAgoSales.length} آیتم دریافت شد` : '❌ داده‌ای وجود ندارد'}</div>
-                    <div><strong>نمودار:</strong> {Array.isArray(data?.FiveDaysAgoSales) && data.FiveDaysAgoSales.length > 0 ? '✅ نمایش داده‌های واقعی API' : '⏳ در انتظار داده‌های API'}</div>
-                    <div><strong>منطق نمایش:</strong> فقط از داده‌های واقعی API استفاده می‌شود</div>
-                </div>
-                {Array.isArray(data?.FiveDaysAgoSales) && data.FiveDaysAgoSales.length > 0 && (
-                    <div className="mt-3 p-2 bg-white rounded text-xs">
-                        <div className="font-medium mb-1">نمونه داده واقعی API:</div>
-                        <pre className="text-gray-600 overflow-x-auto">
-                            {JSON.stringify(data.FiveDaysAgoSales[0], null, 2)}
-                        </pre>
-                    </div>
-                )}
-                <div className="mt-3 p-2 bg-green-50 rounded text-xs">
-                    <div className="font-medium mb-1 text-green-800">🎯 نحوه عملکرد نمودار:</div>
-                    <div className="text-green-700">
-                        ۱. فقط از داده‌های واقعی API استفاده می‌شود<br />
-                        ۲. اگر داده وجود نداشته باشد، نمودار خالی نمایش داده می‌شود<br />
-                        ۳. هیچ داده نمونه‌ای استفاده نمی‌شود<br />
-                        ۴. ساختار داده‌های مورد انتظار: totalSales, totalOrders
-                    </div>
-                </div>
-            </div>
-
             <TitleLine title="نمای کلی داشبورد" />
 
             {/* آمار کلی */}

src/pages/seller/List.tsx

@@ -0,0 +1,95 @@
+import { type FC, useState } from 'react'
+import { useGetSellers } from './hooks/useSellerData'
+import { type Seller } from './types/Types'
+import PageLoading from '../../components/PageLoading'
+import Error from '../../components/Error'
+import PaginationUi from '../../components/PaginationUi'
+import Td from '../../components/Td'
+import SellerTableRow from './components/SellerTableRow'
+import SellerContractModal from './components/SellerContractModal'
+
+const SellerList: FC = () => {
+
+    const [currentPage, setCurrentPage] = useState(1);
+    const [selectedContract, setSelectedContract] = useState<Seller['contracts'] | undefined>();
+    const [isContractModalOpen, setIsContractModalOpen] = useState(false);
+    const { data: sellersData, isLoading, error } = useGetSellers(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 sellers = sellersData?.results?.sellers || [];
+    const pager = sellersData?.results?.pager;
+
+    const handleViewContract = (contract?: Seller['contracts']) => {
+        setSelectedContract(contract);
+        setIsContractModalOpen(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={'وضعیت'} />
+                            <Td text={'نوع کسب‌وکار'} />
+                            <Td text={'تاریخ ایجاد'} />
+                            <Td text={'قرارداد'} />
+                            <Td text={'فعال/غیرفعال'} />
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {sellers.length === 0 ? (
+                            <tr className='tr'>
+                                <td colSpan={9} className="text-center py-8 text-gray-500">
+                                    هیچ فروشنده‌ای یافت نشد
+                                </td>
+                            </tr>
+                        ) : (
+                            sellers.map((seller: Seller) => (
+                                <SellerTableRow
+                                    key={seller._id}
+                                    seller={seller}
+                                    onViewContract={handleViewContract}
+                                />
+                            ))
+                        )}
+                    </tbody>
+                </table>
+            </div>
+
+            <PaginationUi
+                pager={pager}
+                onPageChange={(page) => {
+                    setCurrentPage(page);
+                }}
+            />
+
+            <SellerContractModal
+                open={isContractModalOpen}
+                close={() => setIsContractModalOpen(false)}
+                contract={selectedContract}
+            />
+        </div>
+    )
+}
+
+export default SellerList

src/pages/seller/components/SellerContractModal.tsx

@@ -0,0 +1,89 @@
+import { type FC } from 'react'
+import DefaulModal from '../../../components/DefaulModal'
+import Button from '../../../components/Button'
+import { type Contract } from '../types/Types'
+import { useApproveContract } from '../hooks/useSellerData'
+import { toast } from 'react-toastify'
+import { extractErrorMessage } from '@/helpers/utils'
+
+interface Props {
+    open: boolean
+    close: () => void
+    contract?: Contract
+}
+
+const SellerContractModal: FC<Props> = ({ open, close, contract }) => {
+    const { mutate: approveContract, isPending } = useApproveContract();
+
+    const handleApproveContract = () => {
+        if (contract) {
+            approveContract(contract.seller, {
+                onSuccess: () => {
+                    close();
+                    toast.success('قرارداد با موفقیت تایید شد');
+                },
+                onError: (error) => {
+                    toast.error(extractErrorMessage(error));
+                }
+            });
+        }
+    };
+
+    return (
+        <DefaulModal
+            open={open}
+            close={close}
+            isHeader={true}
+            title_header="قرارداد فروشنده"
+            width={800}
+        >
+            <div className="p-2">
+                {contract?.content ? (
+                    <div className="max-w-none">
+                        <div
+                            className="text-gray-700 "
+                            style={{ lineHeight: '2', fontSize: '14px' }}
+                            dangerouslySetInnerHTML={{ __html: contract.content }}
+                        />
+                    </div>
+                ) : (
+                    <div className="text-center py-8 text-gray-500">
+                        قراردادی برای نمایش وجود ندارد
+                    </div>
+                )}
+
+                {contract && (
+                    <div className="mt-3 pt-3 border-t border-gray-200">
+                        <div className="grid grid-cols-2 gap-4 text-sm text-gray-600">
+                            <div>
+                                <span className="font-medium">شماره قرارداد:</span> {contract.contractNumber}
+                            </div>
+                            <div>
+                                <span className="font-medium">وضعیت امضا:</span> {contract.signed ? 'امضا شده' : 'امضا نشده'}
+                            </div>
+                            {contract.signed && contract.singedAt && (
+                                <div className="col-span-2">
+                                    <span className="font-medium">تاریخ امضا:</span> {contract.singedAt}
+                                </div>
+                            )}
+                        </div>
+
+                        <div className="mt-4 flex justify-end">
+                            <Button
+                                variant="primary"
+                                size="md"
+                                className="w-auto px-6"
+                                isLoading={isPending}
+                                onClick={handleApproveContract}
+                            >
+                                تایید قرارداد
+                            </Button>
+                        </div>
+                    </div>
+                )}
+            </div>
+        </DefaulModal>
+    )
+}
+
+export default SellerContractModal

src/pages/seller/components/SellerTableRow.tsx

@@ -0,0 +1,97 @@
+import { type FC } from 'react'
+import { type Seller } from '../types/Types'
+import StatusWithText from '../../../components/StatusWithText'
+import Td from '../../../components/Td'
+import SellerToggle from './SellerToggle'
+import { Calendar, Call, Card, User as UserIcon, Shop, Eye } from 'iconsax-react'
+
+interface Props {
+    seller: Seller
+    onViewContract: (contract?: Seller['contracts']) => void
+}
+
+const SellerTableRow: FC<Props> = ({ seller, onViewContract }) => {
+    const getStatusVariant = (status: string) => {
+        switch (status) {
+            case 'Approved': return 'success';
+            case 'Pending': return 'warning';
+            default: return 'warning';
+        }
+    };
+
+    const getStatusText = (status: string) => {
+        switch (status) {
+            case 'Approved': return 'تایید شده';
+            case 'Pending': return 'در انتظار';
+            default: return status;
+        }
+    };
+
+    const formatDate = (dateString: string) => {
+        if (!dateString) return '-';
+        return new Date(dateString).toLocaleDateString('fa-IR');
+    };
+
+    return (
+        <tr key={seller._id} className='tr'>
+            <Td text="">
+                <div className="flex items-center gap-1">
+                    <UserIcon size={16} color="#8C90A3" />
+                    <span>{seller.fullName || '-'}</span>
+                </div>
+            </Td>
+            <Td text="">
+                <div className="flex items-center gap-1">
+                    <Shop size={16} color="#8C90A3" />
+                    <span>{seller.shop?.shopName || '-'}</span>
+                </div>
+            </Td>
+            <Td text="">
+                <div className="flex items-center gap-1">
+                    <Card size={16} color="#8C90A3" />
+                    <span>{seller.email || '-'}</span>
+                </div>
+            </Td>
+            <Td text="">
+                <div className="flex items-center gap-1">
+                    <Call size={16} color="#8C90A3" />
+                    <span>{seller.phoneNumber}</span>
+                </div>
+            </Td>
+            <Td text="">
+                <StatusWithText
+                    variant={getStatusVariant(seller.accountStatus)}
+                    text={getStatusText(seller.accountStatus)}
+                />
+            </Td>
+            <Td text={seller.businessType || '-'} />
+            <Td text="">
+                <div className="flex items-center gap-1">
+                    <Calendar size={16} color="#8C90A3" />
+                    <span>{formatDate(seller.createdAt)}</span>
+                </div>
+            </Td>
+            <Td text="">
+                {seller.contracts ? (
+                    <button
+                        onClick={() => onViewContract(seller.contracts)}
+                        className="flex items-center gap-2 px-3 py-1 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-100 transition-colors"
+                    >
+                        <Eye color="#8C90A3" size={16} />
+                        <span className="text-sm">مشاهده</span>
+                    </button>
+                ) : (
+                    <span className="text-gray-400 text-sm">-</span>
+                )}
+            </Td>
+            <Td text="">
+                <SellerToggle
+                    sellerId={seller._id}
+                    isActive={seller.accountStatus === 'Approved'}
+                />
+            </Td>
+        </tr>
+    )
+}
+
+export default SellerTableRow

src/pages/seller/components/SellerToggle.tsx

@@ -0,0 +1,46 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query'
+import SwitchComponent from '../../../components/Switch'
+import * as api from '../service/SellerService'
+import { extractErrorMessage } from '@/helpers/utils'
+import { toast } from 'react-toastify'
+
+interface SellerToggleProps {
+    sellerId: string
+    isActive: boolean
+}
+
+const SellerToggle: React.FC<SellerToggleProps> = ({ sellerId, isActive }) => {
+    const queryClient = useQueryClient()
+
+    const toggleMutation = useMutation({
+        mutationFn: api.toggleSellerStatus,
+        onSuccess: () => {
+            // Refresh sellers data after successful toggle
+            queryClient.invalidateQueries({ queryKey: ['sellers'] })
+        },
+        onError: (error) => {
+            console.error('Error toggling seller status:', error)
+        }
+    })
+
+    const handleToggle = async () => {
+
+        await toggleMutation.mutateAsync(sellerId, {
+            onError: (error) => {
+                toast.error(extractErrorMessage(error))
+            }
+        })
+
+    }
+
+    return (
+        <SwitchComponent
+            active={isActive}
+            onChange={handleToggle}
+            isLoading={toggleMutation.isPending}
+            label=""
+        />
+    )
+}
+
+export default SellerToggle

src/pages/seller/hooks/useSellerData.ts

@@ -0,0 +1,21 @@
+import * as api from "../service/SellerService";
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+export const useGetSellers = (page: number = 1) => {
+  return useQuery({
+    queryKey: ["sellers", page],
+    queryFn: () => api.getSellers(page),
+  });
+};
+
+export const useToggleSellerStatus = () => {
+  return useMutation({
+    mutationFn: api.toggleSellerStatus,
+  });
+};
+
+export const useApproveContract = () => {
+  return useMutation({
+    mutationFn: api.approveContract,
+  });
+};

src/pages/seller/service/SellerService.ts

@@ -0,0 +1,23 @@
+import axios from "@/config/axios";
+import type { SellersResponse } from "../types/Types";
+
+export const getSellers = async (
+  page: number = 1
+): Promise<SellersResponse> => {
+  const { data } = await axios.get(`/admin/sellers?page=${page}`);
+  return data;
+};
+
+export const toggleSellerStatus = async (sellerId: string) => {
+  const { data } = await axios.patch(
+    `/admin/sellers/approve-register/${sellerId}`
+  );
+  return data;
+};
+
+export const approveContract = async (sellerId: string) => {
+  const { data } = await axios.patch(
+    `/admin/sellers/approve-contract/${sellerId}`
+  );
+  return data;
+};

src/pages/seller/types/Types.ts

@@ -0,0 +1,87 @@
+// Seller Types
+export interface SellerDocument {
+  _id: string;
+  seller: string;
+  type: string;
+  __v: number;
+  comment: string | null;
+  createdAt: string;
+  docsUrl: string;
+  status: "Approved" | "Pending";
+  updatedAt: string;
+}
+
+export interface ShopRate {
+  totalRate: number;
+  totalCount: number;
+  onTimeShip: number;
+  returns: number;
+  cancel: number;
+}
+
+export interface Shop {
+  _id: string;
+  shopName: string | null;
+  shopDescription: string | null;
+  telephoneNumber: string | null;
+  shopPostalCode: string | null;
+  address: string | null;
+  logo: string | null;
+  rate: ShopRate;
+  shipmentMethod: number[];
+  isChatActive: boolean;
+  owner: string;
+  ownerRef: string;
+  createdAt: string;
+  updatedAt: string;
+  shopCode: number;
+  __v: number;
+}
+
+export interface Contract {
+  _id: string;
+  content: string;
+  seller: string;
+  contractNumber: string;
+  signed: boolean;
+  singedAt: string;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+}
+
+export interface Seller {
+  _id: string;
+  fullName: string;
+  dateOfBirth: string | null;
+  phoneNumber: string;
+  accountStatus: "Pending" | "Approved";
+  isRegisterCompleted: boolean;
+  businessType: string | null;
+  isWholesaler: boolean;
+  createdAt: string;
+  updatedAt: string;
+  __v: number;
+  email?: string;
+  documents?: SellerDocument[];
+  shop: Shop;
+  contracts?: Contract;
+}
+
+export interface Pager {
+  page: number;
+  limit: number;
+  totalItems: number;
+  totalPages: number;
+  prevPage: boolean | null;
+  nextPage: string | null;
+}
+
+export interface SellersResponse {
+  status: number;
+  success: boolean;
+  results: {
+    sellers: Seller[];
+    pager: Pager;
+  };
+}

src/router/Main.tsx

@@ -62,6 +62,7 @@ import JobsList from '@/pages/jobs/List'
 import Resumes from '@/pages/jobs/Resume'
 import ContactUsList from '@/pages/contactUs/List'
 import Dashboard from '@/pages/dashboard/Dashboard'
+import SellerList from '@/pages/seller/List'
 
 const MainRouter: FC = () => {
 
@@ -157,6 +158,8 @@ const MainRouter: FC = () => {
                             <Route path="/dashboard/unread-comments" element={<Dashboard />} />
                             <Route path="/dashboard/users-count" element={<Dashboard />} />
                             <Route path="/dashboard/orders-chart" element={<Dashboard />} />
+
+                            <Route path={Pages.sellers.list} element={<SellerList />} />
                         </Routes>
                     </div>
                 </div>