138 lines
4.5 KiB
TypeScript
138 lines
4.5 KiB
TypeScript
"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";
|
||
|
||
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">
|
||
<div className="max-w-5xl mx-auto">
|
||
<div className="flex justify-between items-center mb-6">
|
||
<div>
|
||
<h1 className="text-3xl font-bold text-gray-900">
|
||
Buyurtmalar Tarixi
|
||
</h1>
|
||
<p className="text-gray-600 mt-1">
|
||
{"Barcha buyurtmalar ro'yxati"}
|
||
</p>
|
||
</div>
|
||
|
||
<AddedButton onClick={() => router("/specification/added")} />
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
{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"
|
||
>
|
||
<div className="flex justify-between items-start">
|
||
<div>
|
||
<p className="text-lg font-semibold text-gray-900">
|
||
Buyurtma №{item.id}
|
||
</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.employee_name}</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="text-gray-500 text-sm">Farmasevtika</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.total_price)}
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="text-gray-500 text-sm">
|
||
{"To'langan foizi"}
|
||
</p>
|
||
<p className="font-medium">{item.advance}%</p>
|
||
</div>
|
||
|
||
<div>
|
||
<p className="text-gray-500 text-sm">
|
||
{"To'langan narxi"}
|
||
</p>
|
||
<p className="font-medium">
|
||
{formatPrice(item.paid_price)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* KO‘RISH BUTTON */}
|
||
<div className="flex justify-end mt-4">
|
||
<Button
|
||
onClick={() =>
|
||
router(`/specification/history/${item.id}`)
|
||
}
|
||
className="px-4 py-2 w-full h-12 rounded-lg bg-blue-600 text-white text-sm hover:bg-blue-700 transition"
|
||
>
|
||
<Eye className="size-5" />
|
||
Batafsil
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
<div className="fixed h-[70vh] flex justify-center items-center w-full">
|
||
<p className="text-gray-500">{"Hozircha ma'lumot yo‘q."}</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</DashboardLayout>
|
||
);
|
||
}
|