Crud group

src/pages/customers/groups/List.tsx

@@ -0,0 +1,75 @@
+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;