up

src/assets/images/placeholder-product.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="86" height="86" viewBox="0 0 86 86" fill="none">
+  <rect width="86" height="86" fill="#F3F4F6"/>
+  <path d="M28 54L38 42L48 52L58 38L66 54H28Z" fill="#D1D5DB"/>
+  <circle cx="34" cy="32" r="5" fill="#D1D5DB"/>
+  <rect x="22" y="22" width="42" height="42" rx="4" stroke="#D1D5DB" stroke-width="2"/>
+</svg>

src/pages/request/RequestDetail.tsx

@@ -2,6 +2,7 @@ import { type FC } from 'react'
 import { useParams } from 'react-router-dom'
 import { useGetRequestDetails } from './hooks/useRequestData'
 import TicketSection from './components/TicketSection'
+import placeholderProductImage from '@/assets/images/placeholder-product.svg'
 
 const RequestDetail: FC = () => {
 
@@ -25,12 +26,21 @@ const RequestDetail: FC = () => {
                 <div className='flex flex-col gap-10'>
                     {
                         data?.data?.items?.map((item) => {
+                            const productImage = item.product?.images?.[0]
+
                             return (
                                 <div key={item.product.id}>
                                     <div className="flex items-center gap-6">
                                         {/* Product Image */}
-                                        <div className='size-[86px] rounded-lg overflow-hidden'>
-                                            <img src={item.product?.images?.[0]} className='size-full' />
+                                        <div className='size-[86px] rounded-lg overflow-hidden bg-gray-100'>
+                                            <img
+                                                src={productImage || placeholderProductImage}
+                                                alt={item.product?.title ?? 'محصول'}
+                                                className='size-full object-cover'
+                                                onError={(e) => {
+                                                    e.currentTarget.src = placeholderProductImage
+                                                }}
+                                            />
                                         </div>
 
                                         {/* Order Details */}