api ulandi

src/features/specification/ui/HistoryListPage.tsx

@@ -1,16 +1,48 @@
 "use client";
 
+import { order_api } from "@/features/specification/lib/api";
 import { formatPrice } from "@/shared/lib/formatPrice";
 import AddedButton from "@/shared/ui/added-button";
 import { Button } from "@/shared/ui/button";
 import { DashboardLayout } from "@/widgets/dashboard-layout/ui";
+import { useQuery } from "@tanstack/react-query";
 import { Eye } from "lucide-react";
 import { useNavigate } from "react-router-dom";
-import { SAMPLE_HISTORY } from "../lib/mock";
 
 export function HistoryListPage() {
   const router = useNavigate();
 
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["order_list"],
+    queryFn: () => order_api.order_list(),
+    select(data) {
+      return data.data.data;
+    },
+  });
+
+  if (isLoading) {
+    return (
+      <DashboardLayout>
+        <div className="min-h-screen flex justify-center items-center">
+          <p className="text-gray-500 text-lg">Yuklanmoqda...</p>
+        </div>
+      </DashboardLayout>
+    );
+  }
+
+  if (isError) {
+    return (
+      <DashboardLayout>
+        <div className="min-h-screen flex flex-col justify-center items-center">
+          <p className="text-red-600 text-lg mb-2">Xatolik yuz berdi</p>
+          <Button onClick={() => window.location.reload()}>
+            Qayta yuklash
+          </Button>
+        </div>
+      </DashboardLayout>
+    );
+  }
+
   return (
     <DashboardLayout>
       <div className="min-h-screen bg-gray-50">
@@ -29,8 +61,8 @@ export function HistoryListPage() {
           </div>
 
           <div className="space-y-4">
-            {SAMPLE_HISTORY.length > 0 ? (
-              SAMPLE_HISTORY.map((item) => (
+            {data && data.length > 0 ? (
+              data.map((item) => (
                 <div
                   key={item.id}
                   className="bg-white border rounded-xl p-5 shadow-sm hover:shadow-md transition"
@@ -40,27 +72,24 @@ export function HistoryListPage() {
                       <p className="text-lg font-semibold text-gray-900">
                         Buyurtma №{item.id}
                       </p>
-                      <p className="text-sm text-gray-500 mt-1">
-                        Sana: {item.date}
-                      </p>
                     </div>
                   </div>
 
                   <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
                     <div>
                       <p className="text-gray-500 text-sm">Mijoz</p>
-                      <p className="font-medium">{item.buyerName}</p>
+                      <p className="font-medium">{item.employee_name}</p>
                     </div>
 
                     <div>
                       <p className="text-gray-500 text-sm">Farmasevtika</p>
-                      <p className="font-medium">{item.pharmacy}</p>
+                      <p className="font-medium">{item.factory.name}</p>
                     </div>
 
                     <div>
                       <p className="text-gray-500 text-sm">Hisoblangan narxi</p>
                       <p className="font-medium">
-                        {formatPrice(item.totalAmount)}
+                        {formatPrice(item.total_price)}
                       </p>
                     </div>
 
@@ -68,7 +97,7 @@ export function HistoryListPage() {
                       <p className="text-gray-500 text-sm">
                         {"To'langan foizi"}
                       </p>
-                      <p className="font-medium">{item.paymentPercentage}%</p>
+                      <p className="font-medium">{item.advance}%</p>
                     </div>
 
                     <div>
@@ -76,7 +105,7 @@ export function HistoryListPage() {
                         {"To'langan narxi"}
                       </p>
                       <p className="font-medium">
-                        {formatPrice(item.paymentAmount)}
+                        {formatPrice(item.paid_price)}
                       </p>
                     </div>
                   </div>