up

2026-07-09 18:00:08 +03:30
parent a1995fabb8
commit 7fd8b4c7e5
6 changed files with 577 additions and 145 deletions
@@ -1,53 +1,119 @@
 import { type FC } from 'react'
-import { useGetRequestDetail } from './hooks/useRequestData'
 import { Link, useParams } from 'react-router-dom'
-import RequestItem from './components/RequestItem'
+import moment from 'moment-jalaali'
+import { Calendar, Profile2User, TickSquare } from 'iconsax-react'
+import { useGetRequestDetail } from './hooks/useRequestData'
+import RequestDetailItem from './components/RequestDetailItem'
+import TicketSection from './components/TicketSection'
 import { Paths } from '@/config/Paths'
 import BackButton from '@/components/BackButton'
 import Button from '@/components/Button'
 import RefreshButton from '@/components/RefreshButton'
-import { TickSquare } from 'iconsax-react'
-import TicketSection from '../order/components/TicketSection'

 const RequestDetail: FC = () => {
    const { id } = useParams()
-    const { data, refetch, isFetching } = useGetRequestDetail(id!)
+    const { data, refetch, isFetching, isPending, isError } = useGetRequestDetail(id!)
+    const request = data?.data
+    const items = request?.items ?? []
+
+    const customerName =
+        [request?.user?.firstName, request?.user?.lastName].filter(Boolean).join(' ') ||
+        request?.user?.phone ||
+        undefined
+
+    if (isPending && !request) {
+        return (
+            <div className="flex items-center justify-center min-h-[240px]">
+                <span className="text-sm text-[#8C90A3]">در حال بارگذاری...</span>
+            </div>
+        )
+    }
+
+    if (isError || !request) {
+        return (
+            <div className="flex flex-col items-center justify-center min-h-[240px] gap-4">
+                <span className="text-sm text-[#8C90A3]">درخواست یافت نشد</span>
+                <BackButton to={Paths.requests.list} />
+            </div>
+        )
+    }

    return (
-        <div className="w-full min-h-screen bg-[#eceef6] p-6">
-            {/* Header Section */}
-            <div className="flex items-center justify-between mb-6">
+        <div className="pb-8">
+            <div className="flex flex-wrap items-center justify-between gap-4 mb-6">
                <BackButton to={Paths.requests.list} />
+
                <div className="flex items-center gap-3">
                    <RefreshButton onClick={() => refetch()} isLoading={isFetching} />
                    <Link to={Paths.perfomaInvoice.create + `?requestId=${id}`}>
-                    <Button className="w-fit px-5">
-                        <div className="flex gap-2 items-center">
-                            <TickSquare size={20} color="black" />
-                            <div>ثبت پیش فاکتور</div>
-                        </div>
-                    </Button>
+                        <Button className="w-fit px-5">
+                            <div className="flex gap-2 items-center">
+                                <TickSquare size={20} color="black" />
+                                <span>ثبت پیش فاکتور</span>
+                            </div>
+                        </Button>
                    </Link>
                </div>
            </div>

-            <div className="text-sm text-[#8C90A3] mb-6">
-                درخواست #{data?.data?.requestNumber}
-            </div>
-
-            {/* Request Information Section */}
-            <div className="bg-white rounded-2xl p-6 mb-6">
-                <div className='flex justify-between items-center'>
-                    <h2 className="text-lg font-light mb-6">اطلاعات درخواست</h2>
-                </div>
-                <div className='flex flex-col gap-10'>
-                    {data?.data?.items?.map((item) => (
-                        <RequestItem key={item.id} item={item} />
-                    ))}
+            <div className="flex flex-wrap items-start justify-between gap-4 mb-6">
+                <div>
+                    <h1 className="text-lg font-light text-black">
+                        درخواست #{request.requestNumber}
+                    </h1>
+                    <div className="flex flex-wrap items-center gap-x-3 gap-y-2 mt-2 text-xs text-[#8C90A3]">
+                        <div className="flex items-center gap-2">
+                            <Calendar size={14} />
+                            <span>
+                                تاریخ ثبت:{' '}
+                                {moment(request.createdAt).format('jYYYY/jMM/jDD HH:mm')}
+                            </span>
+                        </div>
+                        {items.length > 0 && (
+                            <>
+                                <span className="text-[#D8DCE8]">|</span>
+                                <span>{items.length} قلم</span>
+                            </>
+                        )}
+                        {customerName && (
+                            <>
+                                <span className="text-[#D8DCE8]">|</span>
+                                <div className="flex items-center gap-1.5">
+                                    <Profile2User size={14} />
+                                    <span>{customerName}</span>
+                                </div>
+                            </>
+                        )}
+                        {request.user?.phone && (
+                            <>
+                                <span className="text-[#D8DCE8]">|</span>
+                                <span dir="ltr">{request.user.phone}</span>
+                            </>
+                        )}
+                    </div>
                </div>
            </div>

-            <TicketSection />
+            <section className="bg-white rounded-2xl p-6 md:p-8 mb-6">
+                <h2 className="text-sm text-black mb-6">اطلاعات درخواست</h2>
+
+                {items.length === 0 ? (
+                    <p className="text-sm text-[#8C90A3]">قلمی برای این درخواست ثبت نشده است.</p>
+                ) : (
+                    <div>
+                        {items.map((item, index) => (
+                            <RequestDetailItem
+                                key={item.id}
+                                item={item}
+                                index={index}
+                                total={items.length}
+                            />
+                        ))}
+                    </div>
+                )}
+            </section>
+
+            <TicketSection customerName={customerName} />
        </div>
    )
 }