124 lines
4.0 KiB
TypeScript
124 lines
4.0 KiB
TypeScript
"use client";
|
||
|
||
import formatPhone from "@/shared/lib/formatPhone";
|
||
import AddedButton from "@/shared/ui/added-button";
|
||
import { Button } from "@/shared/ui/button";
|
||
import { DashboardLayout } from "@/widgets/dashboard-layout/ui/DashboardLayout";
|
||
import { useQuery } from "@tanstack/react-query";
|
||
import { Eye } from "lucide-react";
|
||
import { useState } from "react";
|
||
import { useNavigate } from "react-router-dom";
|
||
import { pharmacy_api } from "../lib/api";
|
||
|
||
const PharmacyList = () => {
|
||
const { data, isLoading, isError } = useQuery({
|
||
queryKey: ["pharmacy_list"],
|
||
queryFn: () => pharmacy_api.list(),
|
||
select(data) {
|
||
return data.data.data;
|
||
},
|
||
});
|
||
|
||
const router = useNavigate();
|
||
const [deleteDialog, setDeleteDialog] = useState(false);
|
||
|
||
return (
|
||
<DashboardLayout link="/">
|
||
<div className="flex justify-between items-center">
|
||
<AddedButton onClick={() => router("/pharmacy/added")} />
|
||
</div>
|
||
|
||
<div className="space-y-6">
|
||
<h1 className="text-3xl font-bold">Dorixonalar ro‘yxati</h1>
|
||
|
||
{isLoading && (
|
||
<div className="flex justify-center items-center py-20">
|
||
<p className="text-gray-500 animate-pulse">Yuklanmoqda...</p>
|
||
</div>
|
||
)}
|
||
|
||
{isError && (
|
||
<div className="flex justify-center items-center py-20">
|
||
<p className="text-red-500">
|
||
Ma’lumotlarni yuklashda xatolik yuz berdi
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{!isLoading && !isError && data?.length === 0 && (
|
||
<div className="h-[80vh] flex justify-center items-center w-[90%] fixed">
|
||
<p>Dorixona mavjud emas</p>
|
||
</div>
|
||
)}
|
||
|
||
{!isLoading && !isError && data && data.length > 0 && (
|
||
<div className="grid grid-cols-1 gap-6">
|
||
{data.map((obj) => (
|
||
<div
|
||
key={obj.id}
|
||
className="border rounded-lg p-5 shadow-sm flex flex-col justify-between"
|
||
>
|
||
<div>
|
||
<h2 className="text-xl font-semibold">{obj.name}</h2>
|
||
<p className="text-gray-500">Tuman: {obj.district.name}</p>
|
||
<p className="text-gray-500">INN: {obj.inn}</p>
|
||
<p className="text-gray-500">
|
||
Direktor: {formatPhone(obj.owner_phone)}
|
||
</p>
|
||
<p className="text-gray-500">
|
||
Mas’ul: {formatPhone(obj.responsible_phone)}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="flex gap-2 mt-4 flex-col">
|
||
<Button
|
||
variant="outline"
|
||
size="lg"
|
||
onClick={() =>
|
||
router(
|
||
`/object/location?id=${obj.id}&lat=${obj.latitude}&lon=${obj.longitude}`,
|
||
)
|
||
}
|
||
>
|
||
<Eye className="size-4" />
|
||
<p className="text-md">Ko‘rish</p>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Delete dialog */}
|
||
<div>
|
||
{deleteDialog && (
|
||
<div className="fixed inset-0 bg-black/30 bg-opacity-30 flex items-center justify-center z-50">
|
||
<div className="bg-white p-6 rounded-lg w-80">
|
||
<h2 className="text-lg font-bold mb-4">O‘chirish</h2>
|
||
<p>
|
||
Siz haqiqatdan ham <strong>{}</strong> obyektni
|
||
o‘chirmoqchimisiz?
|
||
</p>
|
||
<div className="flex justify-end gap-2 mt-6">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => setDeleteDialog(false)}
|
||
>
|
||
Bekor qilish
|
||
</Button>
|
||
<Button variant="destructive" size="sm">
|
||
O‘chirish
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</DashboardLayout>
|
||
);
|
||
};
|
||
|
||
export default PharmacyList;
|