doctor list

src/features/doctors/lib/api.ts

@@ -0,0 +1,20 @@
+import type { DoctorListRes } from "@/features/doctors/lib/data";
+import httpClient from "@/shared/config/api/httpClient";
+import { DOCTOR } from "@/shared/config/api/URLs";
+import type { AxiosResponse } from "axios";
+
+export const doctor_api = {
+  async list(params: {
+    limit?: number;
+    offset?: number;
+    full_name?: string;
+    district_name?: string;
+    place_name?: string;
+    work_place?: string;
+    sphere?: string;
+    user?: string;
+  }): Promise<AxiosResponse<DoctorListRes>> {
+    const res = await httpClient.get(`${DOCTOR}list/`, { params });
+    return res;
+  },
+};

src/features/doctors/lib/data.ts

@@ -50,3 +50,45 @@ export const doctorListData: DoctorListType[] = [
     long: ObjectListData[1].long,
   },
 ];
+
+export interface DoctorListRes {
+  status_code: number;
+  status: string;
+  message: string;
+  data: {
+    count: number;
+    next: string;
+    previous: string;
+    results: DoctorListResData[];
+  };
+}
+
+export interface DoctorListResData {
+  id: number;
+  first_name: string;
+  last_name: string;
+  phone_number: string;
+  work_place: string;
+  sphere: string;
+  description: string;
+  district: {
+    id: number;
+    name: string;
+  };
+  place: {
+    id: number;
+    name: string;
+  };
+  user: {
+    id: number;
+    first_name: string;
+    last_name: string;
+  };
+  longitude: number;
+  latitude: number;
+  extra_location: {
+    latitude: number;
+    longitude: number;
+  };
+  created_at: string;
+}

src/features/doctors/ui/AddedDoctor.tsx

@@ -32,10 +32,9 @@ import type z from "zod";
 interface Props {
   initialValues: DoctorListType | null;
   setDialogOpen: Dispatch<SetStateAction<boolean>>;
-  setData: Dispatch<SetStateAction<DoctorListType[]>>;
 }
 
-const AddedDoctor = ({ initialValues, setData, setDialogOpen }: Props) => {
+const AddedDoctor = ({ initialValues, setDialogOpen }: Props) => {
   const [load, setLoad] = useState<boolean>(false);
   const form = useForm<z.infer<typeof DoctorForm>>({
     resolver: zodResolver(DoctorForm),
@@ -65,34 +64,8 @@ const AddedDoctor = ({ initialValues, setData, setDialogOpen }: Props) => {
 
   function onSubmit(values: z.infer<typeof DoctorForm>) {
     setLoad(true);
-    const newObject: DoctorListType = {
-      id: initialValues ? initialValues.id : Date.now(),
-      user: FakeUserList.find((u) => u.id === Number(values.user))!,
-      district: fakeDistrict.find((d) => d.id === Number(values.district))!,
-      desc: values.desc,
-      first_name: values.first_name,
-      last_name: values.last_name,
-      lat: values.lat,
-      long: values.long,
-      object: ObjectListData.find((d) => d.id === Number(values.object))!,
-      phone_number: values.phone_number,
-      spec: values.spec,
-      work: values.work,
-    };
-
-    setTimeout(() => {
-      setData((prev) => {
-        if (initialValues) {
-          return prev.map((item) =>
-            item.id === initialValues.id ? newObject : item,
-          );
-        } else {
-          return [...prev, newObject];
-        }
-      });
-      setLoad(false);
-      setDialogOpen(false);
-    }, 2000);
+    console.log(values);
+    setDialogOpen(false);
   }
 
   return (

src/features/doctors/ui/DoctorDetailDialog.tsx

@@ -1,4 +1,4 @@
-import type { DoctorListType } from "@/features/doctors/lib/data";
+import type { DoctorListResData } from "@/features/doctors/lib/data";
 import formatPhone from "@/shared/lib/formatPhone";
 import { Button } from "@/shared/ui/button";
 import {
@@ -8,15 +8,88 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@/shared/ui/dialog";
-import { Circle, Map, Placemark, YMaps } from "@pbe/react-yandex-maps";
+import {
+  Circle,
+  Map,
+  Placemark,
+  Polygon,
+  YMaps,
+  ZoomControl,
+} from "@pbe/react-yandex-maps";
+import { useEffect, useState } from "react";
+
+interface CoordsData {
+  lat: number;
+  lon: number;
+  polygon: [number, number][][];
+}
 
 interface Props {
   detail: boolean;
   setDetail: (open: boolean) => void;
-  object: DoctorListType | null;
+  object: DoctorListResData | null;
 }
 
 const DoctorDetailDialog = ({ detail, setDetail, object }: Props) => {
+  const [coords, setCoords] = useState<[number, number]>([
+    41.311081, 69.240562,
+  ]);
+
+  const [polygonCoords, setPolygonCoords] = useState<[number, number][][]>([]);
+
+  const [circleCoords] = useState<[number, number] | null>(null);
+
+  const getCoords = async (name: string): Promise<CoordsData | null> => {
+    try {
+      const res = await fetch(
+        `https://nominatim.openstreetmap.org/search?q=${encodeURIComponent(
+          name,
+        )}&format=json&polygon_geojson=1&limit=1`,
+      );
+      const data = await res.json();
+
+      if (!data.length || !data[0].geojson) return null;
+
+      const lat = parseFloat(data[0].lat);
+      const lon = parseFloat(data[0].lon);
+
+      let polygon: [number, number][][] = [];
+
+      if (data[0].geojson.type === "Polygon") {
+        polygon = data[0].geojson.coordinates.map((ring: []) =>
+          ring.map((c) => [c[1], c[0]]),
+        );
+      }
+
+      if (data[0].geojson.type === "MultiPolygon") {
+        polygon = data[0].geojson.coordinates[0].map((ring: []) =>
+          ring.map((c) => [c[1], c[0]]),
+        );
+      }
+
+      return { lat, lon, polygon };
+    } catch {
+      return null;
+    }
+  };
+
+  useEffect(() => {
+    if (!object) return;
+
+    const load = async () => {
+      const district = await getCoords(object.district.name);
+
+      if (district) {
+        setPolygonCoords(district.polygon);
+      }
+
+      setCoords([object.latitude, object.longitude]);
+      // setCircleCoords([object.latitude, object.longitude]);
+    };
+
+    load();
+  }, [object]);
+
   if (!object) return null;
 
   return (
@@ -28,61 +101,77 @@ const DoctorDetailDialog = ({ detail, setDetail, object }: Props) => {
 
         <div className="space-y-3 mt-2">
           <p>
-            <span className="font-semibold">Ism Familiya:</span>{" "}
-            {object.first_name} {object.last_name}
+            <span className="font-semibold">Ism:</span> {object.first_name}{" "}
+            {object.last_name}
           </p>
           <p>
             <span className="font-semibold">Telefon:</span>{" "}
             {formatPhone(object.phone_number)}
           </p>
           <p>
-            <span className="font-semibold">Ish joyi:</span> {object.work}
+            <span className="font-semibold">Ish joyi:</span> {object.work_place}
           </p>
           <p>
-            <span className="font-semibold">Mutaxassislik:</span> {object.spec}
-          </p>
-          <p>
-            <span className="font-semibold">Tavsif:</span> {object.desc}
+            <span className="font-semibold">Mutaxassislik:</span>{" "}
+            {object.sphere}
           </p>
           <p>
             <span className="font-semibold">Tuman:</span> {object.district.name}
           </p>
           <p>
-            <span className="font-semibold">Foydalanuvchi:</span>{" "}
-            {object.user.firstName} {object.user.lastName}
+            <span className="font-semibold">Manzili:</span>
           </p>
-          <p>
-            <span className="font-semibold">Obyekt:</span> {object.object.name}
-          </p>
-          <span className="font-semibold">Manzili:</span>
+
+          {/* 🗺 MAP */}
           <div className="h-[300px] w-full border rounded-lg overflow-hidden">
-            <YMaps>
+            <YMaps query={{ lang: "en_RU" }}>
               <Map
-                defaultState={{
-                  center: [Number(object.lat), Number(object.long)],
-                  zoom: 16,
+                state={{
+                  center: coords,
+                  zoom: 12,
                 }}
                 width="100%"
-                height="300px"
+                height="100%"
               >
-                <Placemark
-                  geometry={[Number(object.lat), Number(object.long)]}
-                />
-                <Circle
-                  geometry={[[Number(object.lat), Number(object.long)], 100]}
+                <ZoomControl
                   options={{
-                    fillColor: "rgba(0, 150, 255, 0.2)",
-                    strokeColor: "rgba(0, 150, 255, 0.8)",
-                    strokeWidth: 2,
+                    position: { right: "10px", bottom: "70px" },
                   }}
                 />
+
+                {/* Ish joyining markazi */}
+                <Placemark geometry={coords} />
+
+                {/* Tuman polygon */}
+                {polygonCoords.length > 0 && (
+                  <Polygon
+                    geometry={polygonCoords}
+                    options={{
+                      fillColor: "rgba(0, 150, 255, 0.2)",
+                      strokeColor: "rgba(0, 150, 255, 0.8)",
+                      strokeWidth: 2,
+                    }}
+                  />
+                )}
+
+                {/* Radius circle (ish joyi atrofida) */}
+                {circleCoords && (
+                  <Circle
+                    geometry={[circleCoords, 500]}
+                    options={{
+                      fillColor: "rgba(255, 100, 0, 0.3)",
+                      strokeColor: "rgba(255, 100, 0, 0.8)",
+                      strokeWidth: 2,
+                    }}
+                  />
+                )}
               </Map>
             </YMaps>
           </div>
         </div>
 
         <DialogClose asChild>
-          <Button className="mt-4 w-full bg-blue-600 cursor-pointer hover:bg-blue-600">
+          <Button className="mt-4 w-full bg-blue-600 hover:bg-blue-600">
             Yopish
           </Button>
         </DialogClose>

src/features/doctors/ui/DoctorsList.tsx

@@ -1,49 +1,22 @@
+import { doctor_api } from "@/features/doctors/lib/api";
 import {
-  doctorListData,
+  type DoctorListResData,
   type DoctorListType,
 } from "@/features/doctors/lib/data";
-import AddedDoctor from "@/features/doctors/ui/AddedDoctor";
 import DoctorDetailDialog from "@/features/doctors/ui/DoctorDetailDialog";
-import formatPhone from "@/shared/lib/formatPhone";
-import { Badge } from "@/shared/ui/badge";
-import { Button } from "@/shared/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/shared/ui/dialog";
-import { Input } from "@/shared/ui/input";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/shared/ui/table";
-import clsx from "clsx";
-import {
-  ChevronLeft,
-  ChevronRight,
-  Eye,
-  Pencil,
-  Plus,
-  Trash2,
-} from "lucide-react";
-import { useMemo, useState } from "react";
+import FilterDoctor from "@/features/doctors/ui/FilterDoctor";
+import PaginationDoctor from "@/features/doctors/ui/PaginationDoctor";
+import TableDoctor from "@/features/doctors/ui/TableDoctor";
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
 
 const DoctorsList = () => {
-  const [data, setData] = useState<DoctorListType[]>(doctorListData);
-  const [detail, setDetail] = useState<DoctorListType | null>(null);
+  const [detail, setDetail] = useState<DoctorListResData | null>(null);
   const [detailDialog, setDetailDialog] = useState<boolean>(false);
   const [editingPlan, setEditingPlan] = useState<DoctorListType | null>(null);
   const [dialogOpen, setDialogOpen] = useState<boolean>(false);
   const [currentPage, setCurrentPage] = useState(1);
-  const totalPages = 5;
 
-  // Filter states
   const [searchName, setSearchName] = useState("");
   const [searchDistrict, setSearchDistrict] = useState("");
   const [searchObject, setSearchObject] = useState("");
@@ -51,50 +24,44 @@ const DoctorsList = () => {
   const [searchSpec, setSearchSpec] = useState("");
   const [searchUser, setSearchUser] = useState("");
 
-  const handleDelete = (id: number) => {
-    setData((prev) => prev.filter((e) => e.id !== id));
-  };
+  const limit = 20;
 
-  // Filtered data
-  const filteredData = useMemo(() => {
-    return data.filter((item) => {
-      const nameMatch = `${item.first_name} ${item.last_name}`
-        .toLowerCase()
-        .includes(searchName.toLowerCase());
-      const districtMatch = item.district.name
-        .toLowerCase()
-        .includes(searchDistrict.toLowerCase());
-      const objectMatch = item.object.name
-        .toLowerCase()
-        .includes(searchObject.toLowerCase());
-      const workMatch = item.work
-        .toLowerCase()
-        .includes(searchWork.toLowerCase());
-      const specMatch = item.spec
-        .toLowerCase()
-        .includes(searchSpec.toLowerCase());
-      const userMatch = `${item.user.firstName} ${item.user.lastName}`
-        .toLowerCase()
-        .includes(searchUser.toLowerCase());
+  const {
+    data: doctor,
+    isError,
+    isLoading,
+    isFetching,
+  } = useQuery({
+    queryKey: [
+      "doctor_list",
+      currentPage,
+      searchDistrict,
+      searchName,
+      searchObject,
+      searchWork,
+      searchSpec,
+      searchUser,
+    ],
+    queryFn: () =>
+      doctor_api.list({
+        limit,
+        offset: (currentPage - 1) * limit,
+        district_name: searchDistrict,
+        full_name: searchName,
+        place_name: searchObject,
+        work_place: searchWork,
+        sphere: searchSpec,
+        user: searchUser,
+      }),
+    select(data) {
+      return data.data.data;
+    },
+  });
 
-      return (
-        nameMatch &&
-        districtMatch &&
-        objectMatch &&
-        workMatch &&
-        specMatch &&
-        userMatch
-      );
-    });
-  }, [
-    data,
-    searchName,
-    searchDistrict,
-    searchObject,
-    searchWork,
-    searchSpec,
-    searchUser,
-  ]);
+  // const handleDelete = (id: number) => {
+  // };
+
+  const totalPages = doctor ? Math.ceil(doctor.count / limit) : 1;
 
   return (
     <div className="flex flex-col h-full p-10 w-full">
@@ -103,69 +70,25 @@ const DoctorsList = () => {
         <div className="flex flex-col gap-4 w-full">
           <h1 className="text-2xl font-bold">Shifokorlarni boshqarish</h1>
 
-          <div className="flex justify-end gap-2 w-full">
-            <Input
-              placeholder="Shifokor Ism Familiyasi"
-              value={searchName}
-              onChange={(e) => setSearchName(e.target.value)}
-              className="w-full md:w-48"
-            />
-            <Input
-              placeholder="Tuman"
-              value={searchDistrict}
-              onChange={(e) => setSearchDistrict(e.target.value)}
-              className="w-full md:w-48"
-            />
-            <Input
-              placeholder="Obyekt"
-              value={searchObject}
-              onChange={(e) => setSearchObject(e.target.value)}
-              className="w-full md:w-48"
-            />
-            <Input
-              placeholder="Ish joyi"
-              value={searchWork}
-              onChange={(e) => setSearchWork(e.target.value)}
-              className="w-full md:w-48"
-            />
-            <Input
-              placeholder="Sohasi"
-              value={searchSpec}
-              onChange={(e) => setSearchSpec(e.target.value)}
-              className="w-full md:w-48"
-            />
-            <Input
-              placeholder="Kim qo'shgan"
-              value={searchUser}
-              onChange={(e) => setSearchUser(e.target.value)}
-              className="w-full md:w-48"
-            />
-            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-              <DialogTrigger asChild>
-                <Button
-                  variant="default"
-                  className="bg-blue-500 cursor-pointer hover:bg-blue-500"
-                  onClick={() => setEditingPlan(null)}
-                >
-                  <Plus className="!h-5 !w-5" /> Qo'shish
-                </Button>
-              </DialogTrigger>
-              <DialogContent className="sm:max-w-lg max-h-[80vh] overflow-x-hidden">
-                <DialogHeader>
-                  <DialogTitle className="text-xl">
-                    {editingPlan
-                      ? "Shifokor tahrirlash"
-                      : "Yangi shifokor qo'shish"}
-                  </DialogTitle>
-                </DialogHeader>
-                <AddedDoctor
-                  initialValues={editingPlan}
-                  setDialogOpen={setDialogOpen}
-                  setData={setData}
-                />
-              </DialogContent>
-            </Dialog>
-          </div>
+          <FilterDoctor
+            dialogOpen={dialogOpen}
+            editingPlan={editingPlan}
+            searchDistrict={searchDistrict}
+            searchName={searchName}
+            searchObject={searchObject}
+            searchSpec={searchSpec}
+            searchUser={searchUser}
+            searchWork={searchWork}
+            // setData={setData}
+            setDialogOpen={setDialogOpen}
+            setEditingPlan={setEditingPlan}
+            setSearchDistrict={setSearchDistrict}
+            setSearchName={setSearchName}
+            setSearchObject={setSearchObject}
+            setSearchSpec={setSearchSpec}
+            setSearchUser={setSearchUser}
+            setSearchWork={setSearchWork}
+          />
         </div>
 
         <DoctorDetailDialog
@@ -175,116 +98,20 @@ const DoctorsList = () => {
         />
       </div>
 
-      <div className="flex-1 overflow-auto">
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>#</TableHead>
-              <TableHead>Shifokor Ism Familiyasi</TableHead>
-              <TableHead>Telefon raqami</TableHead>
-              <TableHead>Tuman</TableHead>
-              <TableHead>Obyekt</TableHead>
-              <TableHead>Ish joyi</TableHead>
-              <TableHead>Sohasi</TableHead>
-              <TableHead>Kim qo'shgan</TableHead>
-              <TableHead className="text-right">Amallar</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {filteredData.map((item, index) => (
-              <TableRow key={item.id}>
-                <TableCell>{index + 1}</TableCell>
-                <TableCell className="font-medium">
-                  {item.first_name} {item.last_name}
-                </TableCell>
-                <TableCell className="font-medium">
-                  {formatPhone(item.phone_number)}
-                </TableCell>
-                <TableCell>
-                  <Badge variant="outline">{item.district.name}</Badge>
-                </TableCell>
-                <TableCell>{item.object.name}</TableCell>
-                <TableCell>{item.work}</TableCell>
-                <TableCell>{item.spec}</TableCell>
-                <TableCell>
-                  {item.user.firstName} {item.user.lastName}
-                </TableCell>
-                <TableCell className="text-right flex gap-2 justify-end">
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    onClick={() => {
-                      setDetail(item);
-                      setDetailDialog(true);
-                    }}
-                    className="bg-green-600 text-white cursor-pointer hover:bg-green-600 hover:text-white"
-                  >
-                    <Eye size={18} />
-                  </Button>
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    className="bg-blue-600 text-white cursor-pointer hover:bg-blue-600 hover:text-white"
-                    onClick={() => {
-                      setEditingPlan(item);
-                      setDialogOpen(true);
-                    }}
-                  >
-                    <Pencil size={18} />
-                  </Button>
-                  <Button
-                    variant="destructive"
-                    size="icon"
-                    className="cursor-pointer"
-                    onClick={() => handleDelete(item.id)}
-                  >
-                    <Trash2 size={18} />
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </div>
+      <TableDoctor
+        isError={isError}
+        isLoading={isLoading}
+        doctor={doctor ? doctor.results : []}
+        setDetail={setDetail}
+        isFetching={isFetching}
+        setDetailDialog={setDetailDialog}
+      />
 
-      <div className="mt-2 sticky bottom-0 bg-white flex justify-end gap-2 z-10 py-2 border-t">
-        <Button
-          variant="outline"
-          size="icon"
-          disabled={currentPage === 1}
-          className="cursor-pointer"
-          onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
-        >
-          <ChevronLeft />
-        </Button>
-        {Array.from({ length: totalPages }, (_, i) => (
-          <Button
-            key={i}
-            variant={currentPage === i + 1 ? "default" : "outline"}
-            size="icon"
-            className={clsx(
-              currentPage === i + 1
-                ? "bg-blue-500 hover:bg-blue-500"
-                : " bg-none hover:bg-blue-200",
-              "cursor-pointer",
-            )}
-            onClick={() => setCurrentPage(i + 1)}
-          >
-            {i + 1}
-          </Button>
-        ))}
-        <Button
-          variant="outline"
-          size="icon"
-          disabled={currentPage === totalPages}
-          onClick={() =>
-            setCurrentPage((prev) => Math.min(prev + 1, totalPages))
-          }
-          className="cursor-pointer"
-        >
-          <ChevronRight />
-        </Button>
-      </div>
+      <PaginationDoctor
+        currentPage={currentPage}
+        setCurrentPage={setCurrentPage}
+        totalPages={totalPages}
+      />
     </div>
   );
 };

src/features/doctors/ui/FilterDoctor.tsx

@@ -0,0 +1,116 @@
+import type { DoctorListType } from "@/features/doctors/lib/data";
+import AddedDoctor from "@/features/doctors/ui/AddedDoctor";
+import { Button } from "@/shared/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/ui/dialog";
+import { Input } from "@/shared/ui/input";
+import { Plus } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+
+interface Props {
+  searchName: string;
+  setSearchName: Dispatch<SetStateAction<string>>;
+  searchDistrict: string;
+  setSearchDistrict: Dispatch<SetStateAction<string>>;
+  searchWork: string;
+  setSearchWork: Dispatch<SetStateAction<string>>;
+  searchSpec: string;
+  setSearchSpec: Dispatch<SetStateAction<string>>;
+  searchUser: string;
+  setSearchUser: Dispatch<SetStateAction<string>>;
+  dialogOpen: boolean;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  searchObject: string;
+  setSearchObject: Dispatch<SetStateAction<string>>;
+  setEditingPlan: Dispatch<SetStateAction<DoctorListType | null>>;
+  editingPlan: DoctorListType | null;
+}
+
+const FilterDoctor = ({
+  searchName,
+  setSearchName,
+  searchDistrict,
+  setSearchDistrict,
+  searchObject,
+  setSearchObject,
+  searchWork,
+  setSearchWork,
+  searchSpec,
+  setSearchSpec,
+  searchUser,
+  setSearchUser,
+  dialogOpen,
+  setDialogOpen,
+  setEditingPlan,
+  editingPlan,
+}: Props) => {
+  return (
+    <div className="flex justify-end gap-2 w-full">
+      <Input
+        placeholder="Shifokor Ism Familiyasi"
+        value={searchName}
+        onChange={(e) => setSearchName(e.target.value)}
+        className="w-full md:w-48"
+      />
+      <Input
+        placeholder="Tuman"
+        value={searchDistrict}
+        onChange={(e) => setSearchDistrict(e.target.value)}
+        className="w-full md:w-48"
+      />
+      <Input
+        placeholder="Obyekt"
+        value={searchObject}
+        onChange={(e) => setSearchObject(e.target.value)}
+        className="w-full md:w-48"
+      />
+      <Input
+        placeholder="Ish joyi"
+        value={searchWork}
+        onChange={(e) => setSearchWork(e.target.value)}
+        className="w-full md:w-48"
+      />
+      <Input
+        placeholder="Sohasi"
+        value={searchSpec}
+        onChange={(e) => setSearchSpec(e.target.value)}
+        className="w-full md:w-48"
+      />
+      <Input
+        placeholder="Kim qo'shgan"
+        value={searchUser}
+        onChange={(e) => setSearchUser(e.target.value)}
+        className="w-full md:w-48"
+      />
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogTrigger asChild>
+          <Button
+            variant="default"
+            className="bg-blue-500 cursor-pointer hover:bg-blue-500"
+            onClick={() => setEditingPlan(null)}
+          >
+            <Plus className="!h-5 !w-5" /> Qo'shish
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-lg max-h-[80vh] overflow-x-hidden">
+          <DialogHeader>
+            <DialogTitle className="text-xl">
+              {editingPlan ? "Shifokor tahrirlash" : "Yangi shifokor qo'shish"}
+            </DialogTitle>
+          </DialogHeader>
+          <AddedDoctor
+            initialValues={editingPlan}
+            setDialogOpen={setDialogOpen}
+          />
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default FilterDoctor;

src/features/doctors/ui/PaginationDoctor.tsx

@@ -0,0 +1,57 @@
+import { Button } from "@/shared/ui/button";
+import clsx from "clsx";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+
+interface Props {
+  currentPage: number;
+  setCurrentPage: Dispatch<SetStateAction<number>>;
+  totalPages: number;
+}
+
+const PaginationDoctor = ({
+  currentPage,
+  setCurrentPage,
+  totalPages,
+}: Props) => {
+  return (
+    <div className="mt-2 sticky bottom-0 bg-white flex justify-end gap-2 z-10 py-2 border-t">
+      <Button
+        variant="outline"
+        size="icon"
+        disabled={currentPage === 1}
+        className="cursor-pointer"
+        onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
+      >
+        <ChevronLeft />
+      </Button>
+      {Array.from({ length: totalPages }, (_, i) => (
+        <Button
+          key={i}
+          variant={currentPage === i + 1 ? "default" : "outline"}
+          size="icon"
+          className={clsx(
+            currentPage === i + 1
+              ? "bg-blue-500 hover:bg-blue-500"
+              : " bg-none hover:bg-blue-200",
+            "cursor-pointer",
+          )}
+          onClick={() => setCurrentPage(i + 1)}
+        >
+          {i + 1}
+        </Button>
+      ))}
+      <Button
+        variant="outline"
+        size="icon"
+        disabled={currentPage === totalPages}
+        onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
+        className="cursor-pointer"
+      >
+        <ChevronRight />
+      </Button>
+    </div>
+  );
+};
+
+export default PaginationDoctor;

src/features/doctors/ui/TableDoctor.tsx

@@ -0,0 +1,134 @@
+import type { DoctorListResData } from "@/features/doctors/lib/data";
+import formatPhone from "@/shared/lib/formatPhone";
+import { Badge } from "@/shared/ui/badge";
+import { Button } from "@/shared/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/ui/table";
+import { Eye, Loader2, Pencil, Trash2 } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+
+interface Props {
+  setDetail: Dispatch<SetStateAction<DoctorListResData | null>>;
+  setDetailDialog: Dispatch<SetStateAction<boolean>>;
+  doctor: DoctorListResData[] | [];
+  isLoading: boolean;
+  isError: boolean;
+  isFetching: boolean;
+}
+
+const TableDoctor = ({
+  doctor,
+  setDetail,
+  setDetailDialog,
+  isError,
+  isLoading,
+  isFetching,
+}: Props) => {
+  return (
+    <div className="flex-1 overflow-auto">
+      {(isLoading || isFetching) && (
+        <div className="h-full flex items-center justify-center bg-white/70 z-10">
+          <span className="text-lg font-medium">
+            <Loader2 className="animate-spin" />
+          </span>
+        </div>
+      )}
+
+      {isError && (
+        <div className="h-full flex items-center justify-center z-10">
+          <span className="text-lg font-medium text-red-600">
+            Ma'lumotlarni olishda xatolik yuz berdi.
+          </span>
+        </div>
+      )}
+
+      {!isLoading && !isError && (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>#</TableHead>
+              <TableHead>Shifokor Ism Familiyasi</TableHead>
+              <TableHead>Telefon raqami</TableHead>
+              <TableHead>Tuman</TableHead>
+              <TableHead>Obyekt</TableHead>
+              <TableHead>Ish joyi</TableHead>
+              <TableHead>Sohasi</TableHead>
+              <TableHead>Kim qo'shgan</TableHead>
+              <TableHead className="text-right">Amallar</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {doctor.length > 0 ? (
+              doctor.map((item, index) => (
+                <TableRow key={item.id}>
+                  <TableCell>{index + 1}</TableCell>
+                  <TableCell className="font-medium">
+                    {item.first_name} {item.last_name}
+                  </TableCell>
+                  <TableCell className="font-medium">
+                    {formatPhone(item.phone_number)}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{item.district.name}</Badge>
+                  </TableCell>
+                  <TableCell>{item.place.name}</TableCell>
+                  <TableCell>{item.work_place}</TableCell>
+                  <TableCell>{item.sphere}</TableCell>
+                  <TableCell>
+                    {item.user.first_name} {item.user.last_name}
+                  </TableCell>
+                  <TableCell className="text-right flex gap-2 justify-end">
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={() => {
+                        setDetail(item);
+                        setDetailDialog(true);
+                      }}
+                      className="bg-green-600 text-white cursor-pointer hover:bg-green-600 hover:text-white"
+                    >
+                      <Eye size={18} />
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className="bg-blue-600 text-white cursor-pointer hover:bg-blue-600 hover:text-white"
+                      onClick={() => {
+                        // setEditingPlan(item);
+                        // setDialogOpen(true);
+                      }}
+                    >
+                      <Pencil size={18} />
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="icon"
+                      className="cursor-pointer"
+                      // onClick={() => handleDelete(item.id)}
+                    >
+                      <Trash2 size={18} />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={9} className="text-center py-4 text-lg">
+                  Shifokor topilmadi.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  );
+};
+
+export default TableDoctor;