api ulandi
This commit is contained in:
Samandar Turgunboyev
3
.env
3
.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
|
||||
175
package-lock.json
generated
175
package-lock.json
generated
@@ -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==",
|
||||
"dev": true
|
||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||
},
|
||||
"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",
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -7,7 +7,7 @@ const App = () => {
|
||||
return (
|
||||
<MainProvider>
|
||||
<AppRouter />
|
||||
<Toaster />
|
||||
<Toaster richColors={true} position="top-center" />
|
||||
</MainProvider>
|
||||
);
|
||||
};
|
||||
|
||||
20
src/LoginLayout.tsx
Normal file
20
src/LoginLayout.tsx
Normal file
@@ -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;
|
||||
22
src/features/auth/lib/api.ts
Normal file
22
src/features/auth/lib/api.ts
Normal file
@@ -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;
|
||||
},
|
||||
};
|
||||
160
src/features/auth/ui/AuthLogin.tsx
Normal file
160
src/features/auth/ui/AuthLogin.tsx
Normal file
@@ -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;
|
||||
42
src/features/districts/lib/api.ts
Normal file
42
src/features/districts/lib/api.ts
Normal file
@@ -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;
|
||||
},
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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 {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
|
||||
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;
|
||||
setDistricts: Dispatch<SetStateAction<District[]>>;
|
||||
initialValues: DistrictListData | null;
|
||||
setDialogOpen: Dispatch<SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
export default function AddDistrict({
|
||||
initialValues,
|
||||
setDistricts,
|
||||
setDialogOpen,
|
||||
}: Props) {
|
||||
const [load, setLoad] = useState<boolean>(false);
|
||||
export default function AddDistrict({ initialValues, setDialogOpen }: Props) {
|
||||
const [openUser, setOpenUser] = useState<boolean>(false);
|
||||
const [userSearch, setUserSearch] = useState<string>("");
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
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(() => {
|
||||
setDistricts((prev) =>
|
||||
prev.map((d) =>
|
||||
d.id === initialValues.id
|
||||
? {
|
||||
...d,
|
||||
name: values.name,
|
||||
user: selectedUser,
|
||||
}
|
||||
: d,
|
||||
),
|
||||
);
|
||||
setDialogOpen(false);
|
||||
setLoad(false);
|
||||
}, 2000);
|
||||
update({
|
||||
id: initialValues.id,
|
||||
body: {
|
||||
name: values.name,
|
||||
user: Number(values.userId),
|
||||
},
|
||||
});
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
setDistricts((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id: prev.length ? prev[prev.length - 1].id + 1 : 1,
|
||||
name: values.name,
|
||||
user: selectedUser,
|
||||
},
|
||||
]);
|
||||
setDialogOpen(false);
|
||||
setLoad(false);
|
||||
}, 2000);
|
||||
mutate({ name: values.name, user_id: Number(values.userId) });
|
||||
}
|
||||
}
|
||||
|
||||
@@ -109,36 +138,100 @@ export default function AddDistrict({
|
||||
<FormField
|
||||
name="userId"
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label className="text-md">Kim qo‘shgan</Label>
|
||||
<FormControl>
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<SelectTrigger className="w-full !h-12">
|
||||
<SelectValue placeholder="Foydalanuvchi tanlang" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{FakeUserList.map((u) => (
|
||||
<SelectItem key={u.id} value={String(u.id)}>
|
||||
{u.firstName} {u.lastName}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
render={({ field }) => {
|
||||
const selectedUser = user?.find(
|
||||
(u) => String(u.id) === field.value,
|
||||
);
|
||||
return (
|
||||
<FormItem className="flex flex-col">
|
||||
<Label className="text-md">Foydalanuvchi</Label>
|
||||
|
||||
<Popover open={openUser} onOpenChange={setOpenUser}>
|
||||
<PopoverTrigger asChild>
|
||||
<FormControl>
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={openUser}
|
||||
className={cn(
|
||||
"w-full h-12 justify-between",
|
||||
!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 className="w-full h-12 bg-blue-700 hover:bg-blue-700 cursor-pointer">
|
||||
{load ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 bg-blue-700 hover:bg-blue-800"
|
||||
disabled={isPending || updatePending}
|
||||
>
|
||||
{isPending || updatePending ? (
|
||||
<Loader2 className="h-4 w-4 animate-spin" />
|
||||
) : initialValues ? (
|
||||
"Tahrirlash"
|
||||
) : (
|
||||
"Qo‘shish"
|
||||
"Qo'shish"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
90
src/features/districts/ui/DeleteDiscrit.tsx
Normal file
90
src/features/districts/ui/DeleteDiscrit.tsx
Normal file
@@ -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;
|
||||
@@ -1,194 +1,83 @@
|
||||
import { fakeDistrict, type District } 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 { discrit_api } from "@/features/districts/lib/api";
|
||||
import { type DistrictListData } from "@/features/districts/lib/data";
|
||||
import DeleteDiscrit from "@/features/districts/ui/DeleteDiscrit";
|
||||
import Filter from "@/features/districts/ui/Filter";
|
||||
import PaginationDistrict from "@/features/districts/ui/PaginationDistrict";
|
||||
import TableDistrict from "@/features/districts/ui/TableDistrict";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
|
||||
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) => {
|
||||
return (
|
||||
d.name.toLowerCase().includes(search.toLowerCase()) &&
|
||||
`${d.user.firstName} ${d.user.lastName}`
|
||||
.toLowerCase()
|
||||
.includes(userSearch.toLowerCase())
|
||||
);
|
||||
});
|
||||
const [disricDelete, setDiscritDelete] = useState<DistrictListData | null>(
|
||||
null,
|
||||
);
|
||||
const [opneDelete, setOpenDelete] = useState<boolean>(false);
|
||||
|
||||
function deleteDistrict(id: number) {
|
||||
setDistricts((prev) => prev.filter((d) => d.id !== id));
|
||||
}
|
||||
const handleDelete = (user: DistrictListData) => {
|
||||
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">
|
||||
<Input
|
||||
placeholder="Tuman nomi bo‘yicha qidirish..."
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
className="max-w-sm h-12"
|
||||
/>
|
||||
|
||||
<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>
|
||||
<Filter
|
||||
search={search}
|
||||
setSearch={setSearch}
|
||||
dialogOpen={dialogOpen}
|
||||
editing={editingDistrict}
|
||||
setDialogOpen={setDialogOpen}
|
||||
setEditing={setEditingDistrict}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Tuman nomi</TableHead>
|
||||
<TableHead>Kim qo‘shgan</TableHead>
|
||||
<TableHead className="text-right">Harakatlar</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableDistrict
|
||||
data={data ? data.results : []}
|
||||
isError={isError}
|
||||
isLoading={isLoading}
|
||||
setDialogOpen={setDialogOpen}
|
||||
setEditingDistrict={setEditingDistrict}
|
||||
handleDelete={handleDelete}
|
||||
currentPage={currentPage}
|
||||
/>
|
||||
|
||||
<TableBody>
|
||||
{filtered.map((d) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell>{d.id}</TableCell>
|
||||
<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>
|
||||
<PaginationDistrict
|
||||
currentPage={currentPage}
|
||||
setCurrentPage={setCurrentPage}
|
||||
totalPages={totalPages}
|
||||
/>
|
||||
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => deleteDistrict(d.id)}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<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>
|
||||
<DeleteDiscrit
|
||||
discrit={disricDelete}
|
||||
setDiscritDelete={setDiscritDelete}
|
||||
opneDelete={opneDelete}
|
||||
setOpenDelete={setOpenDelete}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
65
src/features/districts/ui/Filter.tsx
Normal file
65
src/features/districts/ui/Filter.tsx
Normal file
@@ -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;
|
||||
57
src/features/districts/ui/PaginationDistrict.tsx
Normal file
57
src/features/districts/ui/PaginationDistrict.tsx
Normal file
@@ -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;
|
||||
109
src/features/districts/ui/TableDistrict.tsx
Normal file
109
src/features/districts/ui/TableDistrict.tsx
Normal file
@@ -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;
|
||||
14
src/features/region/lib/api.ts
Normal file
14
src/features/region/lib/api.ts
Normal file
@@ -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 });
|
||||
},
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
41
src/features/users/lib/api.ts
Normal file
41
src/features/users/lib/api.ts
Normal file
@@ -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;
|
||||
},
|
||||
};
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,9 @@
|
||||
import type { User } from "@/features/users/lib/data";
|
||||
import { user_api } from "@/features/users/lib/api";
|
||||
import type {
|
||||
UserCreateReq,
|
||||
UserListData,
|
||||
UserUpdateReq,
|
||||
} from "@/features/users/lib/data";
|
||||
import { AddedUser } from "@/features/users/lib/form";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
@@ -18,60 +23,83 @@ import {
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import type { AxiosError } from "axios";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import type z from "zod";
|
||||
|
||||
interface UserFormProps {
|
||||
initialData?: User | null;
|
||||
setUsers: React.Dispatch<React.SetStateAction<User[]>>;
|
||||
initialData: UserListData | null;
|
||||
setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||
}
|
||||
|
||||
const AddUsers = ({ initialData, setUsers, setDialogOpen }: UserFormProps) => {
|
||||
const [load, setLoad] = useState(false);
|
||||
const AddUsers = ({ initialData, setDialogOpen }: UserFormProps) => {
|
||||
const form = useForm<z.infer<typeof AddedUser>>({
|
||||
resolver: zodResolver(AddedUser),
|
||||
defaultValues: {
|
||||
firstName: initialData?.firstName || "",
|
||||
lastName: initialData?.lastName || "",
|
||||
region: initialData?.region || "",
|
||||
isActive: initialData ? String(initialData.isActive) : "true",
|
||||
firstName: initialData?.first_name || "",
|
||||
lastName: initialData?.last_name || "",
|
||||
region: initialData?.region.name || "",
|
||||
isActive: initialData ? String(initialData.is_active) : "true",
|
||||
},
|
||||
});
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { mutate: update, isPending } = useMutation({
|
||||
mutationFn: ({ body, id }: { id: number; body: UserUpdateReq }) =>
|
||||
user_api.update({ body, id }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["user_list"] });
|
||||
toast.success(`Foydalanuvchi tahrirlandi`);
|
||||
setDialogOpen(false);
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const errMessage = err.response?.data as { message: string };
|
||||
const messageText = errMessage.message;
|
||||
toast.error(messageText || "Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: create, isPending: createPending } = useMutation({
|
||||
mutationFn: (body: UserCreateReq) => user_api.create(body),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["user_list"] });
|
||||
toast.success(`Foydalanuvchi qo'shildi`);
|
||||
setDialogOpen(false);
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const errMessage = err.response?.data as { message: string };
|
||||
const messageText = errMessage.message;
|
||||
toast.error(messageText || "Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
function onSubmit(values: z.infer<typeof AddedUser>) {
|
||||
setLoad(true);
|
||||
if (initialData) {
|
||||
setTimeout(() => {
|
||||
setUsers((prev) =>
|
||||
prev.map((user) =>
|
||||
user.id === initialData.id
|
||||
? {
|
||||
...user,
|
||||
...values,
|
||||
isActive: values.isActive === "true" ? true : false,
|
||||
}
|
||||
: user,
|
||||
),
|
||||
);
|
||||
setLoad(false);
|
||||
setDialogOpen(false);
|
||||
}, 2000);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
setUsers((prev) => [
|
||||
...prev,
|
||||
{
|
||||
id: prev.length ? prev[prev.length - 1].id + 1 : 1,
|
||||
...values,
|
||||
isActive: values.isActive === "true" ? true : false,
|
||||
},
|
||||
]);
|
||||
setLoad(false);
|
||||
setDialogOpen(false);
|
||||
}, 2000);
|
||||
update({
|
||||
body: {
|
||||
first_name: values.firstName,
|
||||
is_active: values.isActive === "true" ? true : false,
|
||||
last_name: values.lastName,
|
||||
region: Number(values.region),
|
||||
},
|
||||
id: initialData.id,
|
||||
});
|
||||
} else if (initialData === null) {
|
||||
create({
|
||||
first_name: values.firstName,
|
||||
is_active: values.isActive === "true" ? true : false,
|
||||
last_name: values.lastName,
|
||||
region_id: Number(values.region),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -126,9 +154,9 @@ const AddUsers = ({ initialData, setUsers, setDialogOpen }: UserFormProps) => {
|
||||
<SelectValue placeholder="Hududni tanlang" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Toshkent">Toshkent</SelectItem>
|
||||
<SelectItem value="Samarqand">Samarqand</SelectItem>
|
||||
<SelectItem value="Bekobod">Bekobod</SelectItem>
|
||||
<SelectItem value="1">Toshkent</SelectItem>
|
||||
<SelectItem value="2">Samarqand</SelectItem>
|
||||
<SelectItem value="3">Bekobod</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
@@ -166,7 +194,7 @@ const AddUsers = ({ initialData, setUsers, setDialogOpen }: UserFormProps) => {
|
||||
type="submit"
|
||||
className="w-full h-12 text-lg rounded-lg bg-blue-600 hover:bg-blue-600 cursor-pointer"
|
||||
>
|
||||
{load ? (
|
||||
{isPending || createPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
) : initialData ? (
|
||||
"Saqlash"
|
||||
|
||||
90
src/features/users/ui/DeleteUser.tsx
Normal file
90
src/features/users/ui/DeleteUser.tsx
Normal file
@@ -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;
|
||||
202
src/features/users/ui/Filter.tsx
Normal file
202
src/features/users/ui/Filter.tsx
Normal file
@@ -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;
|
||||
53
src/features/users/ui/Pagination.tsx
Normal file
53
src/features/users/ui/Pagination.tsx
Normal file
@@ -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;
|
||||
202
src/features/users/ui/UserTable.tsx
Normal file
202
src/features/users/ui/UserTable.tsx
Normal file
@@ -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;
|
||||
@@ -1,292 +1,107 @@
|
||||
import SidebarLayout from "@/SidebarLayout";
|
||||
import { FakeUserList, type User } from "@/features/users/lib/data";
|
||||
import AddUsers from "@/features/users/ui/AddUsers";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/ui/table";
|
||||
import clsx from "clsx";
|
||||
import { ChevronLeft, ChevronRight, Edit, Plus, Trash } from "lucide-react";
|
||||
import { useMemo, useState } from "react";
|
||||
import type { RegionListResData } from "@/features/region/lib/data";
|
||||
import { user_api } from "@/features/users/lib/api";
|
||||
import type { UserListData } from "@/features/users/lib/data";
|
||||
import DeleteUser from "@/features/users/ui/DeleteUser";
|
||||
import Filter from "@/features/users/ui/Filter";
|
||||
import Pagination from "@/features/users/ui/Pagination";
|
||||
import UserTable from "@/features/users/ui/UserTable";
|
||||
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
|
||||
const UsersList = () => {
|
||||
const [users, setUsers] = useState<User[]>(FakeUserList);
|
||||
|
||||
const [editingUser, setEditingUser] = useState<User | null>(null);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
||||
const [editingUser, setEditingUser] = useState<UserListData | null>(null);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [statusFilter, setStatusFilter] = useState<
|
||||
"all" | "active" | "inactive"
|
||||
>("all");
|
||||
const [regionFilter, setRegionFilter] = useState<string>("all");
|
||||
|
||||
// Pagination state
|
||||
const [regionValue, setRegionValue] = useState<RegionListResData | null>(
|
||||
null,
|
||||
);
|
||||
const limit = 20;
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const pageSize = 5;
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
setUsers(users.filter((u) => u.id !== id));
|
||||
};
|
||||
|
||||
// Filter & search users
|
||||
const filteredUsers = useMemo(() => {
|
||||
return users.filter((user) => {
|
||||
const matchesSearch =
|
||||
user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
user.lastName.toLowerCase().includes(searchTerm.toLowerCase());
|
||||
|
||||
const matchesStatus =
|
||||
statusFilter === "all" ||
|
||||
(statusFilter === "active" && user.isActive) ||
|
||||
(statusFilter === "inactive" && !user.isActive);
|
||||
|
||||
const matchesRegion =
|
||||
regionFilter === "all" || user.region === regionFilter;
|
||||
|
||||
return matchesSearch && matchesStatus && matchesRegion;
|
||||
});
|
||||
}, [users, searchTerm, statusFilter, regionFilter]);
|
||||
|
||||
const totalPages = Math.ceil(filteredUsers.length / pageSize);
|
||||
const paginatedUsers = filteredUsers.slice(
|
||||
(currentPage - 1) * pageSize,
|
||||
currentPage * pageSize,
|
||||
const [statusFilter, setStatusFilter] = useState<"all" | "true" | "false">(
|
||||
"all",
|
||||
);
|
||||
|
||||
// Hududlarni filter qilish uchun
|
||||
const regions = Array.from(new Set(users.map((u) => u.region)));
|
||||
const [userDelete, setUserDelete] = useState<UserListData | null>(null);
|
||||
const [opneDelete, setOpenDelete] = useState<boolean>(false);
|
||||
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ["user_list", currentPage, statusFilter, regionValue, searchTerm],
|
||||
queryFn: () => {
|
||||
const params: {
|
||||
limit?: number;
|
||||
offset?: number;
|
||||
search?: string;
|
||||
is_active?: boolean | string;
|
||||
region_id?: number;
|
||||
} = {
|
||||
limit,
|
||||
offset: (currentPage - 1) * limit,
|
||||
search: searchTerm,
|
||||
};
|
||||
|
||||
if (regionValue !== null) {
|
||||
params.region_id = Number(regionValue.id);
|
||||
}
|
||||
|
||||
if (statusFilter !== "all") {
|
||||
params.is_active = statusFilter;
|
||||
}
|
||||
|
||||
return user_api.list(params);
|
||||
},
|
||||
});
|
||||
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
|
||||
const handleDelete = (user: UserListData) => {
|
||||
setUserDelete(user);
|
||||
setOpenDelete(true);
|
||||
};
|
||||
|
||||
const totalPages = data ? Math.ceil(data.data.data.count / limit) : 1;
|
||||
|
||||
return (
|
||||
<SidebarLayout>
|
||||
<div className="flex flex-col h-full p-10 w-full">
|
||||
{/* Top Controls */}
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
|
||||
<h1 className="text-2xl font-bold">Foydalanuvchilar ro'yxati</h1>
|
||||
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Ism yoki Familiyasi bo'yicha qidirish"
|
||||
className="border rounded px-3 py-2 text-sm w-64"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
|
||||
<Select
|
||||
value={statusFilter}
|
||||
onValueChange={(val) =>
|
||||
setStatusFilter(val as "all" | "active" | "inactive")
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue placeholder="Holati" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Barchasi</SelectItem>
|
||||
<SelectItem value="active">Faol</SelectItem>
|
||||
<SelectItem value="inactive">Faol emas</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Select
|
||||
value={regionFilter}
|
||||
onValueChange={(val) => setRegionFilter(val)}
|
||||
>
|
||||
<SelectTrigger className="w-40">
|
||||
<SelectValue placeholder="Hududi" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">Barchasi</SelectItem>
|
||||
{regions.map((r) => (
|
||||
<SelectItem key={r} value={r}>
|
||||
{r}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
variant="default"
|
||||
className="bg-blue-500 cursor-pointer hover:bg-blue-500"
|
||||
onClick={() => setEditingUser(null)}
|
||||
>
|
||||
<Plus className="!h-5 !w-5" /> Qo'shish
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editingUser
|
||||
? "Foydalanuvchini tahrirlash"
|
||||
: "Foydalanuvchi qo'shish"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<AddUsers
|
||||
initialData={editingUser}
|
||||
setUsers={setUsers}
|
||||
setDialogOpen={setDialogOpen}
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
<Filter
|
||||
searchTerm={searchTerm}
|
||||
setSearchTerm={setSearchTerm}
|
||||
setStatusFilter={setStatusFilter}
|
||||
statusFilter={statusFilter}
|
||||
regionValue={regionValue}
|
||||
setRegionValue={setRegionValue}
|
||||
dialogOpen={dialogOpen}
|
||||
setDialogOpen={setDialogOpen}
|
||||
editingUser={editingUser}
|
||||
setEditingUser={setEditingUser}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="text-[16px] text-center">
|
||||
<TableHead className="text-start">ID</TableHead>
|
||||
<TableHead className="text-start">Ismi</TableHead>
|
||||
<TableHead className="text-start">Familiyasi</TableHead>
|
||||
<TableHead className="text-start">Hududi</TableHead>
|
||||
<TableHead className="text-center">Holati</TableHead>
|
||||
<TableHead className="text-right">Harakatlar</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{paginatedUsers.length > 0 ? (
|
||||
paginatedUsers.map((user) => (
|
||||
<TableRow key={user.id} className="text-[14px] text-start">
|
||||
<TableCell>{user.id}</TableCell>
|
||||
<TableCell>{user.firstName}</TableCell>
|
||||
<TableCell>{user.lastName}</TableCell>
|
||||
<TableCell>{user.region}</TableCell>
|
||||
<TableCell>
|
||||
<Select
|
||||
value={user.isActive ? "active" : "inactive"}
|
||||
onValueChange={(val) => {
|
||||
setUsers(
|
||||
users.map((u) =>
|
||||
u.id === user.id
|
||||
? { ...u, isActive: val === "active" }
|
||||
: u,
|
||||
),
|
||||
);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger
|
||||
className={clsx(
|
||||
"w-[180px] mx-auto",
|
||||
user.isActive
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-red-100 text-red-800",
|
||||
)}
|
||||
>
|
||||
<SelectValue placeholder="Holati" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem
|
||||
value="active"
|
||||
className="text-green-500 hover:!text-green-500"
|
||||
>
|
||||
Faol
|
||||
</SelectItem>
|
||||
<SelectItem
|
||||
value="inactive"
|
||||
className="text-red-500 hover:!text-red-500"
|
||||
>
|
||||
Faol emas
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</TableCell>
|
||||
<TableCell className="flex gap-2 justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
setEditingUser(user);
|
||||
setDialogOpen(true);
|
||||
}}
|
||||
className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => handleDelete(user.id)}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={6} className="text-center py-4 text-lg">
|
||||
Foydalanuvchilar topilmadi.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
<UserTable
|
||||
data={data}
|
||||
isLoading={isLoading}
|
||||
setEditingUser={setEditingUser}
|
||||
isError={isError}
|
||||
setDialogOpen={setDialogOpen}
|
||||
handleDelete={handleDelete}
|
||||
currentPage={currentPage}
|
||||
/>
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
setCurrentPage={setCurrentPage}
|
||||
totalPages={totalPages}
|
||||
/>
|
||||
|
||||
{/* Pagination */}
|
||||
<div className="mt-2 sticky bottom-0 bg-white flex justify-end gap-2 z-10 py-2 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="cursor-pointer"
|
||||
disabled={currentPage === 1}
|
||||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
||||
>
|
||||
<ChevronLeft />
|
||||
</Button>
|
||||
{Array.from({ length: totalPages }, (_, i) => (
|
||||
<Button
|
||||
key={i}
|
||||
variant={currentPage === i + 1 ? "default" : "outline"}
|
||||
size="icon"
|
||||
className={clsx(
|
||||
currentPage === i + 1
|
||||
? "bg-blue-500 hover:bg-blue-500"
|
||||
: " bg-none hover:bg-blue-200",
|
||||
"cursor-pointer",
|
||||
)}
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
>
|
||||
{i + 1}
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="cursor-pointer"
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() =>
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
||||
}
|
||||
>
|
||||
<ChevronRight />
|
||||
</Button>
|
||||
</div>
|
||||
<DeleteUser
|
||||
opneDelete={opneDelete}
|
||||
setOpenDelete={setOpenDelete}
|
||||
userDelete={userDelete}
|
||||
setUserDelete={setUserDelete}
|
||||
/>
|
||||
</div>
|
||||
</SidebarLayout>
|
||||
);
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
|
||||
@@ -1,166 +1,10 @@
|
||||
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 { 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";
|
||||
import AuthLogin from "@/features/auth/ui/AuthLogin";
|
||||
import LoginLayout from "@/LoginLayout";
|
||||
|
||||
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">
|
||||
<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={loading}
|
||||
>
|
||||
{loading ? <Loader2 className="animate-spin" /> : "Kirish"}
|
||||
</Button>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
<LoginLayout>
|
||||
<AuthLogin />
|
||||
</LoginLayout>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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 };
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import axios from 'axios';
|
||||
import { BASE_URL } from './URLs';
|
||||
import i18n from '@/shared/config/i18n';
|
||||
import i18n from "@/shared/config/i18n";
|
||||
import { getToken } from "@/shared/lib/cookie";
|
||||
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;
|
||||
// const accessToken = localStorage.getItem('accessToken');
|
||||
// if (accessToken) {
|
||||
// config.headers['Authorization'] = `Bearer ${accessToken}`;
|
||||
// }
|
||||
config.headers["Accept-Language"] = language;
|
||||
const accessToken = getToken();
|
||||
if (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);
|
||||
},
|
||||
);
|
||||
|
||||
@@ -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 };
|
||||
15
src/shared/lib/cookie.ts
Normal file
15
src/shared/lib/cookie.ts
Normal file
@@ -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);
|
||||
};
|
||||
184
src/shared/ui/command.tsx
Normal file
184
src/shared/ui/command.tsx
Normal file
@@ -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,
|
||||
};
|
||||
@@ -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>
|
||||
|
||||
@@ -1,17 +1,8 @@
|
||||
import { getPosts } from '@/shared/config/api/test/test.request';
|
||||
import LangToggle from '@/widgets/lang-toggle/ui/lang-toggle';
|
||||
import ModeToggle from '@/widgets/theme-toggle/ui/theme-toggle';
|
||||
import { useQuery } from '@tanstack/react-query';
|
||||
import GitHubButton from 'react-github-btn';
|
||||
import LangToggle from "@/widgets/lang-toggle/ui/lang-toggle";
|
||||
import ModeToggle from "@/widgets/theme-toggle/ui/theme-toggle";
|
||||
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">
|
||||
|
||||
Reference in New Issue
Block a user