Compare commits
13 Commits
aa1e4f0440
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
33eed28b83 | ||
|
|
c006dfd907 | ||
|
|
9fb18367df | ||
|
|
94ba3f3db9 | ||
|
|
287fe8a842 | ||
|
|
bd1cf26c46 | ||
|
|
d5106d85e9 | ||
|
|
0fd6bb9906 | ||
|
|
711bbe83ca | ||
|
|
a48a9318c8 | ||
|
|
10dbf1593b | ||
|
|
ce125ef982 | ||
|
|
b198e3458b |
@@ -4,12 +4,14 @@ import FilterCategory from "@/features/districts/ui/Filter";
|
||||
import TableDistrict from "@/features/districts/ui/TableCategories";
|
||||
import type { CategoryItem } from "@/features/plans/lib/data";
|
||||
import Pagination from "@/shared/ui/pagination";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const CategoriesList = () => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ["categories", currentPage],
|
||||
@@ -33,6 +35,31 @@ const CategoriesList = () => {
|
||||
setOpenDelete(true);
|
||||
};
|
||||
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: ({ body, id }: { id: number; body: FormData }) =>
|
||||
categories_api.image_upload({ body, id }),
|
||||
onSuccess() {
|
||||
toast.success("Banner tartibi o'zgartilidi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
queryClient.refetchQueries({ queryKey: ["categories"] });
|
||||
},
|
||||
onError() {
|
||||
toast.error("Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleOrderChange = ({ body, id }: { id: number; body: FormData }) => {
|
||||
mutate({
|
||||
body,
|
||||
id: id,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full p-10 w-full">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
|
||||
@@ -42,6 +69,7 @@ const CategoriesList = () => {
|
||||
</div>
|
||||
|
||||
<TableDistrict
|
||||
handleOrderChange={handleOrderChange}
|
||||
data={data ? data.results : []}
|
||||
isError={isError}
|
||||
dialogOpen={dialogOpen}
|
||||
|
||||
@@ -16,8 +16,8 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/ui/table";
|
||||
import { Image, Loader2 } from "lucide-react";
|
||||
import { useState, type Dispatch, type SetStateAction } from "react";
|
||||
import { Check, Image, Loader2 } from "lucide-react";
|
||||
import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
|
||||
|
||||
interface Props {
|
||||
data: CategoryItem[] | [];
|
||||
@@ -27,6 +27,7 @@ interface Props {
|
||||
setDialogOpen: Dispatch<SetStateAction<boolean>>;
|
||||
dialogOpen: boolean;
|
||||
currentPage: number;
|
||||
handleOrderChange: ({ body, id }: { id: number; body: FormData }) => void;
|
||||
}
|
||||
|
||||
const TableDistrict = ({
|
||||
@@ -35,8 +36,35 @@ const TableDistrict = ({
|
||||
isLoading,
|
||||
dialogOpen,
|
||||
setDialogOpen,
|
||||
handleOrderChange,
|
||||
}: Props) => {
|
||||
const [initialValues, setEditing] = useState<CategoryItem>();
|
||||
const [localOrders, setLocalOrders] = useState<{ [key: number]: number }>({});
|
||||
|
||||
useEffect(() => {
|
||||
const orders = data.reduce(
|
||||
(acc, item) => {
|
||||
acc[item.id] = item.order;
|
||||
return acc;
|
||||
},
|
||||
{} as { [key: number]: number },
|
||||
);
|
||||
setLocalOrders(orders);
|
||||
}, [data]);
|
||||
|
||||
const onOrderChange = (id: number, value: string) => {
|
||||
if (value === "") {
|
||||
// bo'sh inputni ham qabul qilamiz
|
||||
setLocalOrders((prev) => ({ ...prev, [id]: 0 })); // yoki null ham bo'lishi mumkin
|
||||
return;
|
||||
}
|
||||
|
||||
const num = parseInt(value, 10);
|
||||
if (!isNaN(num)) {
|
||||
setLocalOrders((prev) => ({ ...prev, [id]: num }));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-auto">
|
||||
{isLoading && (
|
||||
@@ -61,7 +89,8 @@ const TableDistrict = ({
|
||||
<TableRow>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Rasmi</TableHead>
|
||||
<TableHead>Nomi (uz)</TableHead>
|
||||
<TableHead>Nomi (uz)</TableHead>{" "}
|
||||
<TableHead>Tartib raqami</TableHead>
|
||||
<TableHead>Kategoriya idsi</TableHead>
|
||||
<TableHead>Turi</TableHead>
|
||||
<TableHead className="text-right">Harakatlar</TableHead>
|
||||
@@ -79,10 +108,41 @@ const TableDistrict = ({
|
||||
className="w-10 h-10 object-cover rounded-md"
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>{d.name}</TableCell>
|
||||
<TableCell>{d.name}</TableCell>{" "}
|
||||
<TableCell className="font-medium flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
value={localOrders[d.id] ?? ""}
|
||||
onChange={(e) => onOrderChange(d.id, e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
const formData = new FormData();
|
||||
formData.append("order", localOrders[d.id].toString());
|
||||
handleOrderChange({
|
||||
id: d.id,
|
||||
body: formData,
|
||||
});
|
||||
}
|
||||
}}
|
||||
className="w-24 h-10 border rounded px-2"
|
||||
/>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
const formData = new FormData();
|
||||
formData.append("order", localOrders[d.id].toString());
|
||||
handleOrderChange({
|
||||
id: d.id,
|
||||
body: formData,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Check size={18} />
|
||||
</Button>
|
||||
</TableCell>
|
||||
<TableCell>{d.category_id ? d.category_id : "----"}</TableCell>
|
||||
<TableCell>{d.type ? d.type : "----"}</TableCell>
|
||||
|
||||
<TableCell className="flex gap-2 justify-end">
|
||||
<Button
|
||||
variant="outline"
|
||||
|
||||
@@ -17,10 +17,10 @@ export const banner_api = {
|
||||
return res;
|
||||
},
|
||||
|
||||
// async update({ body, id }: { id: number; body: ObjectUpdate }) {
|
||||
// const res = await httpClient.patch(`${API_URLS.OBJECT}${id}/update/`, body);
|
||||
// return res;
|
||||
// },
|
||||
async update({ body, id }: { id: number; body: FormData }) {
|
||||
const res = await httpClient.patch(`${API_URLS.BannerUpdate(id)}`, body);
|
||||
return res;
|
||||
},
|
||||
|
||||
async delete(id: string) {
|
||||
const res = await httpClient.delete(`${API_URLS.BannerDelete(id)}`);
|
||||
|
||||
@@ -9,6 +9,7 @@ export interface BannersListData {
|
||||
}
|
||||
|
||||
export interface BannerListItem {
|
||||
id: string;
|
||||
id: number;
|
||||
banner: string;
|
||||
order: number;
|
||||
}
|
||||
|
||||
@@ -4,14 +4,16 @@ import ObjectFilter from "@/features/objects/ui/BannersFilter";
|
||||
import ObjectTable from "@/features/objects/ui/BannersTable";
|
||||
import DeleteObject from "@/features/objects/ui/DeleteBanners";
|
||||
import Pagination from "@/shared/ui/pagination";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
export default function BannersList() {
|
||||
const [editingPlan, setEditingPlan] = useState<BannerListItem | null>(null);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const limit = 20;
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const [disricDelete, setDiscritDelete] = useState<BannerListItem | null>(
|
||||
null,
|
||||
@@ -39,6 +41,31 @@ export default function BannersList() {
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: ({ body, id }: { id: number; body: FormData }) =>
|
||||
banner_api.update({ body, id }),
|
||||
onSuccess() {
|
||||
toast.success("Banner tartibi o'zgartilidi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
queryClient.refetchQueries({ queryKey: ["banner_list"] });
|
||||
},
|
||||
onError() {
|
||||
toast.error("Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleOrderChange = ({ body, id }: { id: number; body: FormData }) => {
|
||||
mutate({
|
||||
body,
|
||||
id: id,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full p-10 w-full">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
|
||||
@@ -52,6 +79,7 @@ export default function BannersList() {
|
||||
</div>
|
||||
|
||||
<ObjectTable
|
||||
handleOrderChange={handleOrderChange}
|
||||
filteredData={object ? object.results : []}
|
||||
handleDelete={handleDelete}
|
||||
isError={isError}
|
||||
|
||||
@@ -9,8 +9,8 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/ui/table";
|
||||
import { Loader2, Trash2 } from "lucide-react";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
import { Check, Loader2, Trash2 } from "lucide-react";
|
||||
import { useEffect, useState, type Dispatch, type SetStateAction } from "react";
|
||||
|
||||
interface Props {
|
||||
filteredData: BannerListItem[] | [];
|
||||
@@ -19,6 +19,7 @@ interface Props {
|
||||
handleDelete: (object: BannerListItem) => void;
|
||||
isLoading: boolean;
|
||||
isError: boolean;
|
||||
handleOrderChange: ({ body, id }: { id: number; body: FormData }) => void; // tartib raqamini update qilish uchun
|
||||
}
|
||||
|
||||
const ObjectTable = ({
|
||||
@@ -26,7 +27,35 @@ const ObjectTable = ({
|
||||
handleDelete,
|
||||
isError,
|
||||
isLoading,
|
||||
handleOrderChange,
|
||||
}: Props) => {
|
||||
// Mahsulotlar tartibini local state orqali boshqaramiz
|
||||
const [localOrders, setLocalOrders] = useState<{ [key: number]: number }>({});
|
||||
|
||||
useEffect(() => {
|
||||
const orders = filteredData.reduce(
|
||||
(acc, item) => {
|
||||
acc[item.id] = item.order;
|
||||
return acc;
|
||||
},
|
||||
{} as { [key: number]: number },
|
||||
);
|
||||
setLocalOrders(orders);
|
||||
}, [filteredData]);
|
||||
|
||||
const onOrderChange = (id: number, value: string) => {
|
||||
if (value === "") {
|
||||
// bo'sh inputni ham qabul qilamiz
|
||||
setLocalOrders((prev) => ({ ...prev, [id]: 0 })); // yoki null ham bo'lishi mumkin
|
||||
return;
|
||||
}
|
||||
|
||||
const num = parseInt(value, 10);
|
||||
if (!isNaN(num)) {
|
||||
setLocalOrders((prev) => ({ ...prev, [id]: num }));
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-auto">
|
||||
{isLoading && (
|
||||
@@ -44,12 +73,14 @@ const ObjectTable = ({
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isError && !isLoading && (
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>#</TableHead>
|
||||
<TableHead>Banner</TableHead>
|
||||
<TableHead>Tartib raqami</TableHead>
|
||||
<TableHead className="text-right">Amallar</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
@@ -61,11 +92,48 @@ const ObjectTable = ({
|
||||
<TableCell className="font-medium">
|
||||
<img
|
||||
src={API_URLS.BASE_URL + item.banner}
|
||||
alt={item.id}
|
||||
alt={item.id.toString()}
|
||||
className="w-16 h-16"
|
||||
/>
|
||||
</TableCell>
|
||||
|
||||
<TableCell className="font-medium flex items-center gap-2">
|
||||
<input
|
||||
type="number"
|
||||
value={localOrders[item.id] ?? ""}
|
||||
onChange={(e) => onOrderChange(item.id, e.target.value)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter") {
|
||||
const formData = new FormData();
|
||||
formData.append(
|
||||
"order",
|
||||
localOrders[item.id].toString(),
|
||||
);
|
||||
handleOrderChange({
|
||||
id: item.id,
|
||||
body: formData,
|
||||
});
|
||||
}
|
||||
}}
|
||||
className="w-24 h-10 border rounded px-2"
|
||||
/>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
const formData = new FormData();
|
||||
formData.append(
|
||||
"order",
|
||||
localOrders[item.id].toString(),
|
||||
);
|
||||
handleOrderChange({
|
||||
id: item.id,
|
||||
body: formData,
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Check size={18} />
|
||||
</Button>
|
||||
</TableCell>
|
||||
<TableCell className="text-right space-x-2 gap-2">
|
||||
<Button
|
||||
variant="destructive"
|
||||
|
||||
@@ -60,7 +60,7 @@ const DeleteObject = ({
|
||||
</Button>
|
||||
<Button
|
||||
variant={"destructive"}
|
||||
onClick={() => discrit && mutate(discrit.id)}
|
||||
onClick={() => discrit && mutate(discrit.id.toString())}
|
||||
>
|
||||
{isPending ? (
|
||||
<Loader2 className="animate-spin" />
|
||||
|
||||
@@ -27,8 +27,10 @@ export const plans_api = {
|
||||
return res;
|
||||
},
|
||||
|
||||
async delete(id: string) {
|
||||
const res = await httpClient.delete(`${API_URLS.DeleteProdut(id)}`);
|
||||
async delete(body: { ids: number[] }) {
|
||||
const res = await httpClient.delete(`${API_URLS.DeleteProdut}`, {
|
||||
data: body,
|
||||
});
|
||||
return res;
|
||||
},
|
||||
|
||||
@@ -59,4 +61,20 @@ export const plans_api = {
|
||||
const res = await httpClient.post(API_URLS.Import_Product);
|
||||
return res;
|
||||
},
|
||||
|
||||
async update_payment_type({
|
||||
id,
|
||||
body,
|
||||
}: {
|
||||
id: number;
|
||||
body: { payment_type: "cash" | "card" };
|
||||
}) {
|
||||
const res = await httpClient.put(API_URLS.Update_Pyment_Type(id), body);
|
||||
return res;
|
||||
},
|
||||
|
||||
async import_balance() {
|
||||
const res = await httpClient.post(API_URLS.Import_Balance);
|
||||
return res;
|
||||
},
|
||||
};
|
||||
|
||||
@@ -37,6 +37,7 @@ export interface Product {
|
||||
marketing_group_code: null | string;
|
||||
inventory_kinds: { id: number; name: string }[];
|
||||
sector_codes: { id: number; code: string }[];
|
||||
payment_type: "cash" | "card" | null;
|
||||
}
|
||||
|
||||
export interface Category {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { plans_api } from "@/features/plans/lib/api";
|
||||
import type { Product } from "@/features/plans/lib/data";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
@@ -8,34 +9,107 @@ import {
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { X } from "lucide-react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import type { AxiosError } from "axios";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface Props {
|
||||
opneDelete: boolean;
|
||||
setOpenDelete: Dispatch<SetStateAction<boolean>>;
|
||||
setPlanDelete: Dispatch<SetStateAction<Product | null>>;
|
||||
planDelete: Product | null;
|
||||
setPlanDelete: Dispatch<SetStateAction<Product | null>>;
|
||||
selectedProducts?: number[];
|
||||
setSelectedProducts?: Dispatch<SetStateAction<number[]>>;
|
||||
}
|
||||
|
||||
const DeletePlan = ({ opneDelete, setOpenDelete }: Props) => {
|
||||
const DeletePlan = ({
|
||||
opneDelete,
|
||||
setOpenDelete,
|
||||
planDelete,
|
||||
setPlanDelete,
|
||||
selectedProducts = [],
|
||||
setSelectedProducts,
|
||||
}: Props) => {
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
// Ko'plab mahsulotlarni o'chirish
|
||||
const { mutate: deleteBulk, isPending: isPendingBulk } = useMutation({
|
||||
mutationFn: async (ids: number[]) => {
|
||||
return await plans_api.delete({ ids });
|
||||
},
|
||||
onSuccess: () => {
|
||||
toast.success(`${selectedProducts.length} ta mahsulot o'chirildi`, {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
queryClient.invalidateQueries({ queryKey: ["product_list"] });
|
||||
setOpenDelete(false);
|
||||
setPlanDelete(null);
|
||||
if (setSelectedProducts) {
|
||||
setSelectedProducts([]);
|
||||
}
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const errorData = (err.response?.data as { data: string }).data;
|
||||
const errorMessage = (err.response?.data as { message: string }).message;
|
||||
toast.error(errorMessage || errorData || "Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const handleConfirmDelete = () => {
|
||||
deleteBulk(selectedProducts);
|
||||
};
|
||||
|
||||
const isDeleting = isPendingBulk;
|
||||
|
||||
return (
|
||||
<Dialog open={opneDelete} onOpenChange={setOpenDelete}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>Mahsulotni o'chirish</DialogTitle>
|
||||
<DialogDescription className="text-md font-semibold">
|
||||
Siz rostan ham mahsulotni o'chirmoqchimisiz?
|
||||
<DialogDescription>
|
||||
{selectedProducts.length > 0 ? (
|
||||
<>
|
||||
Siz{" "}
|
||||
<span className="font-bold text-red-600">
|
||||
{selectedProducts.length}
|
||||
</span>{" "}
|
||||
ta mahsulotni o'chirmoqchisiz. Bu amalni qaytarib bo'lmaydi.
|
||||
Davom etishni xohlaysizmi?
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
Siz{" "}
|
||||
<span className="font-bold text-red-600">
|
||||
{planDelete?.name}
|
||||
</span>{" "}
|
||||
nomli mahsulotni o'chirmoqchisiz. Bu amalni qaytarib bo'lmaydi.
|
||||
Davom etishni xohlaysizmi?
|
||||
</>
|
||||
)}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
className="bg-blue-600 cursor-pointer hover:bg-blue-600"
|
||||
onClick={() => setOpenDelete(false)}
|
||||
onClick={() => {
|
||||
setOpenDelete(false);
|
||||
setPlanDelete(null);
|
||||
}}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
<X />
|
||||
Bekor qilish
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleConfirmDelete}
|
||||
className="bg-red-600 hover:bg-red-700 cursor-pointer"
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting ? "O'chirilmoqda..." : "O'chirish"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { Button } from "@/shared/ui/button";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import type { AxiosError } from "axios";
|
||||
import { Loader } from "lucide-react";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
@@ -46,6 +47,22 @@ const FilterPlans = ({ searchUser, setSearchUser }: Props) => {
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: balanceMutate, isPending } = useMutation({
|
||||
mutationFn: () => plans_api.import_balance(),
|
||||
onSuccess: () => {
|
||||
toast.success("Mahsulotlar soni import qilindi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex gap-2 mb-4">
|
||||
<Input
|
||||
@@ -101,6 +118,16 @@ const FilterPlans = ({ searchUser, setSearchUser }: Props) => {
|
||||
/>
|
||||
</DialogContent>
|
||||
</Dialog>*/}
|
||||
|
||||
<Button
|
||||
className="h-12 bg-blue-500 text-white hover:bg-blue-600 cursor-pointer"
|
||||
variant={"secondary"}
|
||||
onClick={() => balanceMutate()}
|
||||
disabled={isPending}
|
||||
>
|
||||
Mahsulotlar sonini olish
|
||||
{isPending && <Loader className="animate-spin" />}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -1,8 +1,16 @@
|
||||
"use client";
|
||||
|
||||
import { plans_api } from "@/features/plans/lib/api";
|
||||
import type { Product } from "@/features/plans/lib/data";
|
||||
import { API_URLS } from "@/shared/config/api/URLs";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { Checkbox } from "@/shared/ui/checkbox";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/shared/ui/select";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
@@ -11,18 +19,27 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/ui/table";
|
||||
import { Eye, Loader2 } from "lucide-react";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { Eye, Loader2, Trash2 } from "lucide-react";
|
||||
import type { Dispatch, SetStateAction } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
interface Props {
|
||||
products: Product[] | [];
|
||||
isLoading: boolean;
|
||||
isFetching: boolean;
|
||||
setIsAllPagesSelected: Dispatch<SetStateAction<boolean>>;
|
||||
isError: boolean;
|
||||
setEditingProduct: Dispatch<SetStateAction<Product | null>>;
|
||||
setDetailOpen: Dispatch<SetStateAction<boolean>>;
|
||||
setDialogOpen: Dispatch<SetStateAction<boolean>>;
|
||||
handleDelete: (product: Product) => void;
|
||||
selectedProducts: number[];
|
||||
setSelectedProducts: Dispatch<SetStateAction<number[]>>;
|
||||
handleBulkDelete: () => void;
|
||||
totalCount: number;
|
||||
count: number;
|
||||
handleSelectAllPages: () => void;
|
||||
isAllPagesSelected: boolean;
|
||||
}
|
||||
|
||||
const ProductTable = ({
|
||||
@@ -31,8 +48,38 @@ const ProductTable = ({
|
||||
isFetching,
|
||||
isError,
|
||||
setEditingProduct,
|
||||
setIsAllPagesSelected,
|
||||
setDetailOpen,
|
||||
selectedProducts,
|
||||
setSelectedProducts,
|
||||
handleBulkDelete,
|
||||
totalCount,
|
||||
handleSelectAllPages,
|
||||
isAllPagesSelected,
|
||||
}: Props) => {
|
||||
const queryClient = useQueryClient();
|
||||
const { mutate, isPending } = useMutation({
|
||||
mutationFn: ({
|
||||
id,
|
||||
body,
|
||||
}: {
|
||||
id: number;
|
||||
body: { payment_type: "cash" | "card" };
|
||||
}) => plans_api.update_payment_type({ id, body }),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["product_list"] });
|
||||
toast.success("To‘lov turi yangilandi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
onError: () => {
|
||||
toast.error("Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
if (isLoading || isFetching) {
|
||||
return (
|
||||
<div className="flex h-full items-center justify-center">
|
||||
@@ -49,66 +96,144 @@ const ProductTable = ({
|
||||
);
|
||||
}
|
||||
|
||||
const currentPageIds = products.map((p) => p.id);
|
||||
const isAllSelected =
|
||||
isAllPagesSelected ||
|
||||
(products.length > 0 &&
|
||||
currentPageIds.every((id) => selectedProducts.includes(id)));
|
||||
|
||||
const isSomeSelected =
|
||||
currentPageIds.some((id) => selectedProducts.includes(id)) &&
|
||||
!currentPageIds.every((id) => selectedProducts.includes(id));
|
||||
|
||||
const handleSelectAll = (checked: boolean) => {
|
||||
if (checked) {
|
||||
setSelectedProducts(
|
||||
Array.from(new Set([...selectedProducts, ...currentPageIds])),
|
||||
);
|
||||
} else {
|
||||
setSelectedProducts(
|
||||
selectedProducts.filter((id) => !currentPageIds.includes(id)),
|
||||
);
|
||||
if (isAllPagesSelected) setIsAllPagesSelected(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSelectProduct = (productId: number, checked: boolean) => {
|
||||
if (checked) setSelectedProducts([...selectedProducts, productId]);
|
||||
else setSelectedProducts(selectedProducts.filter((id) => id !== productId));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex-1 overflow-auto">
|
||||
{selectedProducts.length > 0 && (
|
||||
<div className="mb-4 space-y-2">
|
||||
<div className="flex items-center justify-between bg-blue-50 p-4 rounded-lg border border-blue-200">
|
||||
<span className="text-sm font-medium text-blue-900">
|
||||
{`${selectedProducts.length} ta mahsulot tanlandi`}
|
||||
</span>
|
||||
<div className="flex gap-2">
|
||||
{!isAllPagesSelected && totalCount > products.length && (
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={handleSelectAllPages}
|
||||
className="cursor-pointer border-blue-500 text-blue-700 hover:bg-blue-100"
|
||||
>
|
||||
Barcha {totalCount} ta mahsulotni tanlash
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={handleBulkDelete}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Tanlanganlarni o'chirish
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[50px]">
|
||||
<Checkbox
|
||||
checked={isAllSelected}
|
||||
onCheckedChange={handleSelectAll}
|
||||
aria-label="Barchasini tanlash"
|
||||
className={
|
||||
isSomeSelected ? "data-[state=checked]:bg-blue-500" : ""
|
||||
}
|
||||
/>
|
||||
</TableHead>
|
||||
<TableHead>ID</TableHead>
|
||||
<TableHead>Rasmi</TableHead>
|
||||
<TableHead>Nomi</TableHead>
|
||||
<TableHead>Tavsif</TableHead>
|
||||
<TableHead>Narx turi</TableHead>
|
||||
<TableHead className="text-end">Harakatlar</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{products.map((product, index) => {
|
||||
const isSelected = selectedProducts.includes(product.id);
|
||||
return (
|
||||
<TableRow key={product.id}>
|
||||
<TableRow
|
||||
key={product.id}
|
||||
className={isSelected ? "bg-blue-50" : ""}
|
||||
>
|
||||
<TableCell>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
onCheckedChange={(checked) =>
|
||||
handleSelectProduct(product.id, checked as boolean)
|
||||
}
|
||||
aria-label={`${product.name} tanlash`}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell>{index + 1}</TableCell>
|
||||
{product.images.length > 0 ? (
|
||||
<TableCell>
|
||||
<img
|
||||
src={API_URLS.BASE_URL + product.images[0].image}
|
||||
src={
|
||||
product.images.length > 0
|
||||
? API_URLS.BASE_URL + product.images[0].image
|
||||
: "/logo.png"
|
||||
}
|
||||
alt={product.name}
|
||||
className="w-16 h-16 object-cover rounded"
|
||||
/>
|
||||
</TableCell>
|
||||
) : (
|
||||
<TableCell>
|
||||
<img
|
||||
src={"/logo.png"}
|
||||
alt={product.name}
|
||||
className="w-10 h-10 object-cover rounded"
|
||||
/>
|
||||
</TableCell>
|
||||
)}
|
||||
<TableCell>{product.name}</TableCell>
|
||||
<TableCell>{product.short_name?.slice(0, 15)}...</TableCell>
|
||||
<TableCell>
|
||||
{product.short_name && product.short_name.slice(0, 15)}...
|
||||
</TableCell>
|
||||
{/* <TableCell
|
||||
className={clsx(
|
||||
product.is_active ? "text-green-600" : "text-red-600",
|
||||
)}
|
||||
>
|
||||
<Select
|
||||
value={product.is_active ? "true" : "false"}
|
||||
onValueChange={(value) =>
|
||||
handleStatusChange(product.id, value as "true" | "false")
|
||||
}
|
||||
value={product.payment_type ?? ""}
|
||||
disabled={isPending}
|
||||
onValueChange={(value) => {
|
||||
mutate({
|
||||
id: product.id,
|
||||
body: {
|
||||
payment_type: value as "cash" | "card",
|
||||
},
|
||||
});
|
||||
}}
|
||||
>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Holati" />
|
||||
<SelectTrigger className="w-full max-w-48">
|
||||
<SelectValue placeholder="To'lov turi" />
|
||||
</SelectTrigger>
|
||||
|
||||
<SelectContent>
|
||||
<SelectItem value="true">Faol</SelectItem>
|
||||
<SelectItem value="false">Nofaol</SelectItem>
|
||||
<SelectGroup>
|
||||
<SelectItem value="cash">Naqd</SelectItem>
|
||||
<SelectItem value="card">Karta</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</TableCell> */}
|
||||
|
||||
</TableCell>
|
||||
<TableCell className="space-x-2 text-right">
|
||||
<Button
|
||||
size="sm"
|
||||
@@ -120,37 +245,10 @@ const ProductTable = ({
|
||||
>
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{/*<Button
|
||||
size="sm"
|
||||
className="bg-blue-500 text-white hover:bg-blue-600"
|
||||
onClick={() => {
|
||||
setEditingProduct(product);
|
||||
setDialogOpen(true);
|
||||
}}
|
||||
>
|
||||
<Edit className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
onClick={() => handleDelete(product)}
|
||||
>
|
||||
<Trash className="h-4 w-4" />
|
||||
</Button>*/}
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
|
||||
{products.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={8} className="text-center text-gray-500">
|
||||
Mahsulotlar topilmadi
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,7 @@ import { plans_api } from "@/features/plans/lib/api";
|
||||
import type { Product } from "@/features/plans/lib/data";
|
||||
import DeletePlan from "@/features/plans/ui/DeletePlan";
|
||||
import FilterPlans from "@/features/plans/ui/FilterPlans";
|
||||
import PalanTable from "@/features/plans/ui/PalanTable";
|
||||
import ProductTable from "@/features/plans/ui/PalanTable";
|
||||
import Pagination from "@/shared/ui/pagination";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
@@ -11,7 +11,10 @@ import { PlanDetail } from "./PlanDetail";
|
||||
const ProductList = () => {
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [searchUser, setSearchUser] = useState<string>("");
|
||||
const [selectedProducts, setSelectedProducts] = useState<number[]>([]);
|
||||
const [isAllPagesSelected, setIsAllPagesSelected] = useState(false);
|
||||
const limit = 20;
|
||||
|
||||
const { data, isLoading, isError, isFetching } = useQuery({
|
||||
queryKey: ["product_list", searchUser, currentPage],
|
||||
queryFn: () => {
|
||||
@@ -33,9 +36,44 @@ const ProductList = () => {
|
||||
const [openDelete, setOpenDelete] = useState<boolean>(false);
|
||||
const [planDelete, setPlanDelete] = useState<Product | null>(null);
|
||||
|
||||
const handleDelete = (id: Product) => {
|
||||
const handleDelete = (product: Product) => {
|
||||
setOpenDelete(true);
|
||||
setPlanDelete(id);
|
||||
setPlanDelete(product);
|
||||
};
|
||||
|
||||
const handleSelectAllPages = async () => {
|
||||
try {
|
||||
if (!data?.total) return;
|
||||
|
||||
const allIds: number[] = [];
|
||||
const pageSize = 100; // backend limit
|
||||
const totalPages = Math.ceil(data.total / pageSize);
|
||||
|
||||
for (let page = 1; page <= totalPages; page++) {
|
||||
const response = await plans_api.list({
|
||||
page,
|
||||
page_size: pageSize,
|
||||
search: searchUser,
|
||||
});
|
||||
const ids = response.data.results.map((product: Product) => product.id);
|
||||
allIds.push(...ids);
|
||||
}
|
||||
|
||||
setSelectedProducts(allIds);
|
||||
setIsAllPagesSelected(true);
|
||||
} catch (error) {
|
||||
console.error("Barcha mahsulotlarni tanlashda xatolik:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleBulkDelete = () => {
|
||||
if (selectedProducts.length > 0) {
|
||||
setOpenDelete(true);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
return (
|
||||
@@ -58,20 +96,28 @@ const ProductList = () => {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<PalanTable
|
||||
<ProductTable
|
||||
products={data?.results || []}
|
||||
count={data?.total || 0}
|
||||
isLoading={isLoading}
|
||||
isFetching={isFetching}
|
||||
isError={isError}
|
||||
setDetailOpen={setDetail}
|
||||
setIsAllPagesSelected={setIsAllPagesSelected}
|
||||
setEditingProduct={setEditingPlan}
|
||||
setDialogOpen={setDialogOpen}
|
||||
handleDelete={handleDelete}
|
||||
selectedProducts={selectedProducts}
|
||||
setSelectedProducts={setSelectedProducts}
|
||||
handleBulkDelete={handleBulkDelete}
|
||||
totalCount={data?.total || 0}
|
||||
handleSelectAllPages={handleSelectAllPages}
|
||||
isAllPagesSelected={isAllPagesSelected}
|
||||
/>
|
||||
|
||||
<Pagination
|
||||
currentPage={currentPage}
|
||||
setCurrentPage={setCurrentPage}
|
||||
handlePageChange={handlePageChange}
|
||||
totalPages={data?.total_pages || 1}
|
||||
/>
|
||||
|
||||
@@ -80,6 +126,8 @@ const ProductList = () => {
|
||||
planDelete={planDelete}
|
||||
setOpenDelete={setOpenDelete}
|
||||
setPlanDelete={setPlanDelete}
|
||||
selectedProducts={selectedProducts}
|
||||
setSelectedProducts={setSelectedProducts}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
18
src/features/price-type/lib/api.ts
Normal file
18
src/features/price-type/lib/api.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
import httpClient from "@/shared/config/api/httpClient";
|
||||
import { API_URLS } from "@/shared/config/api/URLs";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import type { PriceTypeResponse } from "./type";
|
||||
|
||||
const price_type_api = {
|
||||
async list(): Promise<AxiosResponse<PriceTypeResponse[]>> {
|
||||
const res = await httpClient.get(API_URLS.PriceTypeList);
|
||||
return res;
|
||||
},
|
||||
|
||||
async import() {
|
||||
const res = await httpClient.post(API_URLS.PriceTypeImport);
|
||||
return res;
|
||||
},
|
||||
};
|
||||
|
||||
export default price_type_api;
|
||||
10
src/features/price-type/lib/type.ts
Normal file
10
src/features/price-type/lib/type.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
export interface PriceTypeResponse {
|
||||
id: number;
|
||||
created_at: string;
|
||||
name: string;
|
||||
code: string;
|
||||
with_card: string;
|
||||
state: string;
|
||||
price_type_kind: string;
|
||||
currency_code: string;
|
||||
}
|
||||
72
src/features/price-type/ui/TablePriceType.tsx
Normal file
72
src/features/price-type/ui/TablePriceType.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/ui/table";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import type { PriceTypeResponse } from "../lib/type";
|
||||
|
||||
interface Props {
|
||||
data: PriceTypeResponse[] | [];
|
||||
isLoading: boolean;
|
||||
isError: boolean;
|
||||
}
|
||||
|
||||
const TablePriceType = ({ data, isError, isLoading }: 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>Nomi</TableHead>
|
||||
<TableHead>Kodi</TableHead>
|
||||
<TableHead>Valyuta kodi</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
|
||||
<TableBody>
|
||||
{data.map((d, index) => (
|
||||
<TableRow key={d.id}>
|
||||
<TableCell>{index + 1}</TableCell>
|
||||
<TableCell>{d.name}</TableCell>
|
||||
<TableCell>{d.code}</TableCell>
|
||||
<TableCell>{d.currency_code}</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 TablePriceType;
|
||||
61
src/features/price-type/ui/priceTypeList.tsx
Normal file
61
src/features/price-type/ui/priceTypeList.tsx
Normal file
@@ -0,0 +1,61 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import price_type_api from "../lib/api";
|
||||
import TablePriceType from "./TablePriceType";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { toast } from "sonner";
|
||||
import type { AxiosError } from "axios";
|
||||
|
||||
const PriceTypeList = () => {
|
||||
const queryClient = useQueryClient();
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: () => price_type_api.import(),
|
||||
onSuccess: () => {
|
||||
queryClient.refetchQueries({ queryKey: ["price_type"] });
|
||||
toast.success("Narx turlari import qilindi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const errData = (err.response?.data as { data: string }).data;
|
||||
const errMessage = (err.response?.data as { message: string }).message;
|
||||
toast.error(errData || errMessage || "Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ["price_type"],
|
||||
queryFn: () => price_type_api.list(),
|
||||
select(data) {
|
||||
return data.data;
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full p-10 w-full">
|
||||
<div className="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 gap-4">
|
||||
<h1 className="text-2xl font-bold">Narx turlari</h1>
|
||||
|
||||
<div className="flex gap-4 justify-end">
|
||||
<Button
|
||||
className="bg-blue-500 h-12 cursor-pointer hover:bg-blue-500"
|
||||
onClick={() => mutate()}
|
||||
>
|
||||
Narx turlarini import qilish
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<TablePriceType
|
||||
data={data ? data : []}
|
||||
isError={isError}
|
||||
isLoading={isLoading}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default PriceTypeList;
|
||||
@@ -6,6 +6,7 @@ import { type AxiosResponse } from "axios";
|
||||
export const user_api = {
|
||||
async list(params: {
|
||||
page?: number;
|
||||
search?: string;
|
||||
page_size?: number;
|
||||
}): Promise<AxiosResponse<UserListRes>> {
|
||||
const res = await httpClient.get(`${API_URLS.UsesList}`, { params });
|
||||
@@ -42,4 +43,15 @@ export const user_api = {
|
||||
const res = await httpClient.post(API_URLS.PasswordSet(id), body);
|
||||
return res;
|
||||
},
|
||||
|
||||
async price_type_set({
|
||||
body,
|
||||
id,
|
||||
}: {
|
||||
id: string | number;
|
||||
body: { ids: number[] };
|
||||
}) {
|
||||
const res = await httpClient.post(API_URLS.PriceTypeSet(id), body);
|
||||
return res;
|
||||
},
|
||||
};
|
||||
|
||||
@@ -2,13 +2,11 @@ export interface UserData {
|
||||
id: number;
|
||||
username: string;
|
||||
first_name: string;
|
||||
last_name: string;
|
||||
middle_name: null | string;
|
||||
gender: "M" | "F" | null;
|
||||
region: null | string;
|
||||
address: null | string;
|
||||
name: string;
|
||||
short_name: string;
|
||||
created_at: string;
|
||||
password_set: boolean;
|
||||
price_types: number[];
|
||||
}
|
||||
|
||||
export interface UserListRes {
|
||||
|
||||
@@ -1,56 +1,5 @@
|
||||
import type { UserData, UserListRes } from "@/features/users/lib/data";
|
||||
import AddUsers from "@/features/users/ui/AddUsers";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { Plus } from "lucide-react";
|
||||
import { type Dispatch, type SetStateAction } from "react";
|
||||
|
||||
interface Props {
|
||||
setRegionValue: Dispatch<SetStateAction<UserListRes | null>>;
|
||||
dialogOpen: boolean;
|
||||
setDialogOpen: Dispatch<SetStateAction<boolean>>;
|
||||
editingUser: UserData | null;
|
||||
setEditingUser: Dispatch<SetStateAction<UserData | null>>;
|
||||
}
|
||||
|
||||
const Filter = ({
|
||||
dialogOpen,
|
||||
setDialogOpen,
|
||||
editingUser,
|
||||
setEditingUser,
|
||||
}: Props) => {
|
||||
return (
|
||||
<div className="flex flex-wrap gap-2 items-center">
|
||||
<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>
|
||||
);
|
||||
const Filter = () => {
|
||||
return <div className="flex flex-wrap gap-2 items-center"></div>;
|
||||
};
|
||||
|
||||
export default Filter;
|
||||
|
||||
@@ -1,11 +1,18 @@
|
||||
"use client";
|
||||
|
||||
import price_type_api from "@/features/price-type/lib/api";
|
||||
import { user_api } from "@/features/users/lib/api";
|
||||
import type { UserData } from "@/features/users/lib/data";
|
||||
import { Avatar, AvatarFallback } from "@/shared/ui/avatar";
|
||||
import { Badge } from "@/shared/ui/badge";
|
||||
import formatDate from "@/shared/lib/formatDate";
|
||||
import { cn } from "@/shared/lib/utils";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { Card, CardContent, CardHeader } from "@/shared/ui/card";
|
||||
import {
|
||||
Command,
|
||||
CommandEmpty,
|
||||
CommandGroup,
|
||||
CommandItem,
|
||||
CommandList,
|
||||
} from "@/shared/ui/command";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
@@ -21,11 +28,20 @@ import {
|
||||
} from "@/shared/ui/form";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import { Label } from "@/shared/ui/label";
|
||||
import { Popover, PopoverContent, PopoverTrigger } from "@/shared/ui/popover";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/shared/ui/table";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import type { AxiosError } from "axios";
|
||||
import { Calendar, Edit, MapPin } from "lucide-react";
|
||||
import { useState, type Dispatch, type SetStateAction } from "react";
|
||||
import { Check, ChevronsUpDown, Edit } from "lucide-react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { toast } from "sonner";
|
||||
import z from "zod";
|
||||
@@ -35,54 +51,36 @@ const passwordSet = z.object({
|
||||
.string()
|
||||
.min(8, { message: "Eng kamida 8ta belgi bolishi kerak" }),
|
||||
});
|
||||
export function UserCard({
|
||||
user,
|
||||
// setEditingUser,
|
||||
// setDialogOpen,
|
||||
// setOpenDelete,
|
||||
// setUserDelete,
|
||||
}: {
|
||||
user: UserData;
|
||||
setEditingUser?: (user: UserData) => void;
|
||||
setDialogOpen?: (open: boolean) => void;
|
||||
setOpenDelete?: Dispatch<SetStateAction<boolean>>;
|
||||
setUserDelete?: Dispatch<SetStateAction<UserData | null>>;
|
||||
}) {
|
||||
const getGenderColor = (gender: "M" | "F" | null) => {
|
||||
switch (gender) {
|
||||
case "M":
|
||||
return "bg-blue-100 text-blue-800";
|
||||
case "F":
|
||||
return "bg-pink-100 text-pink-800";
|
||||
default:
|
||||
return "bg-gray-100 text-gray-800";
|
||||
}
|
||||
};
|
||||
|
||||
const getGenderLabel = (gender: "M" | "F" | null) => {
|
||||
switch (gender) {
|
||||
case "M":
|
||||
return "Erkak";
|
||||
case "F":
|
||||
return "Ayol";
|
||||
default:
|
||||
return "Ko'rsatilmagan";
|
||||
}
|
||||
};
|
||||
interface UserListProps {
|
||||
users: UserData[];
|
||||
}
|
||||
|
||||
const getInitials = () => {
|
||||
if (user.first_name && user.last_name) {
|
||||
return `${user.first_name[0]}${user.last_name[0]}`.toUpperCase();
|
||||
}
|
||||
return user.username.substring(0, 2).toUpperCase();
|
||||
};
|
||||
export function UserCard({ users }: UserListProps) {
|
||||
const [edit, setEdit] = useState<number | string | null>(null);
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
const [openPriceId, setOpenPriceId] = useState<number | null>(null);
|
||||
const queryClient = useQueryClient();
|
||||
const [values, setValues] = useState<Record<string | number, string[]>>({});
|
||||
|
||||
const getFullName = () => {
|
||||
const parts = [user.first_name, user.middle_name, user.last_name].filter(
|
||||
Boolean,
|
||||
);
|
||||
return parts.length > 0 ? parts.join(" ") : user.username;
|
||||
};
|
||||
const { data } = useQuery({
|
||||
queryKey: ["price_type"],
|
||||
queryFn: () => price_type_api.list(),
|
||||
select(data) {
|
||||
return data.data;
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const initialValues: Record<string | number, string[]> = {};
|
||||
users.forEach((user) => {
|
||||
if (user.price_types) {
|
||||
initialValues[user.id] = user.price_types.map((id) => id.toString());
|
||||
}
|
||||
});
|
||||
|
||||
setValues(initialValues);
|
||||
}, [users]);
|
||||
|
||||
const form = useForm<z.infer<typeof passwordSet>>({
|
||||
resolver: zodResolver(passwordSet),
|
||||
@@ -91,11 +89,6 @@ export function UserCard({
|
||||
},
|
||||
});
|
||||
|
||||
const [edit, setEdit] = useState<number | string | null>(null);
|
||||
const [open, setOpen] = useState<boolean>(false);
|
||||
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { mutate } = useMutation({
|
||||
mutationFn: ({
|
||||
id,
|
||||
@@ -107,6 +100,7 @@ export function UserCard({
|
||||
onSuccess: () => {
|
||||
setOpen(false);
|
||||
setEdit(null);
|
||||
form.reset();
|
||||
queryClient.refetchQueries({ queryKey: ["user_list"] });
|
||||
toast.success("Parol qo'yildi", {
|
||||
richColors: true,
|
||||
@@ -124,6 +118,52 @@ export function UserCard({
|
||||
},
|
||||
});
|
||||
|
||||
const { mutate: price_type_set } = useMutation({
|
||||
mutationFn: ({
|
||||
id,
|
||||
body,
|
||||
}: {
|
||||
id: number | string;
|
||||
body: { ids: number[] };
|
||||
}) => user_api.price_type_set({ body, id }),
|
||||
onSuccess: () => {
|
||||
setOpenPriceId(null);
|
||||
queryClient.refetchQueries({ queryKey: ["user_list"] });
|
||||
toast.success("Narx qo'yildi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
onError: (err: AxiosError) => {
|
||||
const errData = (err.response?.data as { data: string }).data;
|
||||
const errMessage = (err.response?.data as { message: string }).message;
|
||||
|
||||
toast.error(errData || errMessage || "Xatolik yuz berdi", {
|
||||
richColors: true,
|
||||
position: "top-center",
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const toggleValue = (userId: string | number, value: string) => {
|
||||
let newUserValues: string[] = [];
|
||||
|
||||
setValues((prev) => {
|
||||
const userValues = prev[userId] || [];
|
||||
newUserValues = userValues.includes(value)
|
||||
? userValues.filter((v) => v !== value)
|
||||
: [...userValues, value];
|
||||
return { ...prev, [userId]: newUserValues };
|
||||
});
|
||||
const currentUserValues = values[userId] || [];
|
||||
const nextUserValues = currentUserValues.includes(value)
|
||||
? currentUserValues.filter((v) => v !== value)
|
||||
: [...currentUserValues, value];
|
||||
|
||||
setValues((prev) => ({ ...prev, [userId]: nextUserValues }));
|
||||
price_type_set({ body: { ids: nextUserValues.map(Number) }, id: userId });
|
||||
};
|
||||
|
||||
function onSubmit(value: z.infer<typeof passwordSet>) {
|
||||
if (edit) {
|
||||
mutate({ body: { password: value.password }, id: edit });
|
||||
@@ -131,82 +171,138 @@ export function UserCard({
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="group hover:shadow-md transition-shadow">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar>
|
||||
<AvatarFallback className="bg-gradient-to-br from-purple-100 to-blue-100 text-purple-700">
|
||||
{getInitials()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<h3 className="font-semibold">{getFullName()}</h3>
|
||||
<p className="text-sm text-muted-foreground">@{user.username}</p>
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead className="w-[50px]">ID</TableHead>
|
||||
<TableHead>To'liq ism</TableHead>
|
||||
<TableHead>Username</TableHead>
|
||||
<TableHead>Ro'yxatdan o'tgan</TableHead>
|
||||
<TableHead>Biriktirilgan narx</TableHead>
|
||||
<TableHead className="text-right">Amallar</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{users.map((user) => {
|
||||
const userValues = values[user.id] || [];
|
||||
return (
|
||||
<TableRow key={user.id} className="hover:bg-muted/50">
|
||||
<TableCell className="font-medium">{user.id}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-col">
|
||||
<span className="font-medium">{user.name}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Badge className={getGenderColor(user.gender)}>
|
||||
{getGenderLabel(user.gender)}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-3">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Calendar className="h-4 w-4" />
|
||||
<span>
|
||||
Ro'yxatdan o'tgan:{" "}
|
||||
{new Date(user.created_at).toLocaleDateString("uz-UZ", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
})}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<span className="text-muted-foreground">
|
||||
@{user.username}
|
||||
</span>
|
||||
</div>
|
||||
</TableCell>
|
||||
|
||||
{user.region && (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span>Hudud: {user.region}</span>
|
||||
</div>
|
||||
<TableCell>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{formatDate.format(user.created_at, "DD-MM-YYYY")}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Popover
|
||||
open={openPriceId === user.id}
|
||||
onOpenChange={(isOpen) =>
|
||||
setOpenPriceId(isOpen ? user.id : null)
|
||||
}
|
||||
>
|
||||
<PopoverTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
role="combobox"
|
||||
aria-expanded={openPriceId === user.id}
|
||||
className="w-[200px] justify-between cursor-pointer"
|
||||
>
|
||||
<span className="truncate">
|
||||
{userValues.length > 0
|
||||
? userValues
|
||||
.map(
|
||||
(id) =>
|
||||
data?.find(
|
||||
(item) => item.id.toString() === id,
|
||||
)?.name,
|
||||
)
|
||||
.filter(Boolean)
|
||||
.join(", ")
|
||||
: "Narxni tanlang"}
|
||||
</span>
|
||||
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
|
||||
<PopoverContent className="w-[200px] p-0" align="start">
|
||||
<Command>
|
||||
<CommandList>
|
||||
<CommandEmpty>Topilmadi.</CommandEmpty>
|
||||
<CommandGroup>
|
||||
{data?.map((option) => {
|
||||
const isSelected = userValues.includes(
|
||||
option.id.toString(),
|
||||
);
|
||||
|
||||
return (
|
||||
<CommandItem
|
||||
key={option.id}
|
||||
onSelect={() =>
|
||||
toggleValue(user.id, option.id.toString())
|
||||
}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<Check
|
||||
className={cn(
|
||||
"mr-2 h-4 w-4",
|
||||
isSelected ? "opacity-100" : "opacity-0",
|
||||
)}
|
||||
|
||||
{user.address && (
|
||||
<div className="flex items-start gap-2 text-sm text-muted-foreground">
|
||||
<MapPin className="h-4 w-4 mt-0.5" />
|
||||
<span>Manzil: {user.address}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* ID ma'lumoti */}
|
||||
<div className="pt-2 border-t text-xs text-muted-foreground">
|
||||
ID: {user.id}
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 pt-2">
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
/>
|
||||
{option.name}
|
||||
</CommandItem>
|
||||
);
|
||||
})}
|
||||
</CommandGroup>
|
||||
</CommandList>
|
||||
</Command>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Dialog
|
||||
open={open && edit === user.id}
|
||||
onOpenChange={(isOpen) => {
|
||||
setOpen(isOpen);
|
||||
if (!isOpen) {
|
||||
setEdit(null);
|
||||
form.reset();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<DialogTrigger asChild>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="flex-1 cursor-pointer"
|
||||
className="cursor-pointer"
|
||||
onClick={() => {
|
||||
setOpen(true);
|
||||
setEdit(user.id);
|
||||
}}
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
{user.password_set ? "Parolni o'zgartirish" : "Parol qo'yish"}
|
||||
Parol {user.password_set ? "O'zgartirish" : "Qo'yish"}
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader className="text-xl font-semibold">
|
||||
Parolni qo'yish
|
||||
Parolni {user.password_set ? "o'zgartirish" : "qo'yish"}
|
||||
</DialogHeader>
|
||||
<div>
|
||||
<Form {...form}>
|
||||
<form
|
||||
className="space-y-2"
|
||||
className="space-y-4"
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
>
|
||||
<FormField
|
||||
@@ -214,9 +310,10 @@ export function UserCard({
|
||||
control={form.control}
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<Label>Parolni yozing</Label>
|
||||
<Label>Yangi parol</Label>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="12345678"
|
||||
className="h-12 focus-visible:ring-0"
|
||||
{...field}
|
||||
@@ -226,8 +323,22 @@ export function UserCard({
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<div className="flex justify-end">
|
||||
<Button className="bg-blue-500 hover:bg-blue-600 cursor-pointer">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setOpen(false);
|
||||
setEdit(null);
|
||||
form.reset();
|
||||
}}
|
||||
>
|
||||
Bekor qilish
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
className="bg-blue-500 hover:bg-blue-600 cursor-pointer"
|
||||
>
|
||||
Tasdiqlash
|
||||
</Button>
|
||||
</div>
|
||||
@@ -236,8 +347,12 @@ export function UserCard({
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -13,14 +13,7 @@ interface Props {
|
||||
setUserDelete?: Dispatch<SetStateAction<UserData | null>>;
|
||||
}
|
||||
|
||||
const UserTable = ({
|
||||
data,
|
||||
isLoading,
|
||||
isError,
|
||||
setEditingUser,
|
||||
setOpenDelete,
|
||||
setUserDelete,
|
||||
}: Props) => {
|
||||
const UserTable = ({ data, isLoading, isError }: Props) => {
|
||||
return (
|
||||
<div className="flex-1 overflow-auto">
|
||||
{isLoading && (
|
||||
@@ -36,23 +29,7 @@ const UserTable = ({
|
||||
</div>
|
||||
)}
|
||||
|
||||
{!isLoading && !isError && (
|
||||
<>
|
||||
{/* Users Grid */}
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{data?.map((user) => (
|
||||
<UserCard
|
||||
setOpenDelete={setOpenDelete}
|
||||
setUserDelete={setUserDelete}
|
||||
key={user.id}
|
||||
// setDialogOpen={setDialogOpen}
|
||||
setEditingUser={setEditingUser}
|
||||
user={{ ...user }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{!isLoading && !isError && <>{data && <UserCard users={data} />}</>}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -3,10 +3,11 @@ import type { UserData } from "@/features/users/lib/data";
|
||||
import DeleteUser from "@/features/users/ui/DeleteUser";
|
||||
import UserTable from "@/features/users/ui/UserTable";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { Input } from "@/shared/ui/input";
|
||||
import Pagination from "@/shared/ui/pagination";
|
||||
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { Loader2, Search } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
@@ -15,17 +16,19 @@ const UsersList = () => {
|
||||
const queryClient = useQueryClient();
|
||||
const [opneDelete, setOpenDelete] = useState(false);
|
||||
const [userDelete, setUserDelete] = useState<UserData | null>(null);
|
||||
const [search, setSearch] = useState<string>("");
|
||||
|
||||
// const [regionValue, setRegionValue] = useState<UserListRes | null>(null);
|
||||
const limit = 20;
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const { data, isLoading, isError } = useQuery({
|
||||
queryKey: ["user_list", currentPage],
|
||||
queryKey: ["user_list", currentPage, search],
|
||||
queryFn: () => {
|
||||
return user_api.list({
|
||||
page: currentPage,
|
||||
page_size: limit,
|
||||
search: search,
|
||||
});
|
||||
},
|
||||
select(data) {
|
||||
@@ -66,14 +69,14 @@ const UsersList = () => {
|
||||
"Foydalanuvchini import qilish"
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* <Filter
|
||||
dialogOpen={dialogOpen}
|
||||
setDialogOpen={setDialogOpen}
|
||||
editingUser={editingUser}
|
||||
setEditingUser={setEditingUser}
|
||||
setRegionValue={setRegionValue}
|
||||
/> */}
|
||||
</div>
|
||||
<div className="relative h-12 mb-4">
|
||||
<Search className="text-gray-400 absolute top-1/2 -translate-y-1/2 left-4" />
|
||||
<Input
|
||||
className="w-96 h-12 pl-12 !text-lg placeholder:text-lg focus-visible:ring-0"
|
||||
placeholder="Qidirish..."
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UserTable
|
||||
|
||||
12
src/pages/PriceType.tsx
Normal file
12
src/pages/PriceType.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import PriceTypeList from "@/features/price-type/ui/priceTypeList";
|
||||
import SidebarLayout from "@/SidebarLayout";
|
||||
|
||||
const PriceType = () => {
|
||||
return (
|
||||
<SidebarLayout>
|
||||
<PriceTypeList />
|
||||
</SidebarLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export default PriceType;
|
||||
@@ -4,6 +4,7 @@ import Categories from "@/pages/Categories";
|
||||
import Faq from "@/pages/Faq";
|
||||
import HomePage from "@/pages/Home";
|
||||
import Orders from "@/pages/Orders";
|
||||
import PriceType from "@/pages/PriceType";
|
||||
import Product from "@/pages/Product";
|
||||
import Questionnaire from "@/pages/Questionnaire";
|
||||
import Units from "@/pages/Units";
|
||||
@@ -58,6 +59,10 @@ const AppRouter = () => {
|
||||
path: "/dashboard/questionnaire",
|
||||
element: <Questionnaire />,
|
||||
},
|
||||
{
|
||||
path: "/dashboard/price-type",
|
||||
element: <PriceType />,
|
||||
},
|
||||
]);
|
||||
|
||||
return routes;
|
||||
|
||||
@@ -15,6 +15,7 @@ export const API_URLS = {
|
||||
UnitsDelete: (id: string) => `${API_V}admin/unity/${id}/delete/`,
|
||||
BannersList: `${API_V}admin/banner/list/`,
|
||||
BannerCreate: `${API_V}admin/banner/create/`,
|
||||
BannerUpdate: (id: number) => `${API_V}admin/banner/${id}/update/`,
|
||||
BannerDelete: (id: string) => `${API_V}admin/banner/${id}/delete/`,
|
||||
OrdersList: `${API_V}admin/order/list/`,
|
||||
OrdersDelete: (id: string | number) => `${API_V}admin/order/${id}/delete/`,
|
||||
@@ -30,7 +31,7 @@ export const API_URLS = {
|
||||
`${API_V}admin/order/${id}/status_update/`,
|
||||
CreateProduct: `${API_V}admin/product/create/`,
|
||||
UpdateProduct: (id: string) => `${API_V}admin/product/${id}/update/`,
|
||||
DeleteProdut: (id: string) => `${API_V}admin/product/${id}/delete/`,
|
||||
DeleteProdut: `${API_V}admin/product/bulk-delete/`,
|
||||
QuestionnaireList: `${API_V}admin/questionnaire/list/`,
|
||||
Import_User: `${API_V}admin/user/import_users/`,
|
||||
Refresh_Token: `${API_V}accounts/refresh/token/`,
|
||||
@@ -41,4 +42,11 @@ export const API_URLS = {
|
||||
`${API_V}admin/category/${id}/upload_image/`,
|
||||
PasswordSet: (id: number | string) =>
|
||||
`${API_V}admin/user/${id}/set_password/`,
|
||||
PriceTypeList: `${API_V}shared/price_type/`,
|
||||
PriceTypeImport: `${API_V}shared/price_type/`,
|
||||
Update_Pyment_Type: (id: number) =>
|
||||
`${API_V}admin/product/${id}/update_payment_type/`,
|
||||
Import_Balance: `${API_V}admin/product/import/balance/`,
|
||||
PriceTypeSet: (id: number | string) =>
|
||||
`${API_V}admin/user/${id}/set_price_type/`,
|
||||
};
|
||||
|
||||
@@ -12,6 +12,7 @@
|
||||
"users": "Foydalanuvchilar",
|
||||
"Hech kim": "Hech kim",
|
||||
"Cancele": "Bekor qilish",
|
||||
"test": "test",
|
||||
"Rasm": "Rasm",
|
||||
"comment": "Izoh",
|
||||
"new": "Yangi",
|
||||
|
||||
@@ -7,41 +7,80 @@ interface Props {
|
||||
currentPage: number;
|
||||
setCurrentPage: Dispatch<SetStateAction<number>>;
|
||||
totalPages: number;
|
||||
maxVisible?: number; // nechta sahifa ko‘rsatiladi
|
||||
handlePageChange?: (page: number) => void;
|
||||
}
|
||||
|
||||
const Pagination = ({ currentPage, setCurrentPage, totalPages }: Props) => {
|
||||
const Pagination = ({
|
||||
currentPage,
|
||||
setCurrentPage,
|
||||
totalPages,
|
||||
handlePageChange,
|
||||
maxVisible = 5,
|
||||
}: Props) => {
|
||||
if (totalPages <= 1) return null;
|
||||
|
||||
const getPageNumbers = () => {
|
||||
const pages = [];
|
||||
const half = Math.floor(maxVisible / 2);
|
||||
let start = Math.max(currentPage - half, 1);
|
||||
const end = Math.min(start + maxVisible - 1, totalPages);
|
||||
|
||||
if (end - start + 1 < maxVisible) {
|
||||
start = Math.max(end - maxVisible + 1, 1);
|
||||
}
|
||||
|
||||
for (let i = start; i <= end; i++) {
|
||||
pages.push(i);
|
||||
}
|
||||
|
||||
return pages;
|
||||
};
|
||||
|
||||
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}
|
||||
onClick={() => {
|
||||
setCurrentPage((prev) => Math.max(prev - 1, 1));
|
||||
if (handlePageChange) {
|
||||
handlePageChange(Math.max(currentPage - 1, 1));
|
||||
}
|
||||
}}
|
||||
className="cursor-pointer"
|
||||
onClick={() => setCurrentPage((prev) => Math.max(prev - 1, 1))}
|
||||
>
|
||||
<ChevronLeft />
|
||||
</Button>
|
||||
{Array.from({ length: totalPages }, (_, i) => (
|
||||
|
||||
{getPageNumbers().map((page) => (
|
||||
<Button
|
||||
key={i}
|
||||
variant={currentPage === i + 1 ? "default" : "outline"}
|
||||
key={page}
|
||||
variant={currentPage === page ? "default" : "outline"}
|
||||
size="icon"
|
||||
className={clsx(
|
||||
currentPage === i + 1
|
||||
? "bg-blue-500 hover:bg-blue-500"
|
||||
: " bg-none hover:bg-blue-200",
|
||||
currentPage === page
|
||||
? "bg-blue-500 hover:bg-blue-500 text-white"
|
||||
: "hover:bg-blue-200",
|
||||
"cursor-pointer",
|
||||
)}
|
||||
onClick={() => setCurrentPage(i + 1)}
|
||||
onClick={() => setCurrentPage(page)}
|
||||
>
|
||||
{i + 1}
|
||||
{page}
|
||||
</Button>
|
||||
))}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
disabled={currentPage === totalPages}
|
||||
onClick={() => setCurrentPage((prev) => Math.min(prev + 1, totalPages))}
|
||||
onClick={() => {
|
||||
setCurrentPage((prev) => Math.min(prev + 1, totalPages));
|
||||
if (handlePageChange) {
|
||||
handlePageChange(Math.max(currentPage + 1, 1));
|
||||
}
|
||||
}}
|
||||
className="cursor-pointer"
|
||||
>
|
||||
<ChevronRight />
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {
|
||||
BanknoteIcon,
|
||||
CircleQuestionMark,
|
||||
FileText,
|
||||
FolderOpen,
|
||||
@@ -7,7 +8,6 @@ import {
|
||||
LogOut,
|
||||
Package,
|
||||
Ruler,
|
||||
ShoppingCart,
|
||||
Users,
|
||||
} from "lucide-react";
|
||||
import { Link, useLocation, useNavigate } from "react-router-dom";
|
||||
@@ -42,6 +42,11 @@ const items = [
|
||||
url: "/dashboard/categories",
|
||||
icon: FolderOpen,
|
||||
},
|
||||
{
|
||||
title: "Narx turlari",
|
||||
url: "/dashboard/price-type",
|
||||
icon: BanknoteIcon,
|
||||
},
|
||||
{
|
||||
title: "Birliklar",
|
||||
url: "/dashboard/units",
|
||||
@@ -52,11 +57,11 @@ const items = [
|
||||
url: "/dashboard/banners",
|
||||
icon: Image,
|
||||
},
|
||||
{
|
||||
title: "Zakazlar",
|
||||
url: "/dashboard/orders",
|
||||
icon: ShoppingCart,
|
||||
},
|
||||
// {
|
||||
// title: "Zakazlar",
|
||||
// url: "/dashboard/orders",
|
||||
// icon: ShoppingCart,
|
||||
// },
|
||||
{
|
||||
title: "Foydalanuvchilar",
|
||||
url: "/dashboard/users",
|
||||
|
||||
10
vercel.json
10
vercel.json
@@ -1,8 +1,12 @@
|
||||
{
|
||||
"rewrites": [
|
||||
"cleanUrls": true,
|
||||
"routes": [
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"destination": "/index.html"
|
||||
"handle": "filesystem"
|
||||
},
|
||||
{
|
||||
"src": "/.*",
|
||||
"dest": "/index.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -7,11 +7,15 @@ import tsconfigPaths from "vite-tsconfig-paths";
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react(), tailwindcss(), tsconfigPaths()],
|
||||
base: "./",
|
||||
build: {
|
||||
outDir: "dist",
|
||||
},
|
||||
resolve: {
|
||||
alias: [{ find: "@", replacement: path.resolve(__dirname, "src") }],
|
||||
},
|
||||
server: {
|
||||
port: 3002,
|
||||
port: 8081,
|
||||
open: true,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user