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

list of request create product

Browse Source
This commit is contained in:
hamid zarghami
2025-10-12 10:48:53 +03:30
parent e8c657f573
commit db6157ae5d
10 changed files with 584 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/seller/components/ProductRequestDetailModal.tsx
+249
View File
@@ -0,0 +1,249 @@
import { type FC } from 'react'
import DefaulModal from '@/components/DefaulModal'
import { type ProductRequest } from '../types/Types'
import StatusWithText from '@/components/StatusWithText'
import { Calendar, User as UserIcon, Shop, Tag, Box, MessageSquare, Location, Money } from 'iconsax-react'
interface Props {
open: boolean
close: () => void
request: ProductRequest | null
}
const ProductRequestDetailModal: FC<Props> = ({ open, close, request }) => {
if (!request) return null
const getStatusVariant = (status: string) => {
switch (status) {
case 'Approved': return 'success'
case 'Rejected': return 'error'
case 'Pending': return 'warning'
case 'Draft': return 'warning'
default: return 'warning'
}
}
const getStatusText = (status: string) => {
switch (status) {
case 'Approved': return 'تایید شده'
case 'Rejected': return 'رد شده'
case 'Pending': return 'در انتظار'
case 'Draft': return 'پیش‌نویس'
default: return status
}
}
const formatDate = (dateString: string) => {
if (!dateString) return '-'
return new Date(dateString).toLocaleDateString('fa-IR')
}
return (
<DefaulModal
open={open}
close={close}
isHeader={true}
title_header="جزئیات درخواست ایجاد محصول"
width={800}
>
<div className="space-y-6 mt-4">
{/* وضعیت درخواست */}
<div className="flex items-center justify-between">
<h3 className="text-lg font-semibold text-gray-900">وضعیت درخواست</h3>
<StatusWithText
variant={getStatusVariant(request.requestStatus)}
text={getStatusText(request.requestStatus)}
/>
</div>
{/* اطلاعات فروشنده */}
<div className="bg-gray-50 rounded-lg p-4">
<h4 className="text-md font-medium text-gray-900 mb-3 flex items-center gap-2">
<UserIcon size={20} color="#374151" />
اطلاعات فروشنده
</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-center gap-2">
<UserIcon size={16} color="#6B7280" />
<span className="text-sm text-gray-600">نام:</span>
<span className="text-sm font-medium">{request.seller?.fullName || '-'}</span>
</div>
<div className="flex items-center gap-2">
<Shop size={16} color="#6B7280" />
<span className="text-sm text-gray-600">فروشگاه:</span>
<span className="text-sm font-medium">{request.shop?.shopName || '-'}</span>
</div>
<div className="flex items-center gap-2">
<Location size={16} color="#6B7280" />
<span className="text-sm text-gray-600">آدرس:</span>
<span className="text-sm font-medium">{request.shop?.address?.province?.name || '-'}، {request.shop?.address?.city?.name || '-'}</span>
</div>
<div className="flex items-center gap-2">
<Tag size={16} color="#6B7280" />
<span className="text-sm text-gray-600">کد فروشگاه:</span>
<span className="text-sm font-medium">{request.shop?.shopCode || '-'}</span>
</div>
</div>
</div>
{/* اطلاعات محصول */}
<div className="bg-blue-50 rounded-lg p-4">
<h4 className="text-md font-medium text-gray-900 mb-3 flex items-center gap-2">
<Box size={20} color="#1E40AF" />
اطلاعات محصول
</h4>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="flex items-center gap-2">
<Box size={16} color="#6B7280" />
<span className="text-sm text-gray-600">نام محصول:</span>
<span className="text-sm font-medium">{request.productName}</span>
</div>
<div className="flex items-center gap-2">
<Tag size={16} color="#6B7280" />
<span className="text-sm text-gray-600">برند:</span>
<span className="text-sm font-medium">{request.brand?.title_fa || '-'}</span>
</div>
<div className="flex items-center gap-2">
<MessageSquare size={16} color="#6B7280" />
<span className="text-sm text-gray-600">دسته‌بندی:</span>
<span className="text-sm font-medium">{request.category?.title_fa || '-'}</span>
</div>
<div className="flex items-center gap-2">
<Tag size={16} color="#6B7280" />
<span className="text-sm text-gray-600">منبع:</span>
<span className="text-sm font-medium">{request.source || '-'}</span>
</div>
</div>
</div>
{/* توضیحات */}
<div className="bg-green-50 rounded-lg p-4">
<h4 className="text-md font-medium text-gray-900 mb-3">توضیحات</h4>
<p className="text-sm text-gray-700 leading-relaxed">{String(request.description || 'توضیحاتی وارد نشده')}</p>
</div>
{/* ابعاد و وزن */}
<div className="bg-yellow-50 rounded-lg p-4">
<h4 className="text-md font-medium text-gray-900 mb-3 flex items-center gap-2">
<Box size={20} color="#92400E" />
ابعاد و وزن
</h4>
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
<div className="text-center">
<div className="text-lg font-semibold text-gray-900">{request.dimensions?.package_weight || 0}</div>
<div className="text-xs text-gray-600">وزن (گرم)</div>
</div>
<div className="text-center">
<div className="text-lg font-semibold text-gray-900">{request.dimensions?.package_length || 0}</div>
<div className="text-xs text-gray-600">طول (سانتی‌متر)</div>
</div>
<div className="text-center">
<div className="text-lg font-semibold text-gray-900">{request.dimensions?.package_width || 0}</div>
<div className="text-xs text-gray-600">عرض (سانتی‌متر)</div>
</div>
<div className="text-center">
<div className="text-lg font-semibold text-gray-900">{request.dimensions?.package_height || 0}</div>
<div className="text-xs text-gray-600">ارتفاع (سانتی‌متر)</div>
</div>
</div>
</div>
{/* مزایا و معایب */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="bg-green-50 rounded-lg p-4">
<h4 className="text-md font-medium text-green-900 mb-3">مزایا</h4>
{request.advantages && request.advantages.length > 0 ? (
<ul className="space-y-1">
{request.advantages.map((advantage, index) => (
<li key={index} className="text-sm text-green-800 flex items-center gap-2">
<span className="w-1.5 h-1.5 bg-green-600 rounded-full"></span>
{String(advantage)}
</li>
))}
</ul>
) : (
<p className="text-sm text-gray-600">مزایایی وارد نشده</p>
)}
</div>
<div className="bg-red-50 rounded-lg p-4">
<h4 className="text-md font-medium text-red-900 mb-3">معایب</h4>
{request.disAdvantages && request.disAdvantages.length > 0 ? (
<ul className="space-y-1">
{request.disAdvantages.map((disadvantage, index) => (
<li key={index} className="text-sm text-red-800 flex items-center gap-2">
<span className="w-1.5 h-1.5 bg-red-600 rounded-full"></span>
{String(disadvantage)}
</li>
))}
</ul>
) : (
<p className="text-sm text-gray-600">معایبی وارد نشده</p>
)}
</div>
</div>
{/* خدمات درخواست شده */}
<div className="bg-purple-50 rounded-lg p-4">
<h4 className="text-md font-medium text-gray-900 mb-3">خدمات درخواست شده</h4>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="flex items-center gap-2">
<input
type="checkbox"
checked={request.requestPhotography}
readOnly
className="rounded border-gray-300"
/>
<span className="text-sm">📸 عکاسی محصول</span>
{request.requestPhotosCount && (
<span className="text-xs text-gray-600">({request.requestPhotosCount} عکس)</span>
)}
</div>
<div className="flex items-center gap-2">
<input
type="checkbox"
checked={request.expertReview}
readOnly
className="rounded border-gray-300"
/>
<span className="text-sm">👨‍💼 بررسی تخصصی</span>
</div>
<div className="flex items-center gap-2">
<input
type="checkbox"
checked={request.unboxingVideo}
readOnly
className="rounded border-gray-300"
/>
<span className="text-sm">📦 ویدیو باز کردن بسته</span>
</div>
</div>
</div>
{/* اطلاعات پرداخت */}
{request.payment && (
<div className="bg-indigo-50 rounded-lg p-4">
<h4 className="text-md font-medium text-gray-900 mb-3 flex items-center gap-2">
<Money size={20} color="#312E81" />
اطلاعات پرداخت
</h4>
<div className="text-sm text-gray-700">
<pre className="whitespace-pre-wrap">{String(JSON.stringify(request.payment, null, 2))}</pre>
</div>
</div>
)}
{/* تاریخ ایجاد */}
<div className="flex items-center justify-between text-sm text-gray-600 border-t pt-4">
<span>تاریخ ایجاد:</span>
<div className="flex items-center gap-1">
<Calendar size={16} color="#6B7280" />
<span>{formatDate(request._id ? new Date().toISOString() : '')}</span>
</div>
</div>
</div>
</DefaulModal>
)
}
export default ProductRequestDetailModal