request create product + category learning
This commit is contained in:
@@ -1,8 +1,6 @@
|
||||
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
|
||||
@@ -13,31 +11,6 @@ interface Props {
|
||||
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}
|
||||
@@ -47,203 +20,10 @@ const ProductRequestDetailModal: FC<Props> = ({ open, close, request }) => {
|
||||
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>
|
||||
<p>در حال حاضر این modal در حال توسعه است.</p>
|
||||
</div>
|
||||
</DefaulModal>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductRequestDetailModal
|
||||
export default ProductRequestDetailModal
|
||||
Reference in New Issue
Block a user