new UX for new request

2026-05-24 15:50:02 +03:30
parent 131220fcd9
commit 86475dc72a
5 changed files with 400 additions and 123 deletions
@@ -0,0 +1,114 @@
+import { type FC } from 'react'
+import Button from '@/components/Button'
+import { Edit, ShoppingCart, TickSquare, Trash } from 'iconsax-react'
+import { useGetProducts } from '../hooks/useRequestData'
+import type { RequestType } from '../type/Types'
+import { clx } from '@/helpers/utils'
+
+type Props = {
+    items: RequestType[]
+    editingIndex: number | null
+    onEdit: (index: number) => void
+    onRemove: (index: number) => void
+    onSubmit: () => void
+    isPending: boolean
+}
+
+const RequestItemsList: FC<Props> = ({
+    items,
+    editingIndex,
+    onEdit,
+    onRemove,
+    onSubmit,
+    isPending,
+}) => {
+    const { data: productsData } = useGetProducts()
+
+    const getProductTitle = (productId?: string) =>
+        productsData?.data?.find((p) => p.id === productId)?.title ?? 'محصول'
+
+    return (
+        <div className='bg-white w-full xl:w-[320px] shrink-0 py-6 px-5 h-fit rounded-3xl xl:sticky xl:top-6'>
+            <div className='flex items-center gap-2'>
+                <ShoppingCart size={20} color='black' />
+                <span className='text-sm font-medium'>اقلام درخواست</span>
+                {items.length > 0 && (
+                    <span className='text-xs bg-primary/20 text-black rounded-full px-2 py-0.5 mr-auto'>
+                        {items.length}
+                    </span>
+                )}
+            </div>
+
+            {items.length === 0 ? (
+                <p className='text-description text-xs mt-6 leading-6'>
+                    هنوز قلمی اضافه نشده. فرم را پر کنید و روی «افزودن به لیست» بزنید.
+                </p>
+            ) : (
+                <ul className='mt-4 space-y-3 max-h-[360px] overflow-y-auto'>
+                    {items.map((item, index) => (
+                        <li
+                            key={index}
+                            className={clx(
+                                'border rounded-2xl p-3 transition-colors',
+                                editingIndex === index
+                                    ? 'border-primary bg-primary/5'
+                                    : 'border-[#f0f2f8]'
+                            )}
+                        >
+                            <div className='text-sm font-medium truncate'>
+                                {getProductTitle(item.productId)}
+                            </div>
+                            <div className='text-description text-xs mt-1'>
+                                تعداد: {item.quantity}
+                                {item.attachments.length > 0 && (
+                                    <span className='mr-2'>
+                                        · {item.attachments.length} پیوست
+                                    </span>
+                                )}
+                            </div>
+                            <div className='flex gap-2 mt-3'>
+                                <button
+                                    type='button'
+                                    onClick={() => onEdit(index)}
+                                    className='flex items-center gap-1 text-xs text-[#3B82F6] hover:opacity-80'
+                                >
+                                    <Edit size={16} color='#3B82F6' />
+                                    ویرایش
+                                </button>
+                                <button
+                                    type='button'
+                                    onClick={() => onRemove(index)}
+                                    className='flex items-center gap-1 text-xs text-red-500 hover:opacity-80 mr-auto'
+                                >
+                                    <Trash size={16} color='#ef4444' />
+                                    حذف
+                                </button>
+                            </div>
+                        </li>
+                    ))}
+                </ul>
+            )}
+
+            <div className='mt-6 pt-4 border-t border-[#f0f2f8]'>
+                <Button
+                    className='w-full'
+                    onClick={onSubmit}
+                    isLoading={isPending}
+                    disabled={items.length === 0}
+                >
+                    <div className='flex gap-2 items-center justify-center'>
+                        <TickSquare size={20} color='black' />
+                        <span>ثبت نهایی درخواست</span>
+                    </div>
+                </Button>
+                {items.length === 0 && (
+                    <p className='text-description text-[10px] text-center mt-2'>
+                        حداقل یک قلم برای ثبت لازم است
+                    </p>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default RequestItemsList