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",
|
"axios": "^1.9.0",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
"cmdk": "^1.1.1",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
"dayjs": "^1.11.18",
|
"dayjs": "^1.11.18",
|
||||||
"i18next": "^25.5.2",
|
"i18next": "^25.5.2",
|
||||||
"i18next-browser-languagedetector": "^8.2.0",
|
"i18next-browser-languagedetector": "^8.2.0",
|
||||||
|
"js-cookie": "^3.0.5",
|
||||||
"lucide-react": "^0.544.0",
|
"lucide-react": "^0.544.0",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"react": "^19.1.1",
|
"react": "^19.1.1",
|
||||||
@@ -37,6 +39,7 @@
|
|||||||
"react-hook-form": "^7.66.1",
|
"react-hook-form": "^7.66.1",
|
||||||
"react-i18next": "^15.7.3",
|
"react-i18next": "^15.7.3",
|
||||||
"react-router-dom": "^7.9.6",
|
"react-router-dom": "^7.9.6",
|
||||||
|
"socket.io-client": "^4.8.1",
|
||||||
"sonner": "^2.0.7",
|
"sonner": "^2.0.7",
|
||||||
"tailwind-merge": "^3.3.1",
|
"tailwind-merge": "^3.3.1",
|
||||||
"tailwindcss": "^4.1.13",
|
"tailwindcss": "^4.1.13",
|
||||||
@@ -44,6 +47,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.25.0",
|
"@eslint/js": "^9.25.0",
|
||||||
|
"@types/js-cookie": "^3.0.6",
|
||||||
"@types/node": "^22.15.21",
|
"@types/node": "^22.15.21",
|
||||||
"@types/react": "^19.1.2",
|
"@types/react": "^19.1.2",
|
||||||
"@types/react-dom": "^19.1.2",
|
"@types/react-dom": "^19.1.2",
|
||||||
@@ -2332,6 +2336,12 @@
|
|||||||
"win32"
|
"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": {
|
"node_modules/@standard-schema/utils": {
|
||||||
"version": "0.3.0",
|
"version": "0.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
|
||||||
@@ -2656,6 +2666,13 @@
|
|||||||
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
|
||||||
"dev": true
|
"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": {
|
"node_modules/@types/json-schema": {
|
||||||
"version": "7.0.15",
|
"version": "7.0.15",
|
||||||
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
|
||||||
@@ -3259,6 +3276,22 @@
|
|||||||
"node": ">=6"
|
"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": {
|
"node_modules/color-convert": {
|
||||||
"version": "2.0.1",
|
"version": "2.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||||
@@ -3434,6 +3467,45 @@
|
|||||||
"integrity": "sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==",
|
"integrity": "sha512-lb49vf1Xzfx080OKA0o6l8DQQpV+6Vg95zyCJX9VB/BqKYlhG7N4wgROUUHRA+ZPUefLnteQOad7z1kT2bV7bg==",
|
||||||
"dev": true
|
"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": {
|
"node_modules/enhanced-resolve": {
|
||||||
"version": "5.18.3",
|
"version": "5.18.3",
|
||||||
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
|
"resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.18.3.tgz",
|
||||||
@@ -4224,6 +4296,15 @@
|
|||||||
"jiti": "lib/jiti-cli.mjs"
|
"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": {
|
"node_modules/js-tokens": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||||
@@ -4725,8 +4806,7 @@
|
|||||||
"node_modules/ms": {
|
"node_modules/ms": {
|
||||||
"version": "2.1.3",
|
"version": "2.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
|
||||||
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
|
"integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"node_modules/nano-spawn": {
|
"node_modules/nano-spawn": {
|
||||||
"version": "1.0.3",
|
"version": "1.0.3",
|
||||||
@@ -5379,6 +5459,68 @@
|
|||||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
"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": {
|
"node_modules/sonner": {
|
||||||
"version": "2.0.7",
|
"version": "2.0.7",
|
||||||
"resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
|
"resolved": "https://registry.npmjs.org/sonner/-/sonner-2.0.7.tgz",
|
||||||
@@ -5947,6 +6089,35 @@
|
|||||||
"url": "https://github.com/sponsors/sindresorhus"
|
"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": {
|
"node_modules/yallist": {
|
||||||
"version": "3.1.1",
|
"version": "3.1.1",
|
||||||
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
"resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
|
||||||
|
|||||||
@@ -28,10 +28,12 @@
|
|||||||
"axios": "^1.9.0",
|
"axios": "^1.9.0",
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
|
"cmdk": "^1.1.1",
|
||||||
"date-fns": "^4.1.0",
|
"date-fns": "^4.1.0",
|
||||||
"dayjs": "^1.11.18",
|
"dayjs": "^1.11.18",
|
||||||
"i18next": "^25.5.2",
|
"i18next": "^25.5.2",
|
||||||
"i18next-browser-languagedetector": "^8.2.0",
|
"i18next-browser-languagedetector": "^8.2.0",
|
||||||
|
"js-cookie": "^3.0.5",
|
||||||
"lucide-react": "^0.544.0",
|
"lucide-react": "^0.544.0",
|
||||||
"next-themes": "^0.4.6",
|
"next-themes": "^0.4.6",
|
||||||
"react": "^19.1.1",
|
"react": "^19.1.1",
|
||||||
@@ -41,6 +43,7 @@
|
|||||||
"react-hook-form": "^7.66.1",
|
"react-hook-form": "^7.66.1",
|
||||||
"react-i18next": "^15.7.3",
|
"react-i18next": "^15.7.3",
|
||||||
"react-router-dom": "^7.9.6",
|
"react-router-dom": "^7.9.6",
|
||||||
|
"socket.io-client": "^4.8.1",
|
||||||
"sonner": "^2.0.7",
|
"sonner": "^2.0.7",
|
||||||
"tailwind-merge": "^3.3.1",
|
"tailwind-merge": "^3.3.1",
|
||||||
"tailwindcss": "^4.1.13",
|
"tailwindcss": "^4.1.13",
|
||||||
@@ -48,6 +51,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@eslint/js": "^9.25.0",
|
"@eslint/js": "^9.25.0",
|
||||||
|
"@types/js-cookie": "^3.0.6",
|
||||||
"@types/node": "^22.15.21",
|
"@types/node": "^22.15.21",
|
||||||
"@types/react": "^19.1.2",
|
"@types/react": "^19.1.2",
|
||||||
"@types/react-dom": "^19.1.2",
|
"@types/react-dom": "^19.1.2",
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ const App = () => {
|
|||||||
return (
|
return (
|
||||||
<MainProvider>
|
<MainProvider>
|
||||||
<AppRouter />
|
<AppRouter />
|
||||||
<Toaster />
|
<Toaster richColors={true} position="top-center" />
|
||||||
</MainProvider>
|
</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],
|
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 { 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 { Button } from "@/shared/ui/button";
|
||||||
|
import {
|
||||||
|
Command,
|
||||||
|
CommandEmpty,
|
||||||
|
CommandGroup,
|
||||||
|
CommandInput,
|
||||||
|
CommandItem,
|
||||||
|
CommandList,
|
||||||
|
} from "@/shared/ui/command";
|
||||||
import {
|
import {
|
||||||
Form,
|
Form,
|
||||||
FormControl,
|
FormControl,
|
||||||
@@ -11,33 +21,77 @@ import {
|
|||||||
} from "@/shared/ui/form";
|
} from "@/shared/ui/form";
|
||||||
import { Input } from "@/shared/ui/input";
|
import { Input } from "@/shared/ui/input";
|
||||||
import { Label } from "@/shared/ui/label";
|
import { Label } from "@/shared/ui/label";
|
||||||
import {
|
import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/shared/ui/select";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { 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 { useState, type Dispatch, type SetStateAction } from "react";
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
|
import { toast } from "sonner";
|
||||||
import z from "zod";
|
import z from "zod";
|
||||||
|
|
||||||
type FormValues = z.infer<typeof addDistrict>;
|
type FormValues = z.infer<typeof addDistrict>;
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
initialValues: District | null;
|
initialValues: DistrictListData | null;
|
||||||
setDistricts: Dispatch<SetStateAction<District[]>>;
|
|
||||||
setDialogOpen: Dispatch<SetStateAction<boolean>>;
|
setDialogOpen: Dispatch<SetStateAction<boolean>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function AddDistrict({
|
export default function AddDistrict({ initialValues, setDialogOpen }: Props) {
|
||||||
initialValues,
|
const [openUser, setOpenUser] = useState<boolean>(false);
|
||||||
setDistricts,
|
const [userSearch, setUserSearch] = useState<string>("");
|
||||||
setDialogOpen,
|
const queryClient = useQueryClient();
|
||||||
}: Props) {
|
|
||||||
const [load, setLoad] = useState<boolean>(false);
|
const { data: user, isLoading: isUserLoading } = useQuery({
|
||||||
|
queryKey: ["user_list", userSearch],
|
||||||
|
queryFn: () => user_api.list({ search: userSearch }),
|
||||||
|
select(data) {
|
||||||
|
return data.data.data.results;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { mutate, isPending } = useMutation({
|
||||||
|
mutationFn: (body: { name: string; user_id: number }) =>
|
||||||
|
discrit_api.create(body),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.refetchQueries({ queryKey: ["discrit_list"] });
|
||||||
|
toast.success(`Tuman qo'shildi`);
|
||||||
|
setDialogOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err: AxiosError) => {
|
||||||
|
const errMessage = err.response?.data as { message: string };
|
||||||
|
const messageText = errMessage.message;
|
||||||
|
toast.error(messageText || "Xatolik yuz berdi", {
|
||||||
|
richColors: true,
|
||||||
|
position: "top-center",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { mutate: update, isPending: updatePending } = useMutation({
|
||||||
|
mutationFn: ({
|
||||||
|
body,
|
||||||
|
id,
|
||||||
|
}: {
|
||||||
|
id: number;
|
||||||
|
body: { name: string; user: number };
|
||||||
|
}) => discrit_api.update({ body, id }),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.refetchQueries({ queryKey: ["discrit_list"] });
|
||||||
|
toast.success(`Tuman qo'shildi`);
|
||||||
|
setDialogOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err: AxiosError) => {
|
||||||
|
const errMessage = err.response?.data as { message: string };
|
||||||
|
const messageText = errMessage.message;
|
||||||
|
toast.error(messageText || "Xatolik yuz berdi", {
|
||||||
|
richColors: true,
|
||||||
|
position: "top-center",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const form = useForm<FormValues>({
|
const form = useForm<FormValues>({
|
||||||
resolver: zodResolver(addDistrict),
|
resolver: zodResolver(addDistrict),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
@@ -47,41 +101,16 @@ export default function AddDistrict({
|
|||||||
});
|
});
|
||||||
|
|
||||||
function onSubmit(values: FormValues) {
|
function onSubmit(values: FormValues) {
|
||||||
const selectedUser = FakeUserList.find(
|
|
||||||
(u) => u.id === Number(values.userId),
|
|
||||||
);
|
|
||||||
|
|
||||||
if (!selectedUser) return;
|
|
||||||
setLoad(true);
|
|
||||||
if (initialValues) {
|
if (initialValues) {
|
||||||
setTimeout(() => {
|
update({
|
||||||
setDistricts((prev) =>
|
id: initialValues.id,
|
||||||
prev.map((d) =>
|
body: {
|
||||||
d.id === initialValues.id
|
|
||||||
? {
|
|
||||||
...d,
|
|
||||||
name: values.name,
|
name: values.name,
|
||||||
user: selectedUser,
|
user: Number(values.userId),
|
||||||
}
|
|
||||||
: d,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
setDialogOpen(false);
|
|
||||||
setLoad(false);
|
|
||||||
}, 2000);
|
|
||||||
} else {
|
|
||||||
setTimeout(() => {
|
|
||||||
setDistricts((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
id: prev.length ? prev[prev.length - 1].id + 1 : 1,
|
|
||||||
name: values.name,
|
|
||||||
user: selectedUser,
|
|
||||||
},
|
},
|
||||||
]);
|
});
|
||||||
setDialogOpen(false);
|
} else {
|
||||||
setLoad(false);
|
mutate({ name: values.name, user_id: Number(values.userId) });
|
||||||
}, 2000);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -109,36 +138,100 @@ export default function AddDistrict({
|
|||||||
<FormField
|
<FormField
|
||||||
name="userId"
|
name="userId"
|
||||||
control={form.control}
|
control={form.control}
|
||||||
render={({ field }) => (
|
render={({ field }) => {
|
||||||
<FormItem>
|
const selectedUser = user?.find(
|
||||||
<Label className="text-md">Kim qo‘shgan</Label>
|
(u) => String(u.id) === field.value,
|
||||||
|
);
|
||||||
|
return (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<Label className="text-md">Foydalanuvchi</Label>
|
||||||
|
|
||||||
|
<Popover open={openUser} onOpenChange={setOpenUser}>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<Select value={field.value} onValueChange={field.onChange}>
|
<Button
|
||||||
<SelectTrigger className="w-full !h-12">
|
type="button"
|
||||||
<SelectValue placeholder="Foydalanuvchi tanlang" />
|
variant="outline"
|
||||||
</SelectTrigger>
|
role="combobox"
|
||||||
<SelectContent>
|
aria-expanded={openUser}
|
||||||
{FakeUserList.map((u) => (
|
className={cn(
|
||||||
<SelectItem key={u.id} value={String(u.id)}>
|
"w-full h-12 justify-between",
|
||||||
{u.firstName} {u.lastName}
|
!field.value && "text-muted-foreground",
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
)}
|
||||||
|
>
|
||||||
|
{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}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* SUBMIT */}
|
<CommandList>
|
||||||
<Button className="w-full h-12 bg-blue-700 hover:bg-blue-700 cursor-pointer">
|
{isUserLoading ? (
|
||||||
{load ? (
|
<div className="py-6 text-center text-sm">
|
||||||
<Loader2 className="animate-spin" />
|
<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>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<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 ? (
|
) : initialValues ? (
|
||||||
"Tahrirlash"
|
"Tahrirlash"
|
||||||
) : (
|
) : (
|
||||||
"Qo‘shish"
|
"Qo'shish"
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</form>
|
</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 { discrit_api } from "@/features/districts/lib/api";
|
||||||
import AddDistrict from "@/features/districts/ui/AddDistrict";
|
import { type DistrictListData } from "@/features/districts/lib/data";
|
||||||
import { Button } from "@/shared/ui/button";
|
import DeleteDiscrit from "@/features/districts/ui/DeleteDiscrit";
|
||||||
import {
|
import Filter from "@/features/districts/ui/Filter";
|
||||||
Dialog,
|
import PaginationDistrict from "@/features/districts/ui/PaginationDistrict";
|
||||||
DialogContent,
|
import TableDistrict from "@/features/districts/ui/TableDistrict";
|
||||||
DialogHeader,
|
import { useQuery } from "@tanstack/react-query";
|
||||||
DialogTitle,
|
|
||||||
DialogTrigger,
|
|
||||||
} from "@/shared/ui/dialog";
|
|
||||||
import { Input } from "@/shared/ui/input";
|
|
||||||
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from "@/shared/ui/table";
|
|
||||||
import clsx from "clsx";
|
|
||||||
|
|
||||||
import { ChevronLeft, ChevronRight, Edit, Plus, Trash } from "lucide-react";
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
|
|
||||||
const DistrictsList = () => {
|
const DistrictsList = () => {
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const totalPages = 5;
|
|
||||||
|
|
||||||
const [districts, setDistricts] = useState<District[]>(fakeDistrict);
|
|
||||||
|
|
||||||
const [search, setSearch] = useState("");
|
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 [dialogOpen, setDialogOpen] = useState(false);
|
||||||
|
|
||||||
const filtered = districts.filter((d) => {
|
const [disricDelete, setDiscritDelete] = useState<DistrictListData | null>(
|
||||||
return (
|
null,
|
||||||
d.name.toLowerCase().includes(search.toLowerCase()) &&
|
|
||||||
`${d.user.firstName} ${d.user.lastName}`
|
|
||||||
.toLowerCase()
|
|
||||||
.includes(userSearch.toLowerCase())
|
|
||||||
);
|
);
|
||||||
});
|
const [opneDelete, setOpenDelete] = useState<boolean>(false);
|
||||||
|
|
||||||
function deleteDistrict(id: number) {
|
const handleDelete = (user: DistrictListData) => {
|
||||||
setDistricts((prev) => prev.filter((d) => d.id !== id));
|
setDiscritDelete(user);
|
||||||
}
|
setOpenDelete(true);
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col h-full p-10 w-full">
|
<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">
|
<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>
|
<h1 className="text-2xl font-bold">Tumanlar ro‘yxati</h1>
|
||||||
|
|
||||||
<div className="flex gap-4 justify-end">
|
<Filter
|
||||||
<Input
|
search={search}
|
||||||
placeholder="Tuman nomi bo‘yicha qidirish..."
|
setSearch={setSearch}
|
||||||
value={search}
|
dialogOpen={dialogOpen}
|
||||||
onChange={(e) => setSearch(e.target.value)}
|
editing={editingDistrict}
|
||||||
className="max-w-sm h-12"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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}
|
setDialogOpen={setDialogOpen}
|
||||||
|
setEditing={setEditingDistrict}
|
||||||
/>
|
/>
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 overflow-auto">
|
<TableDistrict
|
||||||
<Table>
|
data={data ? data.results : []}
|
||||||
<TableHeader>
|
isError={isError}
|
||||||
<TableRow>
|
isLoading={isLoading}
|
||||||
<TableHead>ID</TableHead>
|
setDialogOpen={setDialogOpen}
|
||||||
<TableHead>Tuman nomi</TableHead>
|
setEditingDistrict={setEditingDistrict}
|
||||||
<TableHead>Kim qo‘shgan</TableHead>
|
handleDelete={handleDelete}
|
||||||
<TableHead className="text-right">Harakatlar</TableHead>
|
currentPage={currentPage}
|
||||||
</TableRow>
|
/>
|
||||||
</TableHeader>
|
|
||||||
|
|
||||||
<TableBody>
|
<PaginationDistrict
|
||||||
{filtered.map((d) => (
|
currentPage={currentPage}
|
||||||
<TableRow key={d.id}>
|
setCurrentPage={setCurrentPage}
|
||||||
<TableCell>{d.id}</TableCell>
|
totalPages={totalPages}
|
||||||
<TableCell>{d.name}</TableCell>
|
/>
|
||||||
<TableCell>
|
|
||||||
{d.user.firstName} {d.user.lastName}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="flex gap-2 justify-end">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setEditing(d);
|
|
||||||
setDialogOpen(true);
|
|
||||||
}}
|
|
||||||
className="bg-blue-500 text-white hover:text-white hover:bg-blue-500 cursor-pointer"
|
|
||||||
>
|
|
||||||
<Edit className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
<Button
|
<DeleteDiscrit
|
||||||
variant="destructive"
|
discrit={disricDelete}
|
||||||
size="sm"
|
setDiscritDelete={setDiscritDelete}
|
||||||
onClick={() => deleteDistrict(d.id)}
|
opneDelete={opneDelete}
|
||||||
className="cursor-pointer"
|
setOpenDelete={setOpenDelete}
|
||||||
>
|
/>
|
||||||
<Trash className="w-4 h-4" />
|
|
||||||
</Button>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{filtered.length === 0 && (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={4} className="text-center py-6">
|
|
||||||
Hech qanday tuman topilmadi
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="mt-2 sticky bottom-0 bg-white flex justify-end gap-2 z-10 py-2 border-t">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
className="cursor-pointer"
|
|
||||||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
|
||||||
>
|
|
||||||
<ChevronLeft />
|
|
||||||
</Button>
|
|
||||||
{Array.from({ length: totalPages }, (_, i) => (
|
|
||||||
<Button
|
|
||||||
key={i}
|
|
||||||
variant={currentPage === i + 1 ? "default" : "outline"}
|
|
||||||
size="icon"
|
|
||||||
className={clsx(
|
|
||||||
currentPage === i + 1
|
|
||||||
? "bg-blue-500 hover:bg-blue-500"
|
|
||||||
: " bg-none hover:bg-blue-200",
|
|
||||||
"cursor-pointer",
|
|
||||||
)}
|
|
||||||
onClick={() => setCurrentPage(i + 1)}
|
|
||||||
>
|
|
||||||
{i + 1}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
onClick={() =>
|
|
||||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
|
||||||
}
|
|
||||||
className="cursor-pointer"
|
|
||||||
>
|
|
||||||
<ChevronRight />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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",
|
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,
|
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 { AddedUser } from "@/features/users/lib/form";
|
||||||
import { Button } from "@/shared/ui/button";
|
import { Button } from "@/shared/ui/button";
|
||||||
import {
|
import {
|
||||||
@@ -18,60 +23,83 @@ import {
|
|||||||
SelectValue,
|
SelectValue,
|
||||||
} from "@/shared/ui/select";
|
} from "@/shared/ui/select";
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
|
import type { AxiosError } from "axios";
|
||||||
import { Loader2 } from "lucide-react";
|
import { Loader2 } from "lucide-react";
|
||||||
import { useState } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
import { useForm } from "react-hook-form";
|
||||||
|
import { toast } from "sonner";
|
||||||
import type z from "zod";
|
import type z from "zod";
|
||||||
|
|
||||||
interface UserFormProps {
|
interface UserFormProps {
|
||||||
initialData?: User | null;
|
initialData: UserListData | null;
|
||||||
setUsers: React.Dispatch<React.SetStateAction<User[]>>;
|
|
||||||
setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
setDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
|
||||||
}
|
}
|
||||||
|
|
||||||
const AddUsers = ({ initialData, setUsers, setDialogOpen }: UserFormProps) => {
|
const AddUsers = ({ initialData, setDialogOpen }: UserFormProps) => {
|
||||||
const [load, setLoad] = useState(false);
|
|
||||||
const form = useForm<z.infer<typeof AddedUser>>({
|
const form = useForm<z.infer<typeof AddedUser>>({
|
||||||
resolver: zodResolver(AddedUser),
|
resolver: zodResolver(AddedUser),
|
||||||
defaultValues: {
|
defaultValues: {
|
||||||
firstName: initialData?.firstName || "",
|
firstName: initialData?.first_name || "",
|
||||||
lastName: initialData?.lastName || "",
|
lastName: initialData?.last_name || "",
|
||||||
region: initialData?.region || "",
|
region: initialData?.region.name || "",
|
||||||
isActive: initialData ? String(initialData.isActive) : "true",
|
isActive: initialData ? String(initialData.is_active) : "true",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const { mutate: update, isPending } = useMutation({
|
||||||
|
mutationFn: ({ body, id }: { id: number; body: UserUpdateReq }) =>
|
||||||
|
user_api.update({ body, id }),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.refetchQueries({ queryKey: ["user_list"] });
|
||||||
|
toast.success(`Foydalanuvchi tahrirlandi`);
|
||||||
|
setDialogOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err: AxiosError) => {
|
||||||
|
const errMessage = err.response?.data as { message: string };
|
||||||
|
const messageText = errMessage.message;
|
||||||
|
toast.error(messageText || "Xatolik yuz berdi", {
|
||||||
|
richColors: true,
|
||||||
|
position: "top-center",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const { mutate: create, isPending: createPending } = useMutation({
|
||||||
|
mutationFn: (body: UserCreateReq) => user_api.create(body),
|
||||||
|
onSuccess: () => {
|
||||||
|
queryClient.refetchQueries({ queryKey: ["user_list"] });
|
||||||
|
toast.success(`Foydalanuvchi qo'shildi`);
|
||||||
|
setDialogOpen(false);
|
||||||
|
},
|
||||||
|
onError: (err: AxiosError) => {
|
||||||
|
const errMessage = err.response?.data as { message: string };
|
||||||
|
const messageText = errMessage.message;
|
||||||
|
toast.error(messageText || "Xatolik yuz berdi", {
|
||||||
|
richColors: true,
|
||||||
|
position: "top-center",
|
||||||
|
});
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
function onSubmit(values: z.infer<typeof AddedUser>) {
|
function onSubmit(values: z.infer<typeof AddedUser>) {
|
||||||
setLoad(true);
|
|
||||||
if (initialData) {
|
if (initialData) {
|
||||||
setTimeout(() => {
|
update({
|
||||||
setUsers((prev) =>
|
body: {
|
||||||
prev.map((user) =>
|
first_name: values.firstName,
|
||||||
user.id === initialData.id
|
is_active: values.isActive === "true" ? true : false,
|
||||||
? {
|
last_name: values.lastName,
|
||||||
...user,
|
region: Number(values.region),
|
||||||
...values,
|
|
||||||
isActive: values.isActive === "true" ? true : false,
|
|
||||||
}
|
|
||||||
: 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,
|
|
||||||
},
|
},
|
||||||
]);
|
id: initialData.id,
|
||||||
setLoad(false);
|
});
|
||||||
setDialogOpen(false);
|
} else if (initialData === null) {
|
||||||
}, 2000);
|
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" />
|
<SelectValue placeholder="Hududni tanlang" />
|
||||||
</SelectTrigger>
|
</SelectTrigger>
|
||||||
<SelectContent>
|
<SelectContent>
|
||||||
<SelectItem value="Toshkent">Toshkent</SelectItem>
|
<SelectItem value="1">Toshkent</SelectItem>
|
||||||
<SelectItem value="Samarqand">Samarqand</SelectItem>
|
<SelectItem value="2">Samarqand</SelectItem>
|
||||||
<SelectItem value="Bekobod">Bekobod</SelectItem>
|
<SelectItem value="3">Bekobod</SelectItem>
|
||||||
</SelectContent>
|
</SelectContent>
|
||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
@@ -166,7 +194,7 @@ const AddUsers = ({ initialData, setUsers, setDialogOpen }: UserFormProps) => {
|
|||||||
type="submit"
|
type="submit"
|
||||||
className="w-full h-12 text-lg rounded-lg bg-blue-600 hover:bg-blue-600 cursor-pointer"
|
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" />
|
<Loader2 className="animate-spin" />
|
||||||
) : initialData ? (
|
) : initialData ? (
|
||||||
"Saqlash"
|
"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 SidebarLayout from "@/SidebarLayout";
|
||||||
import { FakeUserList, type User } from "@/features/users/lib/data";
|
import type { RegionListResData } from "@/features/region/lib/data";
|
||||||
import AddUsers from "@/features/users/ui/AddUsers";
|
import { user_api } from "@/features/users/lib/api";
|
||||||
import { Button } from "@/shared/ui/button";
|
import type { UserListData } from "@/features/users/lib/data";
|
||||||
import {
|
import DeleteUser from "@/features/users/ui/DeleteUser";
|
||||||
Dialog,
|
import Filter from "@/features/users/ui/Filter";
|
||||||
DialogContent,
|
import Pagination from "@/features/users/ui/Pagination";
|
||||||
DialogHeader,
|
import UserTable from "@/features/users/ui/UserTable";
|
||||||
DialogTitle,
|
|
||||||
DialogTrigger,
|
import { useQuery } from "@tanstack/react-query";
|
||||||
} from "@/shared/ui/dialog";
|
import { useState } from "react";
|
||||||
import { Input } from "@/shared/ui/input";
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from "@/shared/ui/select";
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from "@/shared/ui/table";
|
|
||||||
import clsx from "clsx";
|
|
||||||
import { ChevronLeft, ChevronRight, Edit, Plus, Trash } from "lucide-react";
|
|
||||||
import { useMemo, useState } from "react";
|
|
||||||
|
|
||||||
const UsersList = () => {
|
const UsersList = () => {
|
||||||
const [users, setUsers] = useState<User[]>(FakeUserList);
|
const [editingUser, setEditingUser] = useState<UserListData | null>(null);
|
||||||
|
|
||||||
const [editingUser, setEditingUser] = useState<User | null>(null);
|
|
||||||
const [dialogOpen, setDialogOpen] = useState(false);
|
|
||||||
|
|
||||||
const [searchTerm, setSearchTerm] = useState("");
|
const [searchTerm, setSearchTerm] = useState("");
|
||||||
const [statusFilter, setStatusFilter] = useState<
|
const [regionValue, setRegionValue] = useState<RegionListResData | null>(
|
||||||
"all" | "active" | "inactive"
|
null,
|
||||||
>("all");
|
);
|
||||||
const [regionFilter, setRegionFilter] = useState<string>("all");
|
const limit = 20;
|
||||||
|
|
||||||
// Pagination state
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
const [currentPage, setCurrentPage] = useState(1);
|
||||||
const pageSize = 5;
|
const [statusFilter, setStatusFilter] = useState<"all" | "true" | "false">(
|
||||||
|
"all",
|
||||||
const handleDelete = (id: number) => {
|
|
||||||
setUsers(users.filter((u) => u.id !== id));
|
|
||||||
};
|
|
||||||
|
|
||||||
// Filter & search users
|
|
||||||
const filteredUsers = useMemo(() => {
|
|
||||||
return users.filter((user) => {
|
|
||||||
const matchesSearch =
|
|
||||||
user.firstName.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
||||||
user.lastName.toLowerCase().includes(searchTerm.toLowerCase());
|
|
||||||
|
|
||||||
const matchesStatus =
|
|
||||||
statusFilter === "all" ||
|
|
||||||
(statusFilter === "active" && user.isActive) ||
|
|
||||||
(statusFilter === "inactive" && !user.isActive);
|
|
||||||
|
|
||||||
const matchesRegion =
|
|
||||||
regionFilter === "all" || user.region === regionFilter;
|
|
||||||
|
|
||||||
return matchesSearch && matchesStatus && matchesRegion;
|
|
||||||
});
|
|
||||||
}, [users, searchTerm, statusFilter, regionFilter]);
|
|
||||||
|
|
||||||
const totalPages = Math.ceil(filteredUsers.length / pageSize);
|
|
||||||
const paginatedUsers = filteredUsers.slice(
|
|
||||||
(currentPage - 1) * pageSize,
|
|
||||||
currentPage * pageSize,
|
|
||||||
);
|
);
|
||||||
|
|
||||||
// Hududlarni filter qilish uchun
|
const [userDelete, setUserDelete] = useState<UserListData | null>(null);
|
||||||
const regions = Array.from(new Set(users.map((u) => u.region)));
|
const [opneDelete, setOpenDelete] = useState<boolean>(false);
|
||||||
|
|
||||||
|
const { data, isLoading, isError } = useQuery({
|
||||||
|
queryKey: ["user_list", currentPage, statusFilter, regionValue, searchTerm],
|
||||||
|
queryFn: () => {
|
||||||
|
const params: {
|
||||||
|
limit?: number;
|
||||||
|
offset?: number;
|
||||||
|
search?: string;
|
||||||
|
is_active?: boolean | string;
|
||||||
|
region_id?: number;
|
||||||
|
} = {
|
||||||
|
limit,
|
||||||
|
offset: (currentPage - 1) * limit,
|
||||||
|
search: searchTerm,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (regionValue !== null) {
|
||||||
|
params.region_id = Number(regionValue.id);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (statusFilter !== "all") {
|
||||||
|
params.is_active = statusFilter;
|
||||||
|
}
|
||||||
|
|
||||||
|
return user_api.list(params);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
const [dialogOpen, setDialogOpen] = useState(false);
|
||||||
|
|
||||||
|
const handleDelete = (user: UserListData) => {
|
||||||
|
setUserDelete(user);
|
||||||
|
setOpenDelete(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const totalPages = data ? Math.ceil(data.data.data.count / limit) : 1;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SidebarLayout>
|
<SidebarLayout>
|
||||||
<div className="flex flex-col h-full p-10 w-full">
|
<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">
|
<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>
|
<h1 className="text-2xl font-bold">Foydalanuvchilar ro'yxati</h1>
|
||||||
|
|
||||||
<div className="flex flex-wrap gap-2 items-center">
|
<Filter
|
||||||
<Input
|
searchTerm={searchTerm}
|
||||||
type="text"
|
setSearchTerm={setSearchTerm}
|
||||||
placeholder="Ism yoki Familiyasi bo'yicha qidirish"
|
setStatusFilter={setStatusFilter}
|
||||||
className="border rounded px-3 py-2 text-sm w-64"
|
statusFilter={statusFilter}
|
||||||
value={searchTerm}
|
regionValue={regionValue}
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
setRegionValue={setRegionValue}
|
||||||
/>
|
dialogOpen={dialogOpen}
|
||||||
|
|
||||||
<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}
|
setDialogOpen={setDialogOpen}
|
||||||
|
editingUser={editingUser}
|
||||||
|
setEditingUser={setEditingUser}
|
||||||
/>
|
/>
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex-1 overflow-auto">
|
<UserTable
|
||||||
<Table>
|
data={data}
|
||||||
<TableHeader>
|
isLoading={isLoading}
|
||||||
<TableRow className="text-[16px] text-center">
|
setEditingUser={setEditingUser}
|
||||||
<TableHead className="text-start">ID</TableHead>
|
isError={isError}
|
||||||
<TableHead className="text-start">Ismi</TableHead>
|
setDialogOpen={setDialogOpen}
|
||||||
<TableHead className="text-start">Familiyasi</TableHead>
|
handleDelete={handleDelete}
|
||||||
<TableHead className="text-start">Hududi</TableHead>
|
currentPage={currentPage}
|
||||||
<TableHead className="text-center">Holati</TableHead>
|
/>
|
||||||
<TableHead className="text-right">Harakatlar</TableHead>
|
<Pagination
|
||||||
</TableRow>
|
currentPage={currentPage}
|
||||||
</TableHeader>
|
setCurrentPage={setCurrentPage}
|
||||||
<TableBody>
|
totalPages={totalPages}
|
||||||
{paginatedUsers.length > 0 ? (
|
/>
|
||||||
paginatedUsers.map((user) => (
|
|
||||||
<TableRow key={user.id} className="text-[14px] text-start">
|
|
||||||
<TableCell>{user.id}</TableCell>
|
|
||||||
<TableCell>{user.firstName}</TableCell>
|
|
||||||
<TableCell>{user.lastName}</TableCell>
|
|
||||||
<TableCell>{user.region}</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<Select
|
|
||||||
value={user.isActive ? "active" : "inactive"}
|
|
||||||
onValueChange={(val) => {
|
|
||||||
setUsers(
|
|
||||||
users.map((u) =>
|
|
||||||
u.id === user.id
|
|
||||||
? { ...u, isActive: val === "active" }
|
|
||||||
: u,
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SelectTrigger
|
|
||||||
className={clsx(
|
|
||||||
"w-[180px] mx-auto",
|
|
||||||
user.isActive
|
|
||||||
? "bg-green-100 text-green-800"
|
|
||||||
: "bg-red-100 text-red-800",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<SelectValue placeholder="Holati" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem
|
|
||||||
value="active"
|
|
||||||
className="text-green-500 hover:!text-green-500"
|
|
||||||
>
|
|
||||||
Faol
|
|
||||||
</SelectItem>
|
|
||||||
<SelectItem
|
|
||||||
value="inactive"
|
|
||||||
className="text-red-500 hover:!text-red-500"
|
|
||||||
>
|
|
||||||
Faol emas
|
|
||||||
</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell className="flex gap-2 justify-end">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => {
|
|
||||||
setEditingUser(user);
|
|
||||||
setDialogOpen(true);
|
|
||||||
}}
|
|
||||||
className="bg-blue-500 text-white hover:bg-blue-500 hover:text-white cursor-pointer"
|
|
||||||
>
|
|
||||||
<Edit className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="destructive"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => handleDelete(user.id)}
|
|
||||||
className="cursor-pointer"
|
|
||||||
>
|
|
||||||
<Trash className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))
|
|
||||||
) : (
|
|
||||||
<TableRow>
|
|
||||||
<TableCell colSpan={6} className="text-center py-4 text-lg">
|
|
||||||
Foydalanuvchilar topilmadi.
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
)}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Pagination */}
|
<DeleteUser
|
||||||
<div className="mt-2 sticky bottom-0 bg-white flex justify-end gap-2 z-10 py-2 border-t">
|
opneDelete={opneDelete}
|
||||||
<Button
|
setOpenDelete={setOpenDelete}
|
||||||
variant="outline"
|
userDelete={userDelete}
|
||||||
size="icon"
|
setUserDelete={setUserDelete}
|
||||||
className="cursor-pointer"
|
/>
|
||||||
disabled={currentPage === 1}
|
|
||||||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
|
||||||
>
|
|
||||||
<ChevronLeft />
|
|
||||||
</Button>
|
|
||||||
{Array.from({ length: totalPages }, (_, i) => (
|
|
||||||
<Button
|
|
||||||
key={i}
|
|
||||||
variant={currentPage === i + 1 ? "default" : "outline"}
|
|
||||||
size="icon"
|
|
||||||
className={clsx(
|
|
||||||
currentPage === i + 1
|
|
||||||
? "bg-blue-500 hover:bg-blue-500"
|
|
||||||
: " bg-none hover:bg-blue-200",
|
|
||||||
"cursor-pointer",
|
|
||||||
)}
|
|
||||||
onClick={() => setCurrentPage(i + 1)}
|
|
||||||
>
|
|
||||||
{i + 1}
|
|
||||||
</Button>
|
|
||||||
))}
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="icon"
|
|
||||||
className="cursor-pointer"
|
|
||||||
disabled={currentPage === totalPages}
|
|
||||||
onClick={() =>
|
|
||||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages))
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<ChevronRight />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</SidebarLayout>
|
</SidebarLayout>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
@import 'tailwindcss';
|
@import "tailwindcss";
|
||||||
@import 'tw-animate-css';
|
@import "tw-animate-css";
|
||||||
|
|
||||||
@custom-variant dark (&:is(.dark *));
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
|||||||
@@ -1,166 +1,10 @@
|
|||||||
import { Button } from "@/shared/ui/button";
|
import AuthLogin from "@/features/auth/ui/AuthLogin";
|
||||||
import {
|
import LoginLayout from "@/LoginLayout";
|
||||||
Card,
|
|
||||||
CardContent,
|
|
||||||
CardDescription,
|
|
||||||
CardHeader,
|
|
||||||
CardTitle,
|
|
||||||
} from "@/shared/ui/card";
|
|
||||||
import {
|
|
||||||
Form,
|
|
||||||
FormControl,
|
|
||||||
FormField,
|
|
||||||
FormItem,
|
|
||||||
FormMessage,
|
|
||||||
} from "@/shared/ui/form";
|
|
||||||
import { Input } from "@/shared/ui/input";
|
|
||||||
import { Label } from "@/shared/ui/label";
|
|
||||||
import { zodResolver } from "@hookform/resolvers/zod";
|
|
||||||
import { Eye, EyeOff, Loader2 } from "lucide-react";
|
|
||||||
import { useEffect, useState } from "react";
|
|
||||||
import { useForm } from "react-hook-form";
|
|
||||||
import { useNavigate } from "react-router-dom";
|
|
||||||
import { toast } from "sonner";
|
|
||||||
import { z } from "zod";
|
|
||||||
|
|
||||||
export default function AdminLoginPage() {
|
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 (
|
return (
|
||||||
<div className="min-h-screen flex items-center justify-center bg-slate-50 p-6">
|
<LoginLayout>
|
||||||
<Card className="w-full max-w-md">
|
<AuthLogin />
|
||||||
<CardHeader className="gap-1">
|
</LoginLayout>
|
||||||
<CardTitle className="text-xl font-semibold">
|
|
||||||
Admin panelga kirish
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription className="text-md">
|
|
||||||
Login va parolingizni kiriting.
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<CardContent>
|
|
||||||
<Form {...form}>
|
|
||||||
<form
|
|
||||||
onSubmit={form.handleSubmit(handleSubmit)}
|
|
||||||
className="space-y-4"
|
|
||||||
>
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="email"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<Label>Login</Label>
|
|
||||||
<FormControl>
|
|
||||||
<Input
|
|
||||||
placeholder="admin"
|
|
||||||
{...field}
|
|
||||||
className="!h-12 !text-md"
|
|
||||||
/>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="password"
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<Label>Parol</Label>
|
|
||||||
<FormControl>
|
|
||||||
<div className="relative">
|
|
||||||
<Input
|
|
||||||
type={showPassword ? "text" : "password"}
|
|
||||||
placeholder="12345"
|
|
||||||
{...field}
|
|
||||||
className="!h-12 !text-md"
|
|
||||||
/>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
onClick={() => setShowPassword((prev) => !prev)}
|
|
||||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-600 hover:text-black"
|
|
||||||
>
|
|
||||||
{showPassword ? (
|
|
||||||
<EyeOff size={20} />
|
|
||||||
) : (
|
|
||||||
<Eye size={20} />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Button
|
|
||||||
type="submit"
|
|
||||||
className="w-full h-12 text-lg"
|
|
||||||
disabled={loading}
|
|
||||||
>
|
|
||||||
{loading ? <Loader2 className="animate-spin" /> : "Kirish"}
|
|
||||||
</Button>
|
|
||||||
</form>
|
|
||||||
</Form>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
import LoginLayout from "@/LoginLayout";
|
||||||
import Districts from "@/pages/Districts";
|
import Districts from "@/pages/Districts";
|
||||||
import Doctors from "@/pages/Doctors";
|
import Doctors from "@/pages/Doctors";
|
||||||
import UsersPage from "@/pages/Home";
|
import UsersPage from "@/pages/Home";
|
||||||
@@ -23,7 +24,11 @@ const AppRouter = () => {
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/dashboard",
|
path: "/dashboard",
|
||||||
element: <UsersPage />,
|
element: (
|
||||||
|
<LoginLayout>
|
||||||
|
<UsersPage />
|
||||||
|
</LoginLayout>
|
||||||
|
),
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/dashboard/plans",
|
path: "/dashboard/plans",
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
const BASE_URL =
|
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 i18n from "@/shared/config/i18n";
|
||||||
import { BASE_URL } from './URLs';
|
import { getToken } from "@/shared/lib/cookie";
|
||||||
import i18n from '@/shared/config/i18n';
|
import axios from "axios";
|
||||||
|
import { BASE_URL } from "./URLs";
|
||||||
|
|
||||||
const httpClient = axios.create({
|
const httpClient = axios.create({
|
||||||
baseURL: BASE_URL,
|
baseURL: BASE_URL,
|
||||||
@@ -13,11 +14,11 @@ httpClient.interceptors.request.use(
|
|||||||
|
|
||||||
// Language configs
|
// Language configs
|
||||||
const language = i18n.language;
|
const language = i18n.language;
|
||||||
config.headers['Accept-Language'] = language;
|
config.headers["Accept-Language"] = language;
|
||||||
// const accessToken = localStorage.getItem('accessToken');
|
const accessToken = getToken();
|
||||||
// if (accessToken) {
|
if (accessToken) {
|
||||||
// config.headers['Authorization'] = `Bearer ${accessToken}`;
|
config.headers["Authorization"] = `Bearer ${accessToken}`;
|
||||||
// }
|
}
|
||||||
|
|
||||||
return config;
|
return config;
|
||||||
},
|
},
|
||||||
@@ -27,7 +28,7 @@ httpClient.interceptors.request.use(
|
|||||||
httpClient.interceptors.response.use(
|
httpClient.interceptors.response.use(
|
||||||
(response) => response,
|
(response) => response,
|
||||||
(error) => {
|
(error) => {
|
||||||
console.error('API error:', error);
|
console.error("API error:", error);
|
||||||
return Promise.reject(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";
|
} from "lucide-react";
|
||||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
|
import { removeToken } from "@/shared/lib/cookie";
|
||||||
import { Button } from "@/shared/ui/button";
|
import { Button } from "@/shared/ui/button";
|
||||||
import {
|
import {
|
||||||
Sidebar,
|
Sidebar,
|
||||||
@@ -147,7 +148,10 @@ export function AppSidebar() {
|
|||||||
<Button
|
<Button
|
||||||
variant={"ghost"}
|
variant={"ghost"}
|
||||||
className="w-fit text-red-500 hover:text-red-500 cursor-pointer"
|
className="w-fit text-red-500 hover:text-red-500 cursor-pointer"
|
||||||
onClick={() => navigate("/")}
|
onClick={() => {
|
||||||
|
navigate("/");
|
||||||
|
removeToken();
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<LogOut />
|
<LogOut />
|
||||||
<p>Chiqish</p>
|
<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 LangToggle from '@/widgets/lang-toggle/ui/lang-toggle';
|
import ModeToggle from "@/widgets/theme-toggle/ui/theme-toggle";
|
||||||
import ModeToggle from '@/widgets/theme-toggle/ui/theme-toggle';
|
import GitHubButton from "react-github-btn";
|
||||||
import { useQuery } from '@tanstack/react-query';
|
|
||||||
import GitHubButton from 'react-github-btn';
|
|
||||||
|
|
||||||
const Welcome = () => {
|
const Welcome = () => {
|
||||||
const { data } = useQuery({
|
|
||||||
queryKey: ['posts'],
|
|
||||||
queryFn: () => getPosts(),
|
|
||||||
});
|
|
||||||
|
|
||||||
console.log('data', data);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="custom-container h-screen rounded-2xl flex items-center justify-center">
|
<div className="custom-container h-screen rounded-2xl flex items-center justify-center">
|
||||||
<div className="flex flex-col gap-2 items-center">
|
<div className="flex flex-col gap-2 items-center">
|
||||||
|
|||||||
Reference in New Issue
Block a user