api ulandi

src/features/users/lib/api.ts

@@ -0,0 +1,41 @@
+import type {
+  UserCreateReq,
+  UserListRes,
+  UserUpdateReq,
+} from "@/features/users/lib/data";
+import httpClient from "@/shared/config/api/httpClient";
+import { USER } from "@/shared/config/api/URLs";
+import type { AxiosResponse } from "axios";
+
+export const user_api = {
+  async list(params: {
+    limit?: number;
+    offset?: number;
+    search?: string;
+    is_active?: boolean | string;
+    region_id?: number;
+  }): Promise<AxiosResponse<UserListRes>> {
+    const res = await httpClient.get(`${USER}list/`, { params });
+    return res;
+  },
+
+  async update({ body, id }: { id: number; body: UserUpdateReq }) {
+    const res = await httpClient.patch(`${USER}${id}/update/`, body);
+    return res;
+  },
+
+  async create(body: UserCreateReq) {
+    const res = await httpClient.post(`${USER}create/`, body);
+    return res;
+  },
+
+  async active(id: number) {
+    const res = await httpClient.post(`${USER}${id}/activate/`);
+    return res;
+  },
+
+  async delete({ id }: { id: number }) {
+    const res = await httpClient.delete(`${USER}${id}/delete/`);
+    return res;
+  },
+};

src/features/users/lib/data.ts

@@ -50,3 +50,41 @@ export const FakeUserList: User[] = [
     isActive: true,
   },
 ];
+
+export interface UserListRes {
+  status_code: number;
+  status: string;
+  message: string;
+  data: {
+    count: number;
+    next: string | null;
+    previous: null | string;
+    results: UserListData[];
+  };
+}
+
+export interface UserListData {
+  id: number;
+  first_name: string;
+  last_name: string;
+  region: {
+    id: number;
+    name: string;
+  };
+  is_active: boolean;
+  created_at: string;
+}
+
+export interface UserUpdateReq {
+  first_name: string;
+  last_name: string;
+  region: number;
+  is_active: boolean;
+}
+
+export interface UserCreateReq {
+  first_name: string;
+  last_name: string;
+  region_id: number;
+  is_active: boolean;
+}

src/features/users/ui/AddUsers.tsx

@@ -1,4 +1,9 @@
-import type { User } from "@/features/users/lib/data";
+import { user_api } from "@/features/users/lib/api";
+import type {
+  UserCreateReq,
+  UserListData,
+  UserUpdateReq,
+} from "@/features/users/lib/data";
 import { AddedUser } from "@/features/users/lib/form";
 import { Button } from "@/shared/ui/button";
 import {
@@ -18,60 +23,83 @@ import {
   SelectValue,
 } from "@/shared/ui/select";
 import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
 import { Loader2 } from "lucide-react";
-import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import type z from "zod";
 
 interface UserFormProps {
-  initialData?: User | null;
-  setUsers: React.Dispatch<React.SetStateAction<User[]>>;
+  initialData: UserListData | null;
   setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const AddUsers = ({ initialData, setUsers, setDialogOpen }: UserFormProps) => {
-  const [load, setLoad] = useState(false);
+const AddUsers = ({ initialData, setDialogOpen }: UserFormProps) => {
   const form = useForm<z.infer<typeof AddedUser>>({
     resolver: zodResolver(AddedUser),
     defaultValues: {
-      firstName: initialData?.firstName || "",
-      lastName: initialData?.lastName || "",
-      region: initialData?.region || "",
-      isActive: initialData ? String(initialData.isActive) : "true",
+      firstName: initialData?.first_name || "",
+      lastName: initialData?.last_name || "",
+      region: initialData?.region.name || "",
+      isActive: initialData ? String(initialData.is_active) : "true",
+    },
+  });
+  const queryClient = useQueryClient();
+
+  const { mutate: update, isPending } = useMutation({
+    mutationFn: ({ body, id }: { id: number; body: UserUpdateReq }) =>
+      user_api.update({ body, id }),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["user_list"] });
+      toast.success(`Foydalanuvchi tahrirlandi`);
+      setDialogOpen(false);
+    },
+    onError: (err: AxiosError) => {
+      const errMessage = err.response?.data as { message: string };
+      const messageText = errMessage.message;
+      toast.error(messageText || "Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  const { mutate: create, isPending: createPending } = useMutation({
+    mutationFn: (body: UserCreateReq) => user_api.create(body),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["user_list"] });
+      toast.success(`Foydalanuvchi qo'shildi`);
+      setDialogOpen(false);
+    },
+    onError: (err: AxiosError) => {
+      const errMessage = err.response?.data as { message: string };
+      const messageText = errMessage.message;
+      toast.error(messageText || "Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
     },
   });
 
   function onSubmit(values: z.infer<typeof AddedUser>) {
-    setLoad(true);
     if (initialData) {
-      setTimeout(() => {
-        setUsers((prev) =>
-          prev.map((user) =>
-            user.id === initialData.id
-              ? {
-                  ...user,
-                  ...values,
-                  isActive: values.isActive === "true" ? true : false,
-                }
-              : user,
-          ),
-        );
-        setLoad(false);
-        setDialogOpen(false);
-      }, 2000);
-    } else {
-      setTimeout(() => {
-        setUsers((prev) => [
-          ...prev,
-          {
-            id: prev.length ? prev[prev.length - 1].id + 1 : 1,
-            ...values,
-            isActive: values.isActive === "true" ? true : false,
-          },
-        ]);
-        setLoad(false);
-        setDialogOpen(false);
-      }, 2000);
+      update({
+        body: {
+          first_name: values.firstName,
+          is_active: values.isActive === "true" ? true : false,
+          last_name: values.lastName,
+          region: Number(values.region),
+        },
+        id: initialData.id,
+      });
+    } else if (initialData === null) {
+      create({
+        first_name: values.firstName,
+        is_active: values.isActive === "true" ? true : false,
+        last_name: values.lastName,
+        region_id: Number(values.region),
+      });
     }
   }
 
@@ -126,9 +154,9 @@ const AddUsers = ({ initialData, setUsers, setDialogOpen }: UserFormProps) => {
                     <SelectValue placeholder="Hududni tanlang" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Toshkent">Toshkent</SelectItem>
-                    <SelectItem value="Samarqand">Samarqand</SelectItem>
-                    <SelectItem value="Bekobod">Bekobod</SelectItem>
+                    <SelectItem value="1">Toshkent</SelectItem>
+                    <SelectItem value="2">Samarqand</SelectItem>
+                    <SelectItem value="3">Bekobod</SelectItem>
                   </SelectContent>
                 </Select>
               </FormControl>
@@ -166,7 +194,7 @@ const AddUsers = ({ initialData, setUsers, setDialogOpen }: UserFormProps) => {
           type="submit"
           className="w-full h-12 text-lg rounded-lg bg-blue-600 hover:bg-blue-600 cursor-pointer"
         >
-          {load ? (
+          {isPending || createPending ? (
             <Loader2 className="animate-spin" />
           ) : initialData ? (
             "Saqlash"

src/features/users/ui/DeleteUser.tsx

@@ -0,0 +1,90 @@
+import { user_api } from "@/features/users/lib/api";
+import type { UserListData } from "@/features/users/lib/data";
+import { Button } from "@/shared/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/ui/dialog";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Loader2, Trash, X } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+import { toast } from "sonner";
+
+interface Props {
+  opneDelete: boolean;
+  setOpenDelete: Dispatch<SetStateAction<boolean>>;
+  setUserDelete: Dispatch<SetStateAction<UserListData | null>>;
+  userDelete: UserListData | null;
+}
+
+const DeleteUser = ({
+  opneDelete,
+  setOpenDelete,
+  userDelete,
+  setUserDelete,
+}: Props) => {
+  const queryClient = useQueryClient();
+
+  const { mutate: deleteUser, isPending } = useMutation({
+    mutationFn: ({ id }: { id: number }) => user_api.delete({ id }),
+
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["user_list"] });
+      toast.success(`Foydalanuvchi o'chirildi`);
+      setOpenDelete(false);
+      setUserDelete(null);
+    },
+    onError: (err: AxiosError) => {
+      console.log(err);
+      const errMessage = err.response?.data as { message: string };
+      const messageText = errMessage.message;
+      toast.error(messageText || "Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  return (
+    <Dialog open={opneDelete} onOpenChange={setOpenDelete}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Foydalanuvchini o'chrish</DialogTitle>
+          <DialogDescription className="text-md font-semibold">
+            Siz rostan ham {userDelete?.first_name} {userDelete?.last_name}{" "}
+            nomli foydalanuvchini o'chimoqchimiszi
+          </DialogDescription>
+        </DialogHeader>
+        <DialogFooter>
+          <Button
+            className="bg-blue-600 cursor-pointer hover:bg-blue-600"
+            onClick={() => setOpenDelete(false)}
+          >
+            <X />
+            Bekor qilish
+          </Button>
+          <Button
+            variant={"destructive"}
+            onClick={() => userDelete && deleteUser({ id: userDelete.id })}
+          >
+            {isPending ? (
+              <Loader2 className="animate-spin" />
+            ) : (
+              <>
+                <Trash />
+                O'chirish
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteUser;

src/features/users/ui/Filter.tsx

@@ -0,0 +1,202 @@
+import { region_api } from "@/features/region/lib/api";
+import type { RegionListResData } from "@/features/region/lib/data";
+import type { UserListData } from "@/features/users/lib/data";
+import AddUsers from "@/features/users/ui/AddUsers";
+import { cn } from "@/shared/lib/utils";
+import { Button } from "@/shared/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/shared/ui/command";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/shared/ui/dialog";
+import { Input } from "@/shared/ui/input";
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/shared/ui/select";
+import { useQuery } from "@tanstack/react-query";
+import { Check, ChevronsUpDown, Loader2, Plus } from "lucide-react";
+import { useState, type Dispatch, type SetStateAction } from "react";
+
+interface Props {
+  searchTerm: string;
+  setSearchTerm: Dispatch<SetStateAction<string>>;
+  statusFilter: "all" | "true" | "false";
+  setStatusFilter: Dispatch<SetStateAction<"all" | "true" | "false">>;
+  regionValue: RegionListResData | null;
+  setRegionValue: Dispatch<SetStateAction<RegionListResData | null>>;
+  dialogOpen: boolean;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  editingUser: UserListData | null;
+  setEditingUser: Dispatch<SetStateAction<UserListData | null>>;
+}
+
+const Filter = ({
+  searchTerm,
+  setSearchTerm,
+  statusFilter,
+  setStatusFilter,
+  regionValue,
+  setRegionValue,
+  dialogOpen,
+  setDialogOpen,
+  editingUser,
+  setEditingUser,
+}: Props) => {
+  const [openRegion, setOpenRegion] = useState(false);
+  const [regionSearch, setRegionSearch] = useState("");
+
+  const { data: regions, isLoading } = useQuery({
+    queryKey: ["region_list", regionSearch],
+    queryFn: () => region_api.list({ name: regionSearch }),
+    select: (res) => res.data.data,
+  });
+
+  return (
+    <div className="flex flex-wrap gap-2 items-center">
+      {/* Search input */}
+      <Input
+        type="text"
+        placeholder="Ism yoki Familiyasi bo'yicha qidirish"
+        className="border rounded px-3 py-2 text-sm w-64"
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+      />
+
+      <Select
+        value={statusFilter}
+        onValueChange={(val) =>
+          setStatusFilter(val as "all" | "true" | "false")
+        }
+      >
+        <SelectTrigger className="w-40">
+          <SelectValue placeholder="Holati" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="all">Barchasi</SelectItem>
+          <SelectItem value="true">Faol</SelectItem>
+          <SelectItem value="false">Faol emas</SelectItem>
+        </SelectContent>
+      </Select>
+
+      <Popover open={openRegion} onOpenChange={setOpenRegion}>
+        <PopoverTrigger asChild>
+          <Button
+            type="button"
+            variant="outline"
+            role="combobox"
+            aria-expanded={openRegion}
+            className={cn(
+              "w-64 h-12 justify-between",
+              !regionValue && "text-muted-foreground",
+            )}
+          >
+            {regionValue ? regionValue.name : "Hudud tanlang"}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent
+          className="w-[--radix-popover-trigger-width] p-0"
+          align="start"
+        >
+          <Command shouldFilter={false}>
+            <CommandInput
+              placeholder="Hududni qidirish..."
+              className="h-9"
+              value={regionSearch}
+              onValueChange={setRegionSearch}
+            />
+            <CommandList>
+              {isLoading ? (
+                <div className="py-6 text-center text-sm">
+                  <Loader2 className="mx-auto h-4 w-4 animate-spin" />
+                </div>
+              ) : regions && regions.length > 0 ? (
+                <CommandGroup>
+                  <CommandItem
+                    value={""}
+                    onSelect={() => {
+                      setRegionValue(null);
+                      setRegionSearch("");
+                      setOpenRegion(false);
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        "mr-2 h-4 w-4",
+                        regionValue === null ? "opacity-100" : "opacity-0",
+                      )}
+                    />
+                    Barchasi
+                  </CommandItem>
+                  {regions.map((r) => (
+                    <CommandItem
+                      key={r.id}
+                      value={`${r.name}`}
+                      onSelect={() => {
+                        setRegionValue(r);
+                        setRegionSearch("");
+                        setOpenRegion(false);
+                      }}
+                    >
+                      <Check
+                        className={cn(
+                          "mr-2 h-4 w-4",
+                          regionValue?.id === r.id
+                            ? "opacity-100"
+                            : "opacity-0",
+                        )}
+                      />
+                      {r.name}
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              ) : (
+                <CommandEmpty>Hudud topilmadi</CommandEmpty>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogTrigger asChild>
+          <Button
+            variant="default"
+            className="bg-blue-500 cursor-pointer hover:bg-blue-500"
+            onClick={() => setEditingUser(null)}
+          >
+            <Plus className="!h-5 !w-5" /> Qo'shish
+          </Button>
+        </DialogTrigger>
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle>
+              {editingUser
+                ? "Foydalanuvchini tahrirlash"
+                : "Foydalanuvchi qo'shish"}
+            </DialogTitle>
+          </DialogHeader>
+
+          <AddUsers initialData={editingUser} setDialogOpen={setDialogOpen} />
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default Filter;

src/features/users/ui/Pagination.tsx

@@ -0,0 +1,53 @@
+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 Pagination = ({ 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"
+        className="cursor-pointer"
+        disabled={currentPage === 1}
+        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"
+        className="cursor-pointer"
+        disabled={currentPage === totalPages}
+        onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
+      >
+        <ChevronRight />
+      </Button>
+    </div>
+  );
+};
+
+export default Pagination;

src/features/users/ui/UserTable.tsx

@@ -0,0 +1,202 @@
+import { user_api } from "@/features/users/lib/api";
+import type { UserListData, UserListRes } from "@/features/users/lib/data";
+import { Button } from "@/shared/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/ui/table";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError, AxiosResponse } from "axios";
+import clsx from "clsx";
+import { Edit, Loader2, Trash } from "lucide-react";
+import { useState, type Dispatch, type SetStateAction } from "react";
+import { toast } from "sonner";
+
+interface Props {
+  data: AxiosResponse<UserListRes> | undefined;
+  isLoading: boolean;
+  isError: boolean;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  setEditingUser: Dispatch<SetStateAction<UserListData | null>>;
+  handleDelete: (user: UserListData) => void;
+  currentPage: number;
+}
+
+const UserTable = ({
+  data,
+  isLoading,
+  isError,
+  setDialogOpen,
+  handleDelete,
+  setEditingUser,
+  currentPage,
+}: Props) => {
+  const queryClient = useQueryClient();
+
+  const [pendingUserId, setPendingUserId] = useState<number | null>(null);
+
+  const { mutate: active } = useMutation({
+    mutationFn: (id: number) => user_api.active(id),
+    onMutate: (id) => {
+      setPendingUserId(id);
+    },
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["user_list"] });
+      toast.success(`Foydalanuvchi aktivlashdi`);
+      setPendingUserId(null);
+    },
+    onError: (err: AxiosError) => {
+      const errMessage = err.response?.data as { message: string };
+      const messageText = errMessage.message;
+      setPendingUserId(null);
+      toast.error(messageText || "Xatolik yuz berdi", {
+        richColors: true,
+        position: "top-center",
+      });
+    },
+  });
+
+  const handleActivate = (userId: number) => {
+    active(userId);
+  };
+
+  return (
+    <div className="flex-1 overflow-auto">
+      {isLoading && (
+        <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 className="text-[16px] text-center">
+              <TableHead className="text-start">ID</TableHead>
+              <TableHead className="text-start">Ismi</TableHead>
+              <TableHead className="text-start">Familiyasi</TableHead>
+              <TableHead className="text-start">Hududi</TableHead>
+              <TableHead className="text-center">Holati</TableHead>
+              <TableHead className="text-right">Harakatlar</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data && data.data.data.results.length > 0 ? (
+              data.data.data.results.map((user, index) => (
+                <TableRow key={user.id} className="text-[14px] text-start">
+                  <TableCell>{index + 1 + (currentPage - 1) * 20}</TableCell>
+                  <TableCell>{user.first_name}</TableCell>
+                  <TableCell>{user.last_name}</TableCell>
+                  <TableCell>{user.region.name}</TableCell>
+                  <TableCell className="text-center">
+                    {/* <Select
+                      value={user.is_active ? "true" : "false"}
+                      onValueChange={() => handleActivate(user.id)}
+                    >
+                      <SelectTrigger
+                        className={clsx(
+                          "w-[180px] mx-auto",
+                          user.is_active
+                            ? "bg-green-100 text-green-800"
+                            : "bg-red-100 text-red-800",
+                        )}
+                      >
+                        {pendingUserId === user.id ? (
+                          <Loader2 className="animate-spin h-4 w-4 mx-auto" />
+                        ) : (
+                          <SelectValue placeholder="Holati" />
+                        )}
+                      </SelectTrigger>
+                      <SelectContent>
+                        <SelectItem
+                          disabled={pendingUserId === user.id}
+                          value="true"
+                          className="text-green-500 hover:!text-green-500"
+                        >
+                          {pendingUserId === user.id ? (
+                            <Loader2 className="animate-spin h-4 w-4 mx-auto" />
+                          ) : (
+                            "Faol"
+                          )}
+                        </SelectItem>
+                        <SelectItem
+                          disabled={pendingUserId === user.id}
+                          value="false"
+                          className="text-red-500 hover:!text-red-500"
+                        >
+                          {pendingUserId === user.id ? (
+                            <Loader2 className="animate-spin h-4 w-4 mx-auto" />
+                          ) : (
+                            "Faol emas"
+                          )}
+                        </SelectItem>
+                      </SelectContent>
+                    </Select> */}
+                    <Button
+                      className={clsx(
+                        "mx-auto cursor-pointer",
+                        user.is_active
+                          ? "bg-green-500 hover:bg-green-500"
+                          : "bg-blue-500  hover:bg-blue-500",
+                      )}
+                      disabled={user.is_active}
+                      onClick={() => handleActivate(user.id)}
+                    >
+                      {pendingUserId === user.id ? (
+                        <Loader2 className="animate-spin h-4 w-4 mx-auto" />
+                      ) : (
+                        <>{user.is_active ? "Tasdiqlangan" : "Tasdiqlash"}</>
+                      )}
+                    </Button>
+                  </TableCell>
+                  <TableCell className="flex gap-2 justify-end">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => {
+                        setEditingUser(user);
+                        setDialogOpen(true);
+                      }}
+                      className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
+                    >
+                      <Edit className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="destructive"
+                      size="sm"
+                      onClick={() => handleDelete(user)}
+                      className="cursor-pointer"
+                    >
+                      <Trash className="h-4 w-4" />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={6} className="text-center py-4 text-lg">
+                  Foydalanuvchilar topilmadi.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  );
+};
+
+export default UserTable;

src/features/users/ui/UsersList.tsx

@@ -1,292 +1,107 @@
 import SidebarLayout from "@/SidebarLayout";
-import { FakeUserList, type User } from "@/features/users/lib/data";
-import AddUsers from "@/features/users/ui/AddUsers";
-import { Button } from "@/shared/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/shared/ui/dialog";
-import { Input } from "@/shared/ui/input";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/shared/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/shared/ui/table";
-import clsx from "clsx";
-import { ChevronLeft, ChevronRight, Edit, Plus, Trash } from "lucide-react";
-import { useMemo, useState } from "react";
+import type { RegionListResData } from "@/features/region/lib/data";
+import { user_api } from "@/features/users/lib/api";
+import type { UserListData } from "@/features/users/lib/data";
+import DeleteUser from "@/features/users/ui/DeleteUser";
+import Filter from "@/features/users/ui/Filter";
+import Pagination from "@/features/users/ui/Pagination";
+import UserTable from "@/features/users/ui/UserTable";
+
+import { useQuery } from "@tanstack/react-query";
+import { useState } from "react";
 
 const UsersList = () => {
-  const [users, setUsers] = useState<User[]>(FakeUserList);
-
-  const [editingUser, setEditingUser] = useState<User | null>(null);
-  const [dialogOpen, setDialogOpen] = useState(false);
-
+  const [editingUser, setEditingUser] = useState<UserListData | null>(null);
   const [searchTerm, setSearchTerm] = useState("");
-  const [statusFilter, setStatusFilter] = useState<
-    "all" | "active" | "inactive"
-  >("all");
-  const [regionFilter, setRegionFilter] = useState<string>("all");
-
-  // Pagination state
+  const [regionValue, setRegionValue] = useState<RegionListResData | null>(
+    null,
+  );
+  const limit = 20;
   const [currentPage, setCurrentPage] = useState(1);
-  const pageSize = 5;
-
-  const handleDelete = (id: number) => {
-    setUsers(users.filter((u) => u.id !== id));
-  };
-
-  // Filter & search users
-  const filteredUsers = useMemo(() => {
-    return users.filter((user) => {
-      const matchesSearch =
-        user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
-        user.lastName.toLowerCase().includes(searchTerm.toLowerCase());
-
-      const matchesStatus =
-        statusFilter === "all" ||
-        (statusFilter === "active" && user.isActive) ||
-        (statusFilter === "inactive" && !user.isActive);
-
-      const matchesRegion =
-        regionFilter === "all" || user.region === regionFilter;
-
-      return matchesSearch && matchesStatus && matchesRegion;
-    });
-  }, [users, searchTerm, statusFilter, regionFilter]);
-
-  const totalPages = Math.ceil(filteredUsers.length / pageSize);
-  const paginatedUsers = filteredUsers.slice(
-    (currentPage - 1) * pageSize,
-    currentPage * pageSize,
+  const [statusFilter, setStatusFilter] = useState<"all" | "true" | "false">(
+    "all",
   );
 
-  // Hududlarni filter qilish uchun
-  const regions = Array.from(new Set(users.map((u) => u.region)));
+  const [userDelete, setUserDelete] = useState<UserListData | null>(null);
+  const [opneDelete, setOpenDelete] = useState<boolean>(false);
+
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["user_list", currentPage, statusFilter, regionValue, searchTerm],
+    queryFn: () => {
+      const params: {
+        limit?: number;
+        offset?: number;
+        search?: string;
+        is_active?: boolean | string;
+        region_id?: number;
+      } = {
+        limit,
+        offset: (currentPage - 1) * limit,
+        search: searchTerm,
+      };
+
+      if (regionValue !== null) {
+        params.region_id = Number(regionValue.id);
+      }
+
+      if (statusFilter !== "all") {
+        params.is_active = statusFilter;
+      }
+
+      return user_api.list(params);
+    },
+  });
+
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  const handleDelete = (user: UserListData) => {
+    setUserDelete(user);
+    setOpenDelete(true);
+  };
+
+  const totalPages = data ? Math.ceil(data.data.data.count / limit) : 1;
 
   return (
     <SidebarLayout>
       <div className="flex flex-col h-full p-10 w-full">
-        {/* Top Controls */}
         <div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
           <h1 className="text-2xl font-bold">Foydalanuvchilar ro'yxati</h1>
 
-          <div className="flex flex-wrap gap-2 items-center">
-            <Input
-              type="text"
-              placeholder="Ism yoki Familiyasi bo'yicha qidirish"
-              className="border rounded px-3 py-2 text-sm w-64"
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-            />
-
-            <Select
-              value={statusFilter}
-              onValueChange={(val) =>
-                setStatusFilter(val as "all" | "active" | "inactive")
-              }
-            >
-              <SelectTrigger className="w-40">
-                <SelectValue placeholder="Holati" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">Barchasi</SelectItem>
-                <SelectItem value="active">Faol</SelectItem>
-                <SelectItem value="inactive">Faol emas</SelectItem>
-              </SelectContent>
-            </Select>
-
-            <Select
-              value={regionFilter}
-              onValueChange={(val) => setRegionFilter(val)}
-            >
-              <SelectTrigger className="w-40">
-                <SelectValue placeholder="Hududi" />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="all">Barchasi</SelectItem>
-                {regions.map((r) => (
-                  <SelectItem key={r} value={r}>
-                    {r}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-
-            <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-              <DialogTrigger asChild>
-                <Button
-                  variant="default"
-                  className="bg-blue-500 cursor-pointer hover:bg-blue-500"
-                  onClick={() => setEditingUser(null)}
-                >
-                  <Plus className="!h-5 !w-5" /> Qo'shish
-                </Button>
-              </DialogTrigger>
-              <DialogContent className="sm:max-w-lg">
-                <DialogHeader>
-                  <DialogTitle>
-                    {editingUser
-                      ? "Foydalanuvchini tahrirlash"
-                      : "Foydalanuvchi qo'shish"}
-                  </DialogTitle>
-                </DialogHeader>
-
-                <AddUsers
-                  initialData={editingUser}
-                  setUsers={setUsers}
-                  setDialogOpen={setDialogOpen}
-                />
-              </DialogContent>
-            </Dialog>
-          </div>
+          <Filter
+            searchTerm={searchTerm}
+            setSearchTerm={setSearchTerm}
+            setStatusFilter={setStatusFilter}
+            statusFilter={statusFilter}
+            regionValue={regionValue}
+            setRegionValue={setRegionValue}
+            dialogOpen={dialogOpen}
+            setDialogOpen={setDialogOpen}
+            editingUser={editingUser}
+            setEditingUser={setEditingUser}
+          />
         </div>
 
-        <div className="flex-1 overflow-auto">
-          <Table>
-            <TableHeader>
-              <TableRow className="text-[16px] text-center">
-                <TableHead className="text-start">ID</TableHead>
-                <TableHead className="text-start">Ismi</TableHead>
-                <TableHead className="text-start">Familiyasi</TableHead>
-                <TableHead className="text-start">Hududi</TableHead>
-                <TableHead className="text-center">Holati</TableHead>
-                <TableHead className="text-right">Harakatlar</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {paginatedUsers.length > 0 ? (
-                paginatedUsers.map((user) => (
-                  <TableRow key={user.id} className="text-[14px] text-start">
-                    <TableCell>{user.id}</TableCell>
-                    <TableCell>{user.firstName}</TableCell>
-                    <TableCell>{user.lastName}</TableCell>
-                    <TableCell>{user.region}</TableCell>
-                    <TableCell>
-                      <Select
-                        value={user.isActive ? "active" : "inactive"}
-                        onValueChange={(val) => {
-                          setUsers(
-                            users.map((u) =>
-                              u.id === user.id
-                                ? { ...u, isActive: val === "active" }
-                                : u,
-                            ),
-                          );
-                        }}
-                      >
-                        <SelectTrigger
-                          className={clsx(
-                            "w-[180px] mx-auto",
-                            user.isActive
-                              ? "bg-green-100 text-green-800"
-                              : "bg-red-100 text-red-800",
-                          )}
-                        >
-                          <SelectValue placeholder="Holati" />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem
-                            value="active"
-                            className="text-green-500 hover:!text-green-500"
-                          >
-                            Faol
-                          </SelectItem>
-                          <SelectItem
-                            value="inactive"
-                            className="text-red-500 hover:!text-red-500"
-                          >
-                            Faol emas
-                          </SelectItem>
-                        </SelectContent>
-                      </Select>
-                    </TableCell>
-                    <TableCell className="flex gap-2 justify-end">
-                      <Button
-                        variant="outline"
-                        size="sm"
-                        onClick={() => {
-                          setEditingUser(user);
-                          setDialogOpen(true);
-                        }}
-                        className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
-                      >
-                        <Edit className="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="destructive"
-                        size="sm"
-                        onClick={() => handleDelete(user.id)}
-                        className="cursor-pointer"
-                      >
-                        <Trash className="h-4 w-4" />
-                      </Button>
-                    </TableCell>
-                  </TableRow>
-                ))
-              ) : (
-                <TableRow>
-                  <TableCell colSpan={6} className="text-center py-4 text-lg">
-                    Foydalanuvchilar topilmadi.
-                  </TableCell>
-                </TableRow>
-              )}
-            </TableBody>
-          </Table>
-        </div>
+        <UserTable
+          data={data}
+          isLoading={isLoading}
+          setEditingUser={setEditingUser}
+          isError={isError}
+          setDialogOpen={setDialogOpen}
+          handleDelete={handleDelete}
+          currentPage={currentPage}
+        />
+        <Pagination
+          currentPage={currentPage}
+          setCurrentPage={setCurrentPage}
+          totalPages={totalPages}
+        />
 
-        {/* Pagination */}
-        <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"
-            className="cursor-pointer"
-            disabled={currentPage === 1}
-            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"
-            className="cursor-pointer"
-            disabled={currentPage === totalPages}
-            onClick={() =>
-              setCurrentPage((prev) => Math.min(prev + 1, totalPages))
-            }
-          >
-            <ChevronRight />
-          </Button>
-        </div>
+        <DeleteUser
+          opneDelete={opneDelete}
+          setOpenDelete={setOpenDelete}
+          userDelete={userDelete}
+          setUserDelete={setUserDelete}
+        />
       </div>
     </SidebarLayout>
   );