hamid zarghami
76 lines
2.1 KiB
TypeScript
76 lines
2.1 KiB
TypeScript
import { type FC } from "react";
|
||
import Table from "@/components/Table";
|
||
import Filters from "@/components/Filters";
|
||
import { Add } from "iconsax-react";
|
||
import Button from "@/components/Button";
|
||
import { Link } from "react-router-dom";
|
||
import { Pages } from "@/config/Pages";
|
||
import {
|
||
useDeleteUserGroup,
|
||
useGetUserGroups,
|
||
} from "./hooks/useUserGroupData";
|
||
import { useUserGroupFilters } from "./hooks/useUserGroupFilters";
|
||
import { getUserGroupTableColumns } from "./components/UserGroupTableColumns";
|
||
import { useUserGroupFiltersFields } from "./components/UserGroupFiltersFields";
|
||
|
||
const UserGroupsList: FC = () => {
|
||
const {
|
||
filters,
|
||
currentPage,
|
||
apiParams,
|
||
handleFiltersChange,
|
||
handlePageChange,
|
||
limit,
|
||
} = useUserGroupFilters();
|
||
|
||
const { data: groupsData, isLoading } = useGetUserGroups(apiParams);
|
||
const { mutate: deleteUserGroup, isPending: isDeleting } =
|
||
useDeleteUserGroup();
|
||
|
||
const groups = groupsData?.data || [];
|
||
const columns = getUserGroupTableColumns({
|
||
onDelete: (id: string) => deleteUserGroup(id),
|
||
isDeleting,
|
||
});
|
||
const filterFields = useUserGroupFiltersFields();
|
||
const totalPages = Math.ceil(groups.length / limit) || 1;
|
||
|
||
return (
|
||
<div className="mt-5">
|
||
<div className="flex justify-between items-center">
|
||
<h1 className="text-lg font-light">گروههای مشتری</h1>
|
||
<Link to={Pages.customers.groupsAdd}>
|
||
<Button className="w-fit px-6">
|
||
<div className="flex gap-2 items-center">
|
||
<Add color="#fff" size={20} />
|
||
<span>افزودن گروه</span>
|
||
</div>
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="mt-8">
|
||
<Filters
|
||
fields={filterFields}
|
||
onChange={handleFiltersChange}
|
||
initialValues={filters}
|
||
searchField="search"
|
||
/>
|
||
</div>
|
||
|
||
<Table
|
||
columns={columns}
|
||
data={groups}
|
||
isloading={isLoading}
|
||
pagination={{
|
||
currentPage,
|
||
totalPages,
|
||
onPageChange: handlePageChange,
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default UserGroupsList;
|