react

src/features/phamarcy/ui/PharmacyList.tsx

@@ -0,0 +1,123 @@
+"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>
+      <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="flex justify-center items-center py-20">
+            <p className="text-gray-500">Hech qanday dorixona topilmadi</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;