122 lines
5.0 KiB
TypeScript
122 lines
5.0 KiB
TypeScript
import { type FC } from 'react'
|
||
import { Link, useParams } from 'react-router-dom'
|
||
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'
|
||
|
||
const RequestDetail: FC = () => {
|
||
const { id } = useParams()
|
||
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="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" />
|
||
<span>ثبت پیش فاکتور</span>
|
||
</div>
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
|
||
<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>
|
||
|
||
<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>
|
||
)
|
||
}
|
||
|
||
export default RequestDetail
|