request detail

2026-02-21 11:08:17 +03:30
parent ff9072b8d9
commit 7d702c41f8
8 changed files with 205 additions and 3 deletions
@@ -0,0 +1,97 @@
+import { type FC } from 'react'
+import type { RequestDetailItemType } from '../types/Types'
+import { useGetEntityField } from '@/pages/formBuilder/hooks/useFormBuilderData'
+import { Paperclip2 } from 'iconsax-react'
+
+type Props = {
+    item: RequestDetailItemType
+}
+
+const RequestItem: FC<Props> = ({ item }) => {
+    const { data: fields } = useGetEntityField(Number(item.product?.id))
+
+    const handleOpenAttachment = (url: string) => {
+        window.open(url, '_blank')
+    }
+
+    return (
+        <div key={item.product?.id} className='border border-border rounded-3xl p-6'>
+            <div className='flex items-center justify-between mb-4'>
+                <div>#{item.id}</div>
+            </div>
+            <div className="flex items-center gap-6">
+                {/* Product Image */}
+                <div className='size-[86px] rounded-lg overflow-hidden bg-gray-100'>
+                    {item.product?.images?.[0] ? (
+                        <img src={item.product.images[0]} alt={item.product?.title} className='size-full object-cover' />
+                    ) : (
+                        <div className='size-full flex items-center justify-center text-desc text-xs'>بدون تصویر</div>
+                    )}
+                </div>
+
+                {/* Request Details */}
+                <div className="flex-1 flex gap-20 pr-10 flex-wrap">
+                    <div className='flex items-center gap-2'>
+                        <div className="text-xs text-desc">عنوان:</div>
+                        <div className="text-sm font-medium text-black">{item.product?.title}</div>
+                    </div>
+                    <div className='flex items-center gap-2'>
+                        <div className="text-xs text-desc">تعداد:</div>
+                        <div className="text-sm font-medium text-black">{item.quantity}</div>
+                    </div>
+                </div>
+            </div>
+
+            {/* Description */}
+            {item.description && (
+                <div className="mt-6 pt-6 border-t border-dashed border-desc">
+                    <div className="text-sm font-medium mb-2 text-desc">شرح درخواست:</div>
+                    <p className="text-sm font-light text-black leading-6">
+                        {item.description}
+                    </p>
+                </div>
+            )}
+
+            {/* Attributes */}
+            {fields?.data?.length ? (
+                <>
+                    <div className='font-bold mb-5 mt-7'>ویژگی ها</div>
+                    {
+                        fields.data.map((field) => {
+                            const value = item.attributes?.find((o) => Number(o.attributeId) === Number(field.id))
+                            return (
+                                <div className='flex gap-3 items-center mt-3' key={field.id}>
+                                    <div className='text-sm text-gray-500'>{field.name}:</div>
+                                    <div className='text-sm -mt-px'>{value?.value || '-'}</div>
+                                </div>
+                            )
+                        })
+                    }
+                </>
+            ) : null}
+
+            {/* Attachments */}
+            {item.attachments?.length ? (
+                <div className='mt-6 pt-6 border-t border-dashed border-desc'>
+                    <div className='text-sm font-medium mb-2 text-desc'>ضمایم:</div>
+                    <div className="flex gap-3 flex-wrap">
+                        {item.attachments
+                            ?.filter((url): url is string => typeof url === 'string')
+                            .map((url, index) => (
+                                <button
+                                    key={index}
+                                    onClick={() => handleOpenAttachment(url as string)}
+                                    className="flex cursor-pointer items-center gap-1.5 text-[#0047FF] hover:underline"
+                                >
+                                    <Paperclip2 size={20} color="#0047FF" />
+                                    <span className="text-xs">فایل {index + 1}</span>
+                                </button>
+                            ))}
+                    </div>
+                </div>
+            ) : null}
+        </div>
+    )
+}
+
+export default RequestItem