seller list + view contract and confrim + approve register
This commit is contained in:
hamid zarghami
@@ -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) => {
|
||||
|
||||
@@ -194,4 +194,7 @@ export const Pages = {
|
||||
contactUs: {
|
||||
list: "/contact-us/list",
|
||||
},
|
||||
sellers: {
|
||||
list: "/sellers/list",
|
||||
},
|
||||
};
|
||||
|
||||
+1
-1
@@ -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;
|
||||
|
||||
@@ -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="نمای کلی داشبورد" />
|
||||
|
||||
{/* آمار کلی */}
|
||||
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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
|
||||
@@ -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,
|
||||
});
|
||||
};
|
||||
@@ -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;
|
||||
};
|
||||
@@ -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;
|
||||
};
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user