added pil name

src/features/specifications/ui/SpecificationDetail .tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { pill_api } from "@/features/pill/lib/api";
 import type { OrderListDataRes } from "@/features/specifications/lib/data";
 import formatPrice from "@/shared/lib/formatPrice";
 import { Button } from "@/shared/ui/button";
@@ -9,6 +10,7 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/shared/ui/dialog";
+import { useQuery } from "@tanstack/react-query";
 import { HardDriveDownloadIcon } from "lucide-react";
 import type { Dispatch, SetStateAction } from "react";
 
@@ -23,6 +25,13 @@ export const SpecificationDetail = ({
   open,
   setOpen,
 }: Props) => {
+  const { data } = useQuery({
+    queryKey: ["pill_list"],
+    queryFn: () => pill_api.list({ limit: 999, offset: 1 }),
+    select(data) {
+      return data.data.data;
+    },
+  });
   const downloadFile = async (fileUrl: string, fileName: string) => {
     try {
       const response = await fetch(fileUrl, {
@@ -107,7 +116,11 @@ export const SpecificationDetail = ({
             </h3>
 
             <div className="space-y-3">
-              {specification.order_items.map((med, index) => (
+              {specification.order_items.map((med, index) => {
+                const pill_name = data?.results.find(
+                  (e) => e.id === med.product,
+                );
+                return (
                   <div
                     key={med.id}
                     className="bg-white rounded-lg p-4 border border-gray-200 hover:border-indigo-300 transition-colors"
@@ -119,7 +132,7 @@ export const SpecificationDetail = ({
                             #{index + 1}
                           </span>
                           <p className="font-semibold text-gray-800">
-                          {med.product}
+                            {pill_name?.name}
                           </p>
                         </div>
                         <div className="flex items-center gap-4 text-sm text-gray-600">
@@ -145,7 +158,8 @@ export const SpecificationDetail = ({
                       </div>
                     </div>
                   </div>
-              ))}
+                );
+              })}
             </div>
           </div>