From 7d702c41f898ab01bd3df67dd2311ee8c9a245e3 Mon Sep 17 00:00:00 2001
From: hamid zarghami <hamid.zarghami1@gmail.com>
Date: Sat, 21 Feb 2026 11:08:17 +0330
Subject: [PATCH] request detail

---
 src/config/Paths.tsx                          |  1 +
 src/pages/requests/Detail.tsx                 | 34 +++++++
 src/pages/requests/RequestList.tsx            |  2 +-
 src/pages/requests/components/RequestItem.tsx | 97 +++++++++++++++++++
 src/pages/requests/hooks/useRequestData.ts    |  8 ++
 src/pages/requests/service/RequestService.ts  | 11 ++-
 src/pages/requests/types/Types.ts             | 52 ++++++++++
 src/router/MainRouter.tsx                     |  3 +-
 8 files changed, 205 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/requests/Detail.tsx
 create mode 100644 src/pages/requests/components/RequestItem.tsx

diff --git a/src/config/Paths.tsx b/src/config/Paths.tsx
index 5ed51ce..8a7bd0a 100644
--- a/src/config/Paths.tsx
+++ b/src/config/Paths.tsx
@@ -1,6 +1,7 @@
 export const Paths = {
   requests: {
     list: '/requests',
+    detail: '/requests/',
   },
   product: {
     list: '/product/list',
diff --git a/src/pages/requests/Detail.tsx b/src/pages/requests/Detail.tsx
new file mode 100644
index 0000000..d66c4a4
--- /dev/null
+++ b/src/pages/requests/Detail.tsx
@@ -0,0 +1,34 @@
+import { type FC } from 'react'
+import { useGetRequestDetail } from './hooks/useRequestData'
+import { useParams } from 'react-router-dom'
+import RequestItem from './components/RequestItem'
+
+const RequestDetail: FC = () => {
+    const { id } = useParams()
+    const { data } = useGetRequestDetail(id!)
+
+    return (
+        <div className="w-full min-h-screen bg-[#eceef6] p-6">
+            {/* Header Section */}
+            <div className="flex items-start justify-between mb-6">
+                <div className="text-sm text-[#8C90A3]">
+                    درخواست #{data?.data?.requestNumber}
+                </div>
+            </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>
+            </div>
+        </div>
+    )
+}
+
+export default RequestDetail
diff --git a/src/pages/requests/RequestList.tsx b/src/pages/requests/RequestList.tsx
index 6c3162c..7d95ece 100644
--- a/src/pages/requests/RequestList.tsx
+++ b/src/pages/requests/RequestList.tsx
@@ -98,7 +98,7 @@ const RequestList: FC = () => {
                                 return (
                                     <div className='flex gap-2 items-center'>
                                         <Link
-                                            to={Paths.order.details + item.id}
+                                            to={Paths.requests.detail + item.id}
                                         >
                                             <Eye size={20} color='#8C90A3' />
                                         </Link>
diff --git a/src/pages/requests/components/RequestItem.tsx b/src/pages/requests/components/RequestItem.tsx
new file mode 100644
index 0000000..a2da44d
--- /dev/null
+++ b/src/pages/requests/components/RequestItem.tsx
@@ -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
diff --git a/src/pages/requests/hooks/useRequestData.ts b/src/pages/requests/hooks/useRequestData.ts
index 256d362..9292238 100644
--- a/src/pages/requests/hooks/useRequestData.ts
+++ b/src/pages/requests/hooks/useRequestData.ts
@@ -7,3 +7,11 @@ export const useGetRequests = () => {
     queryFn: api.getRequests,
   });
 };
+
+export const useGetRequestDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["request", id],
+    queryFn: () => api.getRequestDetail(id),
+    enabled: !!id,
+  });
+};
diff --git a/src/pages/requests/service/RequestService.ts b/src/pages/requests/service/RequestService.ts
index e1bb5f7..e36ef79 100644
--- a/src/pages/requests/service/RequestService.ts
+++ b/src/pages/requests/service/RequestService.ts
@@ -1,7 +1,16 @@
 import axios from "@/config/axios";
-import type { RequestResponseType } from "@/pages/requests/types/Types";
+import type {
+  RequestDetailResponseType,
+  RequestResponseType,
+} from "@/pages/requests/types/Types";
 
 export const getRequests = async () => {
   const { data } = await axios.get<RequestResponseType>("/admin/request");
   return data;
 };
+
+export const getRequestDetail = async (id: string) => {
+  const { data } =
+    await axios.get<RequestDetailResponseType>(`/admin/request/${id}`);
+  return data;
+};
diff --git a/src/pages/requests/types/Types.ts b/src/pages/requests/types/Types.ts
index 63c6aa2..3b1a6c7 100644
--- a/src/pages/requests/types/Types.ts
+++ b/src/pages/requests/types/Types.ts
@@ -32,3 +32,55 @@ export type RequestType = {
 };
 
 export type RequestResponseType = BaseResponse<RequestType[]>;
+
+// Types for getRequestDetail response (matches API structure)
+export type RequestDetailUserType = {
+  id: string;
+  createdAt: string;
+  deletedAt: string | null;
+  firstName: string | null;
+  lastName: string | null;
+  isActive: boolean;
+  gender: boolean;
+  maxCredit: number;
+  addresse: string | null;
+  phone: string;
+};
+
+export type RequestDetailProductType = {
+  id: string;
+  createdAt: string;
+  deletedAt: string | null;
+  category: string;
+  title: string;
+  desc: string;
+  quantities: number[];
+  linkUrl: string | null;
+  isActive: boolean;
+  images: string[];
+  order: number;
+};
+
+export type RequestDetailItemType = {
+  id: string;
+  createdAt: string;
+  deletedAt: string | null;
+  product: RequestDetailProductType;
+  attributes: RequestItemAttributeType[];
+  request: string;
+  quantity: number;
+  description: string;
+  attachments: string[] | unknown[];
+};
+
+export type RequestDetailType = {
+  id: string;
+  createdAt: string;
+  deletedAt: string | null;
+  user: RequestDetailUserType;
+  requestNumber: number;
+  status: RequestStatus;
+  items: RequestDetailItemType[];
+};
+
+export type RequestDetailResponseType = BaseResponse<RequestDetailType>;
diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx
index 26b57cb..1e55d6b 100644
--- a/src/router/MainRouter.tsx
+++ b/src/router/MainRouter.tsx
@@ -44,6 +44,7 @@ import UsersList from "@/pages/user/List";
 import AdminList from "@/pages/admin/List";
 import CreateAdmin from "@/pages/admin/Create";
 import EditAdmin from "@/pages/admin/Update";
+import RequestDetail from "@/pages/requests/Detail";
 
 const MainRouter: FC = () => {
     return (
@@ -61,7 +62,7 @@ const MainRouter: FC = () => {
                             <Route path={Paths.perfomaInvoice.list} element={<ProformaInvoice />} />
                             <Route path={Paths.perfomaInvoice.detail + ":id"} element={<DetailPerfomaInvoice />} />
                             <Route path={Paths.requests.list} element={<RequestList />} />
-
+                            <Route path={Paths.requests.detail + ":id"} element={<RequestDetail />} />
                             <Route path={Paths.product.list} element={<ProductList />} />
                             <Route path={Paths.product.create} element={<CreateProduct />} />
                             <Route path={Paths.product.update + ":id"} element={<UpdateProduct />} />