api ulandi

.env

@@ -1 +1,2 @@
-VITE_API_URL=https://jsonplaceholder.typicode.com
+VITE_API_URL=https://api.meridynpharma.com
+VITE_SOCKET_URL=wss://api.meridynpharma.com

package-lock.json

@@ -24,10 +24,12 @@
         "axios": "^1.9.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
+        "cmdk": "^1.1.1",
         "date-fns": "^4.1.0",
         "dayjs": "^1.11.18",
         "i18next": "^25.5.2",
         "i18next-browser-languagedetector": "^8.2.0",
+        "js-cookie": "^3.0.5",
         "lucide-react": "^0.544.0",
         "next-themes": "^0.4.6",
         "react": "^19.1.1",
@@ -37,6 +39,7 @@
         "react-hook-form": "^7.66.1",
         "react-i18next": "^15.7.3",
         "react-router-dom": "^7.9.6",
+        "socket.io-client": "^4.8.1",
         "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.13",
@@ -44,6 +47,7 @@
       },
       "devDependencies": {
         "@eslint/js": "^9.25.0",
+        "@types/js-cookie": "^3.0.6",
         "@types/node": "^22.15.21",
         "@types/react": "^19.1.2",
         "@types/react-dom": "^19.1.2",
@@ -2332,6 +2336,12 @@
         "win32"
       ]
     },
+    "node_modules/@socket.io/component-emitter": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz",
+      "integrity": "sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==",
+      "license": "MIT"
+    },
     "node_modules/@standard-schema/utils": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
@@ -2656,6 +2666,13 @@
       "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "dev": true
     },
+    "node_modules/@types/js-cookie": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+      "integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/json-schema": {
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -3259,6 +3276,22 @@
         "node": ">=6"
       }
     },
+    "node_modules/cmdk": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cmdk/-/cmdk-1.1.1.tgz",
+      "integrity": "sha512-Vsv7kFaXm+ptHDMZ7izaRsP70GgrW9NBNGswt9OZaVBLlE0SNpDq8eu/VGXyF9r7M0azK3Wy7OlYXsuyYLFzHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "^1.1.1",
+        "@radix-ui/react-dialog": "^1.1.6",
+        "@radix-ui/react-id": "^1.1.0",
+        "@radix-ui/react-primitive": "^2.0.2"
+      },
+      "peerDependencies": {
+        "react": "^18 || ^19 || ^19.0.0-rc",
+        "react-dom": "^18 || ^19 || ^19.0.0-rc"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -3434,6 +3467,45 @@
       "integrity": "sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==",
       "dev": true
     },
+    "node_modules/engine.io-client": {
+      "version": "6.6.3",
+      "resolved": "https://registry.npmjs.org/engine.io-client/-/engine.io-client-6.6.3.tgz",
+      "integrity": "sha512-T0iLjnyNWahNyv/lcjS2y4oE358tVS/SYQNxYXGAJ9/GLgH4VCvOQ/mhTjqU88mLZCQgiG8RIegFHYCdVC+j5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1",
+        "engine.io-parser": "~5.2.1",
+        "ws": "~8.17.1",
+        "xmlhttprequest-ssl": "~2.1.1"
+      }
+    },
+    "node_modules/engine.io-client/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/engine.io-parser": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/engine.io-parser/-/engine.io-parser-5.2.3.tgz",
+      "integrity": "sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/enhanced-resolve": {
       "version": "5.18.3",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
@@ -4224,6 +4296,15 @@
         "jiti": "lib/jiti-cli.mjs"
       }
     },
+    "node_modules/js-cookie": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+      "integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -4725,8 +4806,7 @@
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
-      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
-      "dev": true
     },
     "node_modules/nano-spawn": {
       "version": "1.0.3",
@@ -5379,6 +5459,68 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/socket.io-client": {
+      "version": "4.8.1",
+      "resolved": "https://registry.npmjs.org/socket.io-client/-/socket.io-client-4.8.1.tgz",
+      "integrity": "sha512-hJVXfu3E28NmzGk8o1sHhN3om52tRvwYeidbj7xKy2eIIse5IoKX3USlS6Tqt3BHAtflLIkCQBkzVrEEfWUyYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.2",
+        "engine.io-client": "~6.6.1",
+        "socket.io-parser": "~4.2.4"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-client/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/socket.io-parser": {
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/socket.io-parser/-/socket.io-parser-4.2.4.tgz",
+      "integrity": "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==",
+      "license": "MIT",
+      "dependencies": {
+        "@socket.io/component-emitter": "~3.1.0",
+        "debug": "~4.3.1"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/socket.io-parser/node_modules/debug": {
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",
+      "integrity": "sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.3"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/sonner": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
@@ -5947,6 +6089,35 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/ws": {
+      "version": "8.17.1",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.17.1.tgz",
+      "integrity": "sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/xmlhttprequest-ssl": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.1.2.tgz",
+      "integrity": "sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",

package.json

@@ -28,10 +28,12 @@
     "axios": "^1.9.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
     "dayjs": "^1.11.18",
     "i18next": "^25.5.2",
     "i18next-browser-languagedetector": "^8.2.0",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.544.0",
     "next-themes": "^0.4.6",
     "react": "^19.1.1",
@@ -41,6 +43,7 @@
     "react-hook-form": "^7.66.1",
     "react-i18next": "^15.7.3",
     "react-router-dom": "^7.9.6",
+    "socket.io-client": "^4.8.1",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.13",
@@ -48,6 +51,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.25.0",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^22.15.21",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",

src/App.tsx

@@ -7,7 +7,7 @@ const App = () => {
   return (
     <MainProvider>
       <AppRouter />
-      <Toaster />
+      <Toaster richColors={true} position="top-center" />
     </MainProvider>
   );
 };

src/LoginLayout.tsx

@@ -0,0 +1,20 @@
+import { getToken } from "@/shared/lib/cookie";
+import { useEffect, type ReactNode } from "react";
+import { useNavigate } from "react-router-dom";
+
+const LoginLayout = ({ children }: { children: ReactNode }) => {
+  const token = getToken();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (!token) {
+      navigate("/");
+    } else if (token) {
+      navigate("/dashboard");
+    }
+  }, [token, navigate]);
+
+  return children;
+};
+
+export default LoginLayout;

src/features/auth/lib/api.ts

@@ -0,0 +1,22 @@
+import httpClient from "@/shared/config/api/httpClient";
+import { LOGIN } from "@/shared/config/api/URLs";
+import type { AxiosResponse } from "axios";
+
+interface LoginRes {
+  status_code: number;
+  status: string;
+  message: string;
+  data: {
+    token: string;
+  };
+}
+
+export const auth_pai = {
+  async login(body: {
+    username: string;
+    password: string;
+  }): Promise<AxiosResponse<LoginRes>> {
+    const res = await httpClient.post(LOGIN, body);
+    return res;
+  },
+};

src/features/auth/ui/AuthLogin.tsx

@@ -0,0 +1,160 @@
+import { auth_pai } from "@/features/auth/lib/api";
+import { saveToken } from "@/shared/lib/cookie";
+import { Button } from "@/shared/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/shared/ui/card";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/shared/ui/form";
+import { Input } from "@/shared/ui/input";
+import { Label } from "@/shared/ui/label";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useMutation } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Eye, EyeOff, Loader2 } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
+import { toast } from "sonner";
+import { z } from "zod";
+
+const AuthLogin = () => {
+  const [showPassword, setShowPassword] = useState(false);
+  const navigate = useNavigate();
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (body: { username: string; password: string }) =>
+      auth_pai.login(body),
+    onSuccess: (res) => {
+      toast.success(res.data.message, {
+        richColors: true,
+        position: "top-center",
+      });
+
+      saveToken(res.data.data.token);
+      navigate("dashboard");
+    },
+    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",
+      });
+    },
+  });
+
+  const FormSchema = z.object({
+    email: z.string().min(1, "Login kiriting"),
+    password: z.string().min(1, "Parolni kiriting"),
+  });
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      email: "",
+      password: "",
+    },
+  });
+
+  const handleSubmit = async (values: z.infer<typeof FormSchema>) => {
+    mutate({
+      password: values.password,
+      username: values.email,
+    });
+  };
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50 p-6">
+      <Card className="w-full max-w-md">
+        <CardHeader className="gap-1">
+          <CardTitle className="text-xl font-semibold">
+            Admin panelga kirish
+          </CardTitle>
+          <CardDescription className="text-md">
+            Login va parolingizni kiriting.
+          </CardDescription>
+        </CardHeader>
+
+        <CardContent>
+          <Form {...form}>
+            <form
+              onSubmit={form.handleSubmit(handleSubmit)}
+              className="space-y-4"
+            >
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <Label>Login</Label>
+                    <FormControl>
+                      <Input
+                        placeholder="admin"
+                        {...field}
+                        className="!h-12 !text-md"
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <FormField
+                control={form.control}
+                name="password"
+                render={({ field }) => (
+                  <FormItem>
+                    <Label>Parol</Label>
+                    <FormControl>
+                      <div className="relative">
+                        <Input
+                          type={showPassword ? "text" : "password"}
+                          placeholder="12345"
+                          {...field}
+                          className="!h-12 !text-md"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => setShowPassword((prev) => !prev)}
+                          className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-600 hover:text-black"
+                        >
+                          {showPassword ? (
+                            <EyeOff size={20} />
+                          ) : (
+                            <Eye size={20} />
+                          )}
+                        </button>
+                      </div>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+
+              <Button
+                type="submit"
+                className="w-full h-12 text-lg"
+                disabled={isPending}
+              >
+                {isPending ? <Loader2 className="animate-spin" /> : "Kirish"}
+              </Button>
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
+    </div>
+  );
+};
+
+export default AuthLogin;

src/features/districts/lib/api.ts

@@ -0,0 +1,42 @@
+import type { DistrictListRes } from "@/features/districts/lib/data";
+import httpClient from "@/shared/config/api/httpClient";
+import { DISTRICT } from "@/shared/config/api/URLs";
+import type { AxiosResponse } from "axios";
+
+export const discrit_api = {
+  async list(params: {
+    limit?: number;
+    offset?: number;
+    name?: string;
+  }): Promise<AxiosResponse<DistrictListRes>> {
+    const res = await httpClient.get(`${DISTRICT}list/`, { params });
+    return res;
+  },
+
+  async create(body: {
+    name: string;
+    user_id: number;
+  }): Promise<AxiosResponse<DistrictListRes>> {
+    const res = await httpClient.post(`${DISTRICT}create/`, body);
+    return res;
+  },
+
+  async update({
+    body,
+    id,
+  }: {
+    id: number;
+    body: {
+      name: string;
+      user: number;
+    };
+  }): Promise<AxiosResponse<DistrictListRes>> {
+    const res = await httpClient.patch(`${DISTRICT}${id}/update/`, body);
+    return res;
+  },
+
+  async delete(id: number): Promise<AxiosResponse<DistrictListRes>> {
+    const res = await httpClient.delete(`${DISTRICT}${id}/delete/`);
+    return res;
+  },
+};

src/features/districts/lib/data.ts

@@ -23,3 +23,26 @@ export const fakeDistrict: District[] = [
     user: FakeUserList[2],
   },
 ];
+
+export interface DistrictListRes {
+  status_code: number;
+  status: string;
+  message: string;
+  data: {
+    count: number;
+    next: string | null;
+    previous: string | null;
+    results: DistrictListData[];
+  };
+}
+
+export interface DistrictListData {
+  id: number;
+  name: string;
+  user: {
+    id: number;
+    first_name: string;
+    last_name: string;
+  };
+  created_at: string;
+}

src/features/districts/ui/AddDistrict.tsx

@@ -1,7 +1,17 @@
-import type { District } from "@/features/districts/lib/data";
+import { discrit_api } from "@/features/districts/lib/api";
+import type { DistrictListData } from "@/features/districts/lib/data";
 import { addDistrict } from "@/features/districts/lib/form";
-import { FakeUserList } from "@/features/users/lib/data";
+import { user_api } from "@/features/users/lib/api";
+import { cn } from "@/shared/lib/utils";
 import { Button } from "@/shared/ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "@/shared/ui/command";
 import {
   Form,
   FormControl,
@@ -11,33 +21,77 @@ import {
 } from "@/shared/ui/form";
 import { Input } from "@/shared/ui/input";
 import { Label } from "@/shared/ui/label";
-import {
+import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/shared/ui/select";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Loader2 } from "lucide-react";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+import { Check, ChevronsUpDown, Loader2 } from "lucide-react";
 import { useState, type Dispatch, type SetStateAction } from "react";
 import { useForm } from "react-hook-form";
+import { toast } from "sonner";
 import z from "zod";
 
 type FormValues = z.infer<typeof addDistrict>;
 
 interface Props {
-  initialValues: District | null;
+  initialValues: DistrictListData | null;
-  setDistricts: Dispatch<SetStateAction<District[]>>;
   setDialogOpen: Dispatch<SetStateAction<boolean>>;
 }
 
-export default function AddDistrict({
+export default function AddDistrict({ initialValues, setDialogOpen }: Props) {
-  initialValues,
+  const [openUser, setOpenUser] = useState<boolean>(false);
-  setDistricts,
+  const [userSearch, setUserSearch] = useState<string>("");
-  setDialogOpen,
+  const queryClient = useQueryClient();
-}: Props) {
+
-  const [load, setLoad] = useState<boolean>(false);
+  const { data: user, isLoading: isUserLoading } = useQuery({
+    queryKey: ["user_list", userSearch],
+    queryFn: () => user_api.list({ search: userSearch }),
+    select(data) {
+      return data.data.data.results;
+    },
+  });
+
+  const { mutate, isPending } = useMutation({
+    mutationFn: (body: { name: string; user_id: number }) =>
+      discrit_api.create(body),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["discrit_list"] });
+      toast.success(`Tuman 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",
+      });
+    },
+  });
+
+  const { mutate: update, isPending: updatePending } = useMutation({
+    mutationFn: ({
+      body,
+      id,
+    }: {
+      id: number;
+      body: { name: string; user: number };
+    }) => discrit_api.update({ body, id }),
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["discrit_list"] });
+      toast.success(`Tuman 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",
+      });
+    },
+  });
+
   const form = useForm<FormValues>({
     resolver: zodResolver(addDistrict),
     defaultValues: {
@@ -47,41 +101,16 @@ export default function AddDistrict({
   });
 
   function onSubmit(values: FormValues) {
-    const selectedUser = FakeUserList.find(
-      (u) => u.id === Number(values.userId),
-    );
-
-    if (!selectedUser) return;
-    setLoad(true);
     if (initialValues) {
-      setTimeout(() => {
+      update({
-        setDistricts((prev) =>
+        id: initialValues.id,
-          prev.map((d) =>
+        body: {
-            d.id === initialValues.id
+          name: values.name,
-              ? {
+          user: Number(values.userId),
-                  ...d,
+        },
-                  name: values.name,
+      });
-                  user: selectedUser,
-                }
-              : d,
-          ),
-        );
-        setDialogOpen(false);
-        setLoad(false);
-      }, 2000);
     } else {
-      setTimeout(() => {
+      mutate({ name: values.name, user_id: Number(values.userId) });
-        setDistricts((prev) => [
-          ...prev,
-          {
-            id: prev.length ? prev[prev.length - 1].id + 1 : 1,
-            name: values.name,
-            user: selectedUser,
-          },
-        ]);
-        setDialogOpen(false);
-        setLoad(false);
-      }, 2000);
     }
   }
 
@@ -109,36 +138,100 @@ export default function AddDistrict({
         <FormField
           name="userId"
           control={form.control}
-          render={({ field }) => (
+          render={({ field }) => {
-            <FormItem>
+            const selectedUser = user?.find(
-              <Label className="text-md">Kim qo‘shgan</Label>
+              (u) => String(u.id) === field.value,
-              <FormControl>
+            );
-                <Select value={field.value} onValueChange={field.onChange}>
+            return (
-                  <SelectTrigger className="w-full !h-12">
+              <FormItem className="flex flex-col">
-                    <SelectValue placeholder="Foydalanuvchi tanlang" />
+                <Label className="text-md">Foydalanuvchi</Label>
-                  </SelectTrigger>
+
-                  <SelectContent>
+                <Popover open={openUser} onOpenChange={setOpenUser}>
-                    {FakeUserList.map((u) => (
+                  <PopoverTrigger asChild>
-                      <SelectItem key={u.id} value={String(u.id)}>
+                    <FormControl>
-                        {u.firstName} {u.lastName}
+                      <Button
-                      </SelectItem>
+                        type="button"
-                    ))}
+                        variant="outline"
-                  </SelectContent>
+                        role="combobox"
-                </Select>
+                        aria-expanded={openUser}
-              </FormControl>
+                        className={cn(
-              <FormMessage />
+                          "w-full h-12 justify-between",
-            </FormItem>
+                          !field.value && "text-muted-foreground",
-          )}
+                        )}
+                      >
+                        {selectedUser
+                          ? `${selectedUser.first_name} ${selectedUser.last_name}`
+                          : "Foydalanuvchi tanlang"}
+                        <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+                      </Button>
+                    </FormControl>
+                  </PopoverTrigger>
+
+                  <PopoverContent
+                    className="w-[--radix-popover-trigger-width] p-0"
+                    align="start"
+                  >
+                    <Command shouldFilter={false}>
+                      <CommandInput
+                        placeholder="Qidirish..."
+                        className="h-9"
+                        value={userSearch}
+                        onValueChange={setUserSearch}
+                      />
+
+                      <CommandList>
+                        {isUserLoading ? (
+                          <div className="py-6 text-center text-sm">
+                            <Loader2 className="mx-auto h-4 w-4 animate-spin" />
+                          </div>
+                        ) : user && user.length > 0 ? (
+                          <CommandGroup>
+                            {user.map((u) => (
+                              <CommandItem
+                                key={u.id}
+                                value={`${u.id}`}
+                                onSelect={() => {
+                                  field.onChange(String(u.id));
+                                  setOpenUser(false);
+                                }}
+                              >
+                                <Check
+                                  className={cn(
+                                    "mr-2 h-4 w-4",
+                                    field.value === String(u.id)
+                                      ? "opacity-100"
+                                      : "opacity-0",
+                                  )}
+                                />
+                                {u.first_name} {u.last_name} {u.region.name}
+                              </CommandItem>
+                            ))}
+                          </CommandGroup>
+                        ) : (
+                          <CommandEmpty>Foydalanuvchi topilmadi</CommandEmpty>
+                        )}
+                      </CommandList>
+                    </Command>
+                  </PopoverContent>
+                </Popover>
+
+                <FormMessage />
+              </FormItem>
+            );
+          }}
         />
 
-        {/* SUBMIT */}
+        <Button
-        <Button className="w-full h-12 bg-blue-700 hover:bg-blue-700 cursor-pointer">
+          type="submit"
-          {load ? (
+          className="w-full h-12 bg-blue-700 hover:bg-blue-800"
-            <Loader2 className="animate-spin" />
+          disabled={isPending || updatePending}
+        >
+          {isPending || updatePending ? (
+            <Loader2 className="h-4 w-4 animate-spin" />
           ) : initialValues ? (
             "Tahrirlash"
           ) : (
-            "Qo‘shish"
+            "Qo'shish"
           )}
         </Button>
       </form>

src/features/districts/ui/DeleteDiscrit.tsx

@@ -0,0 +1,90 @@
+import { discrit_api } from "@/features/districts/lib/api";
+import type { DistrictListData } from "@/features/districts/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, type SetStateAction } from "react";
+import { toast } from "sonner";
+
+interface Props {
+  opneDelete: boolean;
+  setOpenDelete: Dispatch<SetStateAction<boolean>>;
+  setDiscritDelete: Dispatch<SetStateAction<DistrictListData | null>>;
+  discrit: DistrictListData | null;
+}
+
+const DeleteDiscrit = ({
+  opneDelete,
+  setOpenDelete,
+  setDiscritDelete,
+  discrit,
+}: Props) => {
+  const queryClient = useQueryClient();
+
+  const { mutate: deleteDiscrict, isPending } = useMutation({
+    mutationFn: (id: number) => discrit_api.delete(id),
+
+    onSuccess: () => {
+      queryClient.refetchQueries({ queryKey: ["discrit_list"] });
+      toast.success(`Tuman o'chirildi`);
+      setOpenDelete(false);
+      setDiscritDelete(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>Tumanni o'chirish</DialogTitle>
+          <DialogDescription className="text-md font-semibold">
+            Siz rostan ham {discrit?.user.first_name} {discrit?.user.last_name}{" "}
+            ga tegishli {discrit?.name} tumanini o'chirmoqchimisiz
+          </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={() => discrit && deleteDiscrict(discrit.id)}
+          >
+            {isPending ? (
+              <Loader2 className="animate-spin" />
+            ) : (
+              <>
+                <Trash />
+                O'chirish
+              </>
+            )}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DeleteDiscrit;

src/features/districts/ui/DistrictsList.tsx

@@ -1,194 +1,83 @@
-import { fakeDistrict, type District } from "@/features/districts/lib/data";
+import { discrit_api } from "@/features/districts/lib/api";
-import AddDistrict from "@/features/districts/ui/AddDistrict";
+import { type DistrictListData } from "@/features/districts/lib/data";
-import { Button } from "@/shared/ui/button";
+import DeleteDiscrit from "@/features/districts/ui/DeleteDiscrit";
-import {
+import Filter from "@/features/districts/ui/Filter";
-  Dialog,
+import PaginationDistrict from "@/features/districts/ui/PaginationDistrict";
-  DialogContent,
+import TableDistrict from "@/features/districts/ui/TableDistrict";
-  DialogHeader,
+import { useQuery } from "@tanstack/react-query";
-  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, Edit, Plus, Trash } from "lucide-react";
 import { useState } from "react";
 
 const DistrictsList = () => {
   const [currentPage, setCurrentPage] = useState(1);
-  const totalPages = 5;
-
-  const [districts, setDistricts] = useState<District[]>(fakeDistrict);
-
   const [search, setSearch] = useState("");
+  const [editingDistrict, setEditingDistrict] =
+    useState<DistrictListData | null>(null);
 
-  const [userSearch, setUserSearch] = useState("");
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ["discrit_list", currentPage, search],
+    queryFn: () =>
+      discrit_api.list({
+        limit: 20,
+        offset: (currentPage - 1) * 20,
+        name: search,
+      }),
+    select(data) {
+      return data.data.data;
+    },
+  });
 
-  const [editing, setEditing] = useState<District | null>(null);
+  const totalPages = data ? Math.ceil(data.count / 20) : 1;
 
   const [dialogOpen, setDialogOpen] = useState(false);
 
-  const filtered = districts.filter((d) => {
+  const [disricDelete, setDiscritDelete] = useState<DistrictListData | null>(
-    return (
+    null,
-      d.name.toLowerCase().includes(search.toLowerCase()) &&
+  );
-      `${d.user.firstName} ${d.user.lastName}`
+  const [opneDelete, setOpenDelete] = useState<boolean>(false);
-        .toLowerCase()
-        .includes(userSearch.toLowerCase())
-    );
-  });
 
-  function deleteDistrict(id: number) {
+  const handleDelete = (user: DistrictListData) => {
-    setDistricts((prev) => prev.filter((d) => d.id !== id));
+    setDiscritDelete(user);
-  }
+    setOpenDelete(true);
+  };
 
   return (
     <div className="flex flex-col h-full p-10 w-full">
       <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">Tumanlar ro‘yxati</h1>
 
-        <div className="flex gap-4 justify-end">
+        <Filter
-          <Input
+          search={search}
-            placeholder="Tuman nomi bo‘yicha qidirish..."
+          setSearch={setSearch}
-            value={search}
+          dialogOpen={dialogOpen}
-            onChange={(e) => setSearch(e.target.value)}
+          editing={editingDistrict}
-            className="max-w-sm h-12"
+          setDialogOpen={setDialogOpen}
-          />
+          setEditing={setEditingDistrict}
-
+        />
-          <Input
-            placeholder="Foydalanuvchi bo‘yicha qidirish..."
-            value={userSearch}
-            onChange={(e) => setUserSearch(e.target.value)}
-            className="max-w-sm h-12"
-          />
-          <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-            <DialogTrigger asChild>
-              <Button
-                onClick={() => setEditing(null)}
-                className="bg-blue-500 h-12 cursor-pointer hover:bg-blue-500"
-              >
-                <Plus className="w-5 h-5 mr-1" /> Tuman qo‘shish
-              </Button>
-            </DialogTrigger>
-
-            <DialogContent className="sm:max-w-lg">
-              <DialogHeader>
-                <DialogTitle className="text-xl">
-                  {editing ? "Tumanni tahrirlash" : "Yangi tuman qo‘shish"}
-                </DialogTitle>
-              </DialogHeader>
-
-              <AddDistrict
-                initialValues={editing}
-                setDistricts={setDistricts}
-                setDialogOpen={setDialogOpen}
-              />
-            </DialogContent>
-          </Dialog>
-        </div>
       </div>
 
-      <div className="flex-1 overflow-auto">
+      <TableDistrict
-        <Table>
+        data={data ? data.results : []}
-          <TableHeader>
+        isError={isError}
-            <TableRow>
+        isLoading={isLoading}
-              <TableHead>ID</TableHead>
+        setDialogOpen={setDialogOpen}
-              <TableHead>Tuman nomi</TableHead>
+        setEditingDistrict={setEditingDistrict}
-              <TableHead>Kim qo‘shgan</TableHead>
+        handleDelete={handleDelete}
-              <TableHead className="text-right">Harakatlar</TableHead>
+        currentPage={currentPage}
-            </TableRow>
+      />
-          </TableHeader>
 
-          <TableBody>
+      <PaginationDistrict
-            {filtered.map((d) => (
+        currentPage={currentPage}
-              <TableRow key={d.id}>
+        setCurrentPage={setCurrentPage}
-                <TableCell>{d.id}</TableCell>
+        totalPages={totalPages}
-                <TableCell>{d.name}</TableCell>
+      />
-                <TableCell>
-                  {d.user.firstName} {d.user.lastName}
-                </TableCell>
-                <TableCell className="flex gap-2 justify-end">
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => {
-                      setEditing(d);
-                      setDialogOpen(true);
-                    }}
-                    className="bg-blue-500 text-white hover:text-white hover:bg-blue-500 cursor-pointer"
-                  >
-                    <Edit className="w-4 h-4" />
-                  </Button>
 
-                  <Button
+      <DeleteDiscrit
-                    variant="destructive"
+        discrit={disricDelete}
-                    size="sm"
+        setDiscritDelete={setDiscritDelete}
-                    onClick={() => deleteDistrict(d.id)}
+        opneDelete={opneDelete}
-                    className="cursor-pointer"
+        setOpenDelete={setOpenDelete}
-                  >
+      />
-                    <Trash className="w-4 h-4" />
-                  </Button>
-                </TableCell>
-              </TableRow>
-            ))}
-
-            {filtered.length === 0 && (
-              <TableRow>
-                <TableCell colSpan={4} className="text-center py-6">
-                  Hech qanday tuman topilmadi
-                </TableCell>
-              </TableRow>
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      <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>
     </div>
   );
 };

src/features/districts/ui/Filter.tsx

@@ -0,0 +1,65 @@
+import type { DistrictListData } from "@/features/districts/lib/data";
+import AddDistrict from "@/features/districts/ui/AddDistrict";
+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, type SetStateAction } from "react";
+
+interface Props {
+  search: string;
+  setSearch: Dispatch<SetStateAction<string>>;
+  dialogOpen: boolean;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  editing: DistrictListData | null;
+  setEditing: Dispatch<SetStateAction<DistrictListData | null>>;
+}
+
+const Filter = ({
+  search,
+  setSearch,
+  dialogOpen,
+  setDialogOpen,
+  setEditing,
+  editing,
+}: Props) => {
+  return (
+    <div className="flex gap-4 justify-end">
+      <Input
+        placeholder="Tuman nomi bo‘yicha qidirish..."
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        className="max-w-sm h-12"
+      />
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogTrigger asChild>
+          <Button
+            onClick={() => setEditing(null)}
+            className="bg-blue-500 h-12 cursor-pointer hover:bg-blue-500"
+          >
+            <Plus className="w-5 h-5 mr-1" /> Tuman qo‘shish
+          </Button>
+        </DialogTrigger>
+
+        <DialogContent className="sm:max-w-lg">
+          <DialogHeader>
+            <DialogTitle className="text-xl">
+              {editing ? "Tumanni tahrirlash" : "Yangi tuman qo‘shish"}
+            </DialogTitle>
+          </DialogHeader>
+
+          <AddDistrict initialValues={editing} setDialogOpen={setDialogOpen} />
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+};
+
+export default Filter;

src/features/districts/ui/PaginationDistrict.tsx

@@ -0,0 +1,57 @@
+import { Button } from "@/shared/ui/button";
+import clsx from "clsx";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { type Dispatch, type SetStateAction } from "react";
+
+interface Props {
+  currentPage: number;
+  setCurrentPage: Dispatch<SetStateAction<number>>;
+  totalPages: number;
+}
+
+const PaginationDistrict = ({
+  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 PaginationDistrict;

src/features/districts/ui/TableDistrict.tsx

@@ -0,0 +1,109 @@
+import type { DistrictListData } from "@/features/districts/lib/data";
+import { Button } from "@/shared/ui/button";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/shared/ui/table";
+import { Edit, Loader2, Trash } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+
+interface Props {
+  data: DistrictListData[] | [];
+  isLoading: boolean;
+  isError: boolean;
+  handleDelete: (user: DistrictListData) => void;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  setEditingDistrict: Dispatch<SetStateAction<DistrictListData | null>>;
+  currentPage: number;
+}
+
+const TableDistrict = ({
+  data,
+  isError,
+  isLoading,
+  handleDelete,
+  setDialogOpen,
+  setEditingDistrict,
+  currentPage,
+}: Props) => {
+  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>
+      )}
+
+      {!isError && !isLoading && (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>ID</TableHead>
+              <TableHead>Tuman nomi</TableHead>
+              <TableHead>Kim qo‘shgan</TableHead>
+              <TableHead className="text-right">Harakatlar</TableHead>
+            </TableRow>
+          </TableHeader>
+
+          <TableBody>
+            {data.map((d, index) => (
+              <TableRow key={d.id}>
+                <TableCell>{index + 1 + (currentPage - 1) * 20}</TableCell>
+                <TableCell>{d.name}</TableCell>
+                <TableCell>
+                  {d.user.first_name} {d.user.last_name}
+                </TableCell>
+                <TableCell className="flex gap-2 justify-end">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => {
+                      setEditingDistrict(d);
+                      setDialogOpen(true);
+                    }}
+                    className="bg-blue-500 text-white hover:text-white hover:bg-blue-500 cursor-pointer"
+                  >
+                    <Edit className="w-4 h-4" />
+                  </Button>
+
+                  <Button
+                    variant="destructive"
+                    size="sm"
+                    onClick={() => handleDelete(d)}
+                    className="cursor-pointer"
+                  >
+                    <Trash className="w-4 h-4" />
+                  </Button>
+                </TableCell>
+              </TableRow>
+            ))}
+
+            {data.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={4} className="text-center py-6">
+                  Hech qanday tuman topilmadi
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      )}
+    </div>
+  );
+};
+
+export default TableDistrict;

src/features/region/lib/api.ts

@@ -0,0 +1,14 @@
+import type { RegionListRes } from "@/features/region/lib/data";
+import httpClient from "@/shared/config/api/httpClient";
+import { REGIONS } from "@/shared/config/api/URLs";
+import type { AxiosResponse } from "axios";
+
+export const region_api = {
+  async list(params: {
+    limit?: number;
+    offset?: number;
+    name?: string;
+  }): Promise<AxiosResponse<RegionListRes>> {
+    return await httpClient.get(`${REGIONS}list/`, { params });
+  },
+};

src/features/region/lib/data.ts

@@ -17,3 +17,16 @@ export const fakeRegionList: RegionType[] = [
     name: "Andijon",
   },
 ];
+
+export interface RegionListRes {
+  status_code: number;
+  status: string;
+  message: string;
+  data: RegionListResData[];
+}
+
+export interface RegionListResData {
+  id: number;
+  name: string;
+  created_at: string;
+}

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;
+  initialData: UserListData | null;
-  setUsers: React.Dispatch<React.SetStateAction<User[]>>;
   setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
-const AddUsers = ({ initialData, setUsers, setDialogOpen }: UserFormProps) => {
+const AddUsers = ({ initialData, setDialogOpen }: UserFormProps) => {
-  const [load, setLoad] = useState(false);
   const form = useForm<z.infer<typeof AddedUser>>({
     resolver: zodResolver(AddedUser),
     defaultValues: {
-      firstName: initialData?.firstName || "",
+      firstName: initialData?.first_name || "",
-      lastName: initialData?.lastName || "",
+      lastName: initialData?.last_name || "",
-      region: initialData?.region || "",
+      region: initialData?.region.name || "",
-      isActive: initialData ? String(initialData.isActive) : "true",
+      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(() => {
+      update({
-        setUsers((prev) =>
+        body: {
-          prev.map((user) =>
+          first_name: values.firstName,
-            user.id === initialData.id
+          is_active: values.isActive === "true" ? true : false,
-              ? {
+          last_name: values.lastName,
-                  ...user,
+          region: Number(values.region),
-                  ...values,
+        },
-                  isActive: values.isActive === "true" ? true : false,
+        id: initialData.id,
-                }
+      });
-              : user,
+    } else if (initialData === null) {
-          ),
+      create({
-        );
+        first_name: values.firstName,
-        setLoad(false);
+        is_active: values.isActive === "true" ? true : false,
-        setDialogOpen(false);
+        last_name: values.lastName,
-      }, 2000);
+        region_id: Number(values.region),
-    } 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);
     }
   }
 
@@ -126,9 +154,9 @@ const AddUsers = ({ initialData, setUsers, setDialogOpen }: UserFormProps) => {
                     <SelectValue placeholder="Hududni tanlang" />
                   </SelectTrigger>
                   <SelectContent>
-                    <SelectItem value="Toshkent">Toshkent</SelectItem>
+                    <SelectItem value="1">Toshkent</SelectItem>
-                    <SelectItem value="Samarqand">Samarqand</SelectItem>
+                    <SelectItem value="2">Samarqand</SelectItem>
-                    <SelectItem value="Bekobod">Bekobod</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 type { RegionListResData } from "@/features/region/lib/data";
-import AddUsers from "@/features/users/ui/AddUsers";
+import { user_api } from "@/features/users/lib/api";
-import { Button } from "@/shared/ui/button";
+import type { UserListData } from "@/features/users/lib/data";
-import {
+import DeleteUser from "@/features/users/ui/DeleteUser";
-  Dialog,
+import Filter from "@/features/users/ui/Filter";
-  DialogContent,
+import Pagination from "@/features/users/ui/Pagination";
-  DialogHeader,
+import UserTable from "@/features/users/ui/UserTable";
-  DialogTitle,
+
-  DialogTrigger,
+import { useQuery } from "@tanstack/react-query";
-} from "@/shared/ui/dialog";
+import { useState } from "react";
-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";
 
 const UsersList = () => {
-  const [users, setUsers] = useState<User[]>(FakeUserList);
+  const [editingUser, setEditingUser] = useState<UserListData | null>(null);
-
-  const [editingUser, setEditingUser] = useState<User | null>(null);
-  const [dialogOpen, setDialogOpen] = useState(false);
-
   const [searchTerm, setSearchTerm] = useState("");
-  const [statusFilter, setStatusFilter] = useState<
+  const [regionValue, setRegionValue] = useState<RegionListResData | null>(
-    "all" | "active" | "inactive"
+    null,
-  >("all");
+  );
-  const [regionFilter, setRegionFilter] = useState<string>("all");
+  const limit = 20;
-
-  // Pagination state
   const [currentPage, setCurrentPage] = useState(1);
-  const pageSize = 5;
+  const [statusFilter, setStatusFilter] = useState<"all" | "true" | "false">(
-
+    "all",
-  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,
   );
 
-  // Hududlarni filter qilish uchun
+  const [userDelete, setUserDelete] = useState<UserListData | null>(null);
-  const regions = Array.from(new Set(users.map((u) => u.region)));
+  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">
+          <Filter
-            <Input
+            searchTerm={searchTerm}
-              type="text"
+            setSearchTerm={setSearchTerm}
-              placeholder="Ism yoki Familiyasi bo'yicha qidirish"
+            setStatusFilter={setStatusFilter}
-              className="border rounded px-3 py-2 text-sm w-64"
+            statusFilter={statusFilter}
-              value={searchTerm}
+            regionValue={regionValue}
-              onChange={(e) => setSearchTerm(e.target.value)}
+            setRegionValue={setRegionValue}
-            />
+            dialogOpen={dialogOpen}
-
+            setDialogOpen={setDialogOpen}
-            <Select
+            editingUser={editingUser}
-              value={statusFilter}
+            setEditingUser={setEditingUser}
-              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>
         </div>
 
-        <div className="flex-1 overflow-auto">
+        <UserTable
-          <Table>
+          data={data}
-            <TableHeader>
+          isLoading={isLoading}
-              <TableRow className="text-[16px] text-center">
+          setEditingUser={setEditingUser}
-                <TableHead className="text-start">ID</TableHead>
+          isError={isError}
-                <TableHead className="text-start">Ismi</TableHead>
+          setDialogOpen={setDialogOpen}
-                <TableHead className="text-start">Familiyasi</TableHead>
+          handleDelete={handleDelete}
-                <TableHead className="text-start">Hududi</TableHead>
+          currentPage={currentPage}
-                <TableHead className="text-center">Holati</TableHead>
+        />
-                <TableHead className="text-right">Harakatlar</TableHead>
+        <Pagination
-              </TableRow>
+          currentPage={currentPage}
-            </TableHeader>
+          setCurrentPage={setCurrentPage}
-            <TableBody>
+          totalPages={totalPages}
-              {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>
 
-        {/* Pagination */}
+        <DeleteUser
-        <div className="mt-2 sticky bottom-0 bg-white flex justify-end gap-2 z-10 py-2 border-t">
+          opneDelete={opneDelete}
-          <Button
+          setOpenDelete={setOpenDelete}
-            variant="outline"
+          userDelete={userDelete}
-            size="icon"
+          setUserDelete={setUserDelete}
-            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>
       </div>
     </SidebarLayout>
   );

src/index.css

@@ -1,5 +1,5 @@
-@import 'tailwindcss';
+@import "tailwindcss";
-@import 'tw-animate-css';
+@import "tw-animate-css";
 
 @custom-variant dark (&:is(.dark *));
 

src/pages/Login.tsx

@@ -1,166 +1,10 @@
-import { Button } from "@/shared/ui/button";
+import AuthLogin from "@/features/auth/ui/AuthLogin";
-import {
+import LoginLayout from "@/LoginLayout";
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/shared/ui/card";
-import {
-  Form,
-  FormControl,
-  FormField,
-  FormItem,
-  FormMessage,
-} from "@/shared/ui/form";
-import { Input } from "@/shared/ui/input";
-import { Label } from "@/shared/ui/label";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Eye, EyeOff, Loader2 } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useForm } from "react-hook-form";
-import { useNavigate } from "react-router-dom";
-import { toast } from "sonner";
-import { z } from "zod";
 
 export default function AdminLoginPage() {
-  const [showPassword, setShowPassword] = useState(false);
-  const navigate = useNavigate();
-
-  const FAKE_ADMIN = {
-    email: "admin",
-    password: "12345",
-  };
-
-  const FormSchema = z.object({
-    email: z.string().min(1, "Login kiriting"),
-    password: z.string().min(1, "Parolni kiriting"),
-  });
-
-  const form = useForm<z.infer<typeof FormSchema>>({
-    resolver: zodResolver(FormSchema),
-    defaultValues: {
-      email: "",
-      password: "",
-    },
-  });
-
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const [success, setSuccess] = useState(false);
-
-  useEffect(() => {
-    if (success) {
-      toast.success("Muvaffaqiyatli kirdingiz!", {
-        richColors: true,
-        position: "top-center",
-      });
-    } else if (error) {
-      toast.error(error, {
-        richColors: true,
-        position: "top-center",
-      });
-    }
-  }, [success, error]);
-
-  const handleSubmit = async (values: z.infer<typeof FormSchema>) => {
-    setLoading(true);
-    setError(null);
-    setSuccess(false);
-
-    setTimeout(() => {
-      if (
-        values.email === FAKE_ADMIN.email &&
-        values.password === FAKE_ADMIN.password
-      ) {
-        setSuccess(true);
-        navigate("/dashboard");
-      } else {
-        setError("Login yoki parol noto‘g‘ri!");
-      }
-      setLoading(false);
-    }, 800);
-  };
-
   return (
-    <div className="min-h-screen flex items-center justify-center bg-slate-50 p-6">
+    <LoginLayout>
-      <Card className="w-full max-w-md">
+      <AuthLogin />
-        <CardHeader className="gap-1">
+    </LoginLayout>
-          <CardTitle className="text-xl font-semibold">
-            Admin panelga kirish
-          </CardTitle>
-          <CardDescription className="text-md">
-            Login va parolingizni kiriting.
-          </CardDescription>
-        </CardHeader>
-
-        <CardContent>
-          <Form {...form}>
-            <form
-              onSubmit={form.handleSubmit(handleSubmit)}
-              className="space-y-4"
-            >
-              <FormField
-                control={form.control}
-                name="email"
-                render={({ field }) => (
-                  <FormItem>
-                    <Label>Login</Label>
-                    <FormControl>
-                      <Input
-                        placeholder="admin"
-                        {...field}
-                        className="!h-12 !text-md"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <FormField
-                control={form.control}
-                name="password"
-                render={({ field }) => (
-                  <FormItem>
-                    <Label>Parol</Label>
-                    <FormControl>
-                      <div className="relative">
-                        <Input
-                          type={showPassword ? "text" : "password"}
-                          placeholder="12345"
-                          {...field}
-                          className="!h-12 !text-md"
-                        />
-                        <button
-                          type="button"
-                          onClick={() => setShowPassword((prev) => !prev)}
-                          className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-600 hover:text-black"
-                        >
-                          {showPassword ? (
-                            <EyeOff size={20} />
-                          ) : (
-                            <Eye size={20} />
-                          )}
-                        </button>
-                      </div>
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                )}
-              />
-
-              <Button
-                type="submit"
-                className="w-full h-12 text-lg"
-                disabled={loading}
-              >
-                {loading ? <Loader2 className="animate-spin" /> : "Kirish"}
-              </Button>
-            </form>
-          </Form>
-        </CardContent>
-      </Card>
-    </div>
   );
 }

src/providers/routing/AppRoutes.tsx

@@ -1,3 +1,4 @@
+import LoginLayout from "@/LoginLayout";
 import Districts from "@/pages/Districts";
 import Doctors from "@/pages/Doctors";
 import UsersPage from "@/pages/Home";
@@ -23,7 +24,11 @@ const AppRouter = () => {
     },
     {
       path: "/dashboard",
-      element: <UsersPage />,
+      element: (
+        <LoginLayout>
+          <UsersPage />
+        </LoginLayout>
+      ),
     },
     {
       path: "/dashboard/plans",

src/shared/config/api/URLs.ts

@@ -1,6 +1,10 @@
 const BASE_URL =
-  import.meta.env.VITE_API_URL || 'https://jsonplaceholder.typicode.com';
+  import.meta.env.VITE_API_URL || "https://api.meridynpharma.com";
 
-const ENDP_POSTS = '/posts/';
+const LOGIN = "/api/v1/authentication/admin_login/";
+const USER = "/api/v1/admin/user/";
+const REGION = "/api/v1/admin/district/";
+const REGIONS = "/api/v1/admin/region/";
+const DISTRICT = "/api/v1/admin/district/";
 
-export { BASE_URL, ENDP_POSTS };
+export { BASE_URL, DISTRICT, LOGIN, REGION, REGIONS, USER };

src/shared/config/api/httpClient.ts

@@ -1,6 +1,7 @@
-import axios from 'axios';
+import i18n from "@/shared/config/i18n";
-import { BASE_URL } from './URLs';
+import { getToken } from "@/shared/lib/cookie";
-import i18n from '@/shared/config/i18n';
+import axios from "axios";
+import { BASE_URL } from "./URLs";
 
 const httpClient = axios.create({
   baseURL: BASE_URL,
@@ -13,11 +14,11 @@ httpClient.interceptors.request.use(
 
     // Language configs
     const language = i18n.language;
-    config.headers['Accept-Language'] = language;
+    config.headers["Accept-Language"] = language;
-    // const accessToken = localStorage.getItem('accessToken');
+    const accessToken = getToken();
-    // if (accessToken) {
+    if (accessToken) {
-    //   config.headers['Authorization'] = `Bearer ${accessToken}`;
+      config.headers["Authorization"] = `Bearer ${accessToken}`;
-    // }
+    }
 
     return config;
   },
@@ -27,7 +28,7 @@ httpClient.interceptors.request.use(
 httpClient.interceptors.response.use(
   (response) => response,
   (error) => {
-    console.error('API error:', error);
+    console.error("API error:", error);
     return Promise.reject(error);
   },
 );

src/shared/config/api/test/test.request.ts

@@ -1,14 +0,0 @@
-import httpClient from '@/shared/config/api/httpClient';
-import type { TestApiType } from '@/shared/config/api/test/test.model';
-import type { ReqWithPagination } from '@/shared/config/api/types';
-import { ENDP_POSTS } from '@/shared/config/api/URLs';
-import type { AxiosResponse } from 'axios';
-
-const getPosts = async (
-  pagination?: ReqWithPagination,
-): Promise<AxiosResponse<TestApiType>> => {
-  const response = await httpClient.get(ENDP_POSTS, { params: pagination });
-  return response;
-};
-
-export { getPosts };

src/shared/lib/cookie.ts

@@ -0,0 +1,15 @@
+import cookie from "js-cookie";
+
+const token = "access_meridyn_admin";
+
+export const saveToken = (value: string) => {
+  cookie.set(token, value);
+};
+
+export const getToken = () => {
+  return cookie.get(token);
+};
+
+export const removeToken = () => {
+  cookie.remove(token);
+};

src/shared/ui/command.tsx

@@ -0,0 +1,184 @@
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+import { cn } from "@/shared/lib/utils";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/shared/ui/dialog";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+  className?: string;
+  showCloseButton?: boolean;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

src/widgets/sidebar-layout/index.tsx

@@ -16,6 +16,7 @@ import {
 } from "lucide-react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 
+import { removeToken } from "@/shared/lib/cookie";
 import { Button } from "@/shared/ui/button";
 import {
   Sidebar,
@@ -147,7 +148,10 @@ export function AppSidebar() {
         <Button
           variant={"ghost"}
           className="w-fit text-red-500 hover:text-red-500 cursor-pointer"
-          onClick={() => navigate("/")}
+          onClick={() => {
+            navigate("/");
+            removeToken();
+          }}
         >
           <LogOut />
           <p>Chiqish</p>

src/widgets/welcome/ui/welcome.tsx

@@ -1,17 +1,8 @@
-import { getPosts } from '@/shared/config/api/test/test.request';
+import LangToggle from "@/widgets/lang-toggle/ui/lang-toggle";
-import LangToggle from '@/widgets/lang-toggle/ui/lang-toggle';
+import ModeToggle from "@/widgets/theme-toggle/ui/theme-toggle";
-import ModeToggle from '@/widgets/theme-toggle/ui/theme-toggle';
+import GitHubButton from "react-github-btn";
-import { useQuery } from '@tanstack/react-query';
-import GitHubButton from 'react-github-btn';
 
 const Welcome = () => {
-  const { data } = useQuery({
-    queryKey: ['posts'],
-    queryFn: () => getPosts(),
-  });
-
-  console.log('data', data);
-
   return (
     <div className="custom-container h-screen rounded-2xl flex items-center justify-center">
       <div className="flex flex-col gap-2 items-center">