feat: deals filters

package.json

@@ -26,6 +26,7 @@
     "@tanstack/react-query": "^5.83.0",
     "axios": "^1.11.0",
     "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "date-fns-tz": "^3.2.0",
     "dayjs": "^1.11.15",
@@ -33,7 +34,7 @@
     "i18n-iso-countries": "^7.14.0",
     "lexorank": "^1.0.5",
     "libphonenumber-js": "^1.12.10",
-    "mantine-react-table": "^2.0.0-beta.9",
+    "mantine-datatable": "^8.2.0",
     "next": "15.4.7",
     "react": "19.1.0",
     "react-dom": "19.1.0",

src/app/deals/components/desktop/DealsTable/DealsTable.tsx

@@ -1,63 +1,39 @@
-import { IconEdit } from "@tabler/icons-react";
+import { FC } from "react";
-import { MRT_TableOptions } from "mantine-react-table";
+import { IconMoodSad } from "@tabler/icons-react";
-import { ActionIcon, Group, Pagination, Stack, Tooltip } from "@mantine/core";
+import { Group, Pagination, Stack, Text } from "@mantine/core";
 import useDealsTableColumns from "@/app/deals/components/desktop/DealsTable/useDealsTableColumns";
 import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import BaseTable from "@/components/ui/BaseTable/BaseTable";
-import { useDrawersContext } from "@/drawers/DrawersContext";
-import { DealSchema } from "@/lib/client";
 
-const DealsTable = () => {
+const DealsTable: FC = () => {
-    const { deals, paginationInfo, page, setPage, dealsCrud } =
+    const { deals, paginationInfo, page, setPage, dealsFilters } =
         useDealsContext();
-    const { openDrawer } = useDrawersContext();
     const columns = useDealsTableColumns();
-    const defaultSorting = [{ id: "createdAt", desc: false }];
-
-    const onEditDeal = (deal: DealSchema) => {
-        openDrawer({
-            key: "dealEditorDrawer",
-            props: {
-                deal,
-                dealsCrud,
-            },
-        });
-    };
 
     return (
         <Stack
             gap={"xs"}
             h={"calc(100vh - 125px)"}>
             <BaseTable
-                data={deals}
+                records={[...deals]}
                 columns={columns}
-                restProps={
+                sortStatus={{
-                    {
+                    columnAccessor: dealsFilters.sortingField,
-                        enableSorting: true,
+                    direction: dealsFilters.sortingDirection,
-                        enableColumnActions: false,
+                }}
-                        paginationDisplayMode: "pages",
+                onSortStatusChange={sorting => {
-                        initialState: {
+                    dealsFilters.setSortingField(sorting.columnAccessor);
-                            sorting: defaultSorting,
+                    dealsFilters.setSortingDirection(sorting.direction);
-                        },
+                }}
-                        mantinePaginationProps: {
+                emptyState={
-                            showRowsPerPage: false,
+                    <Group
-                        },
+                        align={"center"}
-                        enableStickyHeader: true,
+                        gap={"xs"}>
-                        enableStickyFooter: true,
+                        <Text>Нет сделок</Text>
-                        enableRowActions: true,
+                        <IconMoodSad />
-                        renderRowActions: ({ row }) => (
+                    </Group>
-                            <Tooltip label="Редактировать">
-                                <ActionIcon
-                                    bdrs={"md"}
-                                    size={"lg"}
-                                    onClick={() => onEditDeal(row.original)}
-                                    variant={"default"}>
-                                    <IconEdit />
-                                </ActionIcon>
-                            </Tooltip>
-                        ),
-                    } as MRT_TableOptions<DealSchema>
                 }
+                groups={undefined}
             />
             {paginationInfo && paginationInfo.totalPages > 1 && (
                 <Group justify={"flex-end"}>

src/app/deals/components/desktop/DealsTable/useDealsTableColumns.tsx

@@ -1,33 +1,67 @@
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
-import { MRT_ColumnDef } from "mantine-react-table";
+import { IconEdit } from "@tabler/icons-react";
+import { DataTableColumn } from "mantine-datatable";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
+import { useDrawersContext } from "@/drawers/DrawersContext";
 import { DealSchema } from "@/lib/client";
 import { utcDateTimeToLocalString } from "@/utils/datetime";
 
 const useDealsTableColumns = () => {
-    return useMemo<MRT_ColumnDef<DealSchema>[]>(
+    const { dealsCrud } = useDealsContext();
-        () => [
+    const { openDrawer } = useDrawersContext();
+
+    const onEditDeal = useCallback(
+        (deal: DealSchema) => {
+            openDrawer({
+                key: "dealEditorDrawer",
+                props: {
+                    deal,
+                    dealsCrud,
+                },
+            });
+        },
+        [openDrawer, dealsCrud]
+    );
+
+    return useMemo(
+        () =>
+            [
                 {
-                accessorKey: "id",
+                    accessor: "actions",
-                header: "Номер",
+                    title: "Действия",
-                size: 20,
+                    sortable: false,
+                    textAlign: "center",
+                    width: "0%",
+                    render: deal => (
+                        <Tooltip label="Редактировать">
+                            <ActionIcon
+                                bdrs={"md"}
+                                size={"lg"}
+                                onClick={() => onEditDeal(deal)}
+                                variant={"default"}>
+                                <IconEdit />
+                            </ActionIcon>
+                        </Tooltip>
+                    ),
                 },
                 {
-                accessorKey: "name",
+                    accessor: "id",
-                header: "Название",
+                    title: "Номер",
-                enableSorting: false,
+                    sortable: true,
                 },
                 {
-                header: "Дата создания",
+                    accessor: "name",
-                accessorKey: "createdAt",
+                    title: "Название",
-                Cell: ({ row }) =>
-                    utcDateTimeToLocalString(row.original.createdAt),
-                enableSorting: true,
-                sortingFn: (rowA, rowB) =>
-                    new Date(rowB.original.createdAt).getTime() -
-                    new Date(rowA.original.createdAt).getTime(),
                 },
-        ],
+                {
-        []
+                    title: "Дата создания",
+                    accessor: "createdAt",
+                    render: deal => utcDateTimeToLocalString(deal.createdAt),
+                    sortable: true,
+                },
+            ] as DataTableColumn<DealSchema>[],
+        [onEditDeal]
     );
 };
 

src/app/deals/components/desktop/ToolPanelAction/ToolPanelAction.tsx

@@ -1,12 +1,12 @@
 import { FC, PropsWithChildren } from "react";
 import { ActionIcon, Box } from "@mantine/core";
-import style from "./ProjectAction.module.css";
+import style from "./ToolPanelAction.module.css";
 
 type Props = {
     onClick: () => void;
 };
 
-const ProjectAction: FC<PropsWithChildren<Props>> = ({
+const ToolPanelAction: FC<PropsWithChildren<Props>> = ({
     onClick,
     children,
 }) => {
@@ -23,4 +23,4 @@ const ProjectAction: FC<PropsWithChildren<Props>> = ({
     );
 };
 
-export default ProjectAction;
+export default ToolPanelAction;

src/app/deals/components/desktop/TopToolPanel/TopToolPanel.tsx

@@ -1,16 +1,21 @@
 "use client";
 
-import { IconEdit, IconPlus } from "@tabler/icons-react";
+import { IconEdit, IconFilter, IconPlus } from "@tabler/icons-react";
 import { Flex, Group } from "@mantine/core";
 import { modals } from "@mantine/modals";
-import ProjectAction from "@/app/deals/components/desktop/ProjectAction/ProjectAction";
+import ToolPanelAction from "@/app/deals/components/desktop/ToolPanelAction/ToolPanelAction";
 import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import { useViewContext } from "@/app/deals/contexts/ViewContext";
+import DealsTableFiltersModal from "@/app/deals/modals/DealsTableFiltersModal/DealsTableFiltersModal";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
 import { useDrawersContext } from "@/drawers/DrawersContext";
 import useIsMobile from "@/hooks/utils/useIsMobile";
 
 const TopToolPanel = () => {
+    const { dealsFilters } = useDealsContext();
+    const { view } = useViewContext();
     const { projects, setSelectedProjectId, selectedProject, projectsCrud } =
         useProjectsContext();
     const { openDrawer } = useDrawersContext();
@@ -45,12 +50,22 @@ const TopToolPanel = () => {
                 wrap={"nowrap"}
                 align={"center"}
                 gap={"sm"}>
-                <ProjectAction onClick={onEditClick}>
+                <DealsTableFiltersModal
+                    getOpener={onFiltersClick => (
+                        <ToolPanelAction onClick={onFiltersClick}>
+                            <IconFilter />
+                        </ToolPanelAction>
+                    )}
+                    filters={dealsFilters}
+                    selectedProject={selectedProject}
+                    boardAndStatusEnabled={view === "table"}
+                />
+                <ToolPanelAction onClick={onEditClick}>
                     <IconEdit />
-                </ProjectAction>
+                </ToolPanelAction>
-                <ProjectAction onClick={onCreateClick}>
+                <ToolPanelAction onClick={onCreateClick}>
                     <IconPlus />
-                </ProjectAction>
+                </ToolPanelAction>
                 <ProjectSelect
                     data={projects}
                     value={selectedProject}

src/app/deals/components/shared/PageBody/PageBody.tsx

@@ -1,44 +1,61 @@
 "use client";
 
-import { Box, Space } from "@mantine/core";
+import { Space } from "@mantine/core";
-import DealsTable from "@/app/deals/components/desktop/DealsTable/DealsTable";
+import TopToolPanel from "@/app/deals/components/desktop/TopToolPanel/TopToolPanel";
 import MainBlockHeader from "@/app/deals/components/mobile/MainBlockHeader/MainBlockHeader";
 import Funnel from "@/app/deals/components/shared/Funnel/Funnel";
 import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
 import { DealsContextProvider } from "@/app/deals/contexts/DealsContext";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import { useViewContext } from "@/app/deals/contexts/ViewContext";
+import PageBlock from "@/components/layout/PageBlock/PageBlock";
+import DealsTable from "../../desktop/DealsTable/DealsTable";
+
+const BoardView = () => (
+    <PageBlock>
+        <MainBlockHeader />
+        <Space h="md" />
+        <Funnel />
+    </PageBlock>
+);
+
+const TableView = () => (
+    <PageBlock>
+        <DealsTable />
+    </PageBlock>
+);
+
+const ScheduleView = () => <PageBlock>-</PageBlock>;
 
 const PageBody = () => {
     const { selectedBoard } = useBoardsContext();
     const { selectedProject } = useProjectsContext();
     const { view } = useViewContext();
 
-    if (view === "board") {
+    const getViewContent = () => {
-        return (
+        switch (view) {
-            <>
+            case "board":
-                <MainBlockHeader />
+                return <BoardView />;
-                <Space h={"md"} />
+            case "table":
-                <DealsContextProvider boardId={selectedBoard?.id}>
+                return <TableView />;
-                    <Funnel />
+            default:
-                </DealsContextProvider>
+                return <ScheduleView />;
-            </>
-        );
         }
+    };
 
+    const getContextProps = () => {
         if (view === "table") {
-        return (
+            return { withPagination: true, projectId: selectedProject?.id };
-            <Box>
-                <DealsContextProvider
-                    withPagination
-                    projectId={selectedProject?.id}>
-                    <DealsTable />
-                </DealsContextProvider>
-            </Box>
-        );
         }
+        return { boardId: selectedBoard?.id };
+    };
 
-    return <>-</>;
+    return (
+        <DealsContextProvider {...getContextProps()}>
+            <TopToolPanel />
+            {getViewContent()}
+        </DealsContextProvider>
+    );
 };
 
 export default PageBody;

src/app/deals/contexts/DealsContext.tsx

@@ -2,6 +2,7 @@
 
 import React from "react";
 import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
+import { DealsFilters } from "@/app/deals/hooks/useDealsFilters";
 import { DealsCrud, useDealsCrud } from "@/hooks/cruds/useDealsCrud";
 import useDealsList from "@/hooks/lists/useDealsList";
 import { DealSchema, PaginationInfoSchema } from "@/lib/client";
@@ -15,6 +16,7 @@ type DealsContextState = {
     paginationInfo?: PaginationInfoSchema;
     page: number;
     setPage: React.Dispatch<React.SetStateAction<number>>;
+    dealsFilters: DealsFilters;
 };
 
 type Props = {
@@ -24,11 +26,12 @@ type Props = {
 };
 
 const useDealsContextState = ({
-    withPagination = false,
     boardId,
     projectId,
+    withPagination = false,
 }: Props): DealsContextState => {
     const { statuses } = useStatusesContext();
+
     const dealsListObjects = useDealsList({
         boardId,
         projectId,

src/app/deals/drawers/DealEditorDrawer/components/GeneralTab.tsx

@@ -1,33 +1,33 @@
 import { FC, useState } from "react";
 import { isEqual } from "lodash";
-import { Button, Group, Stack, TextInput } from "@mantine/core";
+import { Button, Group, Stack, Text, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { ProjectsCrud } from "@/hooks/cruds/useProjectsCrud";
+import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
-import { ProjectSchema } from "@/lib/client";
+import { DealSchema } from "@/lib/client";
-
+import { utcDateTimeToLocalString } from "@/utils/datetime";
 
 type Props = {
-    projectsCrud: ProjectsCrud;
+    dealsCrud: DealsCrud;
-    project: ProjectSchema;
+    deal: DealSchema;
     onClose: () => void;
 };
 
-const GeneralTab: FC<Props> = ({ project, projectsCrud, onClose }) => {
+const GeneralTab: FC<Props> = ({ deal, dealsCrud, onClose }) => {
-    const [initialValues, setInitialValues] = useState(project);
+    const [initialValues, setInitialValues] = useState(deal);
-    const form = useForm<ProjectSchema>({
+    const form = useForm<DealSchema>({
         initialValues,
         validate: {
             name: value => !value && "Введите название",
         },
     });
 
-    const onSubmit = (values: ProjectSchema) => {
+    const onSubmit = (values: DealSchema) => {
-        projectsCrud.onUpdate(project.id, values);
+        dealsCrud.onUpdate(deal.id, values);
         setInitialValues(values);
     };
 
     const onDelete = () => {
-        projectsCrud.onDelete(project, onClose);
+        dealsCrud.onDelete(deal, onClose);
     };
 
     return (
@@ -37,6 +37,7 @@ const GeneralTab: FC<Props> = ({ project, projectsCrud, onClose }) => {
                     label={"Название"}
                     {...form.getInputProps("name")}
                 />
+                <Text>Создано: {utcDateTimeToLocalString(deal.createdAt)}</Text>
                 <Group
                     justify={"space-between"}
                     wrap={"nowrap"}>

src/app/deals/drawers/SelectedProjectEditorDrawer/components/GeneralTab.tsx

@@ -1,33 +1,33 @@
 import { FC, useState } from "react";
 import { isEqual } from "lodash";
-import { Button, Group, Stack, Text, TextInput } from "@mantine/core";
+import { Button, Group, Stack, TextInput } from "@mantine/core";
 import { useForm } from "@mantine/form";
-import { DealsCrud } from "@/hooks/cruds/useDealsCrud";
+import { ProjectsCrud } from "@/hooks/cruds/useProjectsCrud";
-import { DealSchema } from "@/lib/client";
+import { ProjectSchema } from "@/lib/client";
-import { utcDateTimeToLocalString } from "@/utils/datetime";
+
 
 type Props = {
-    dealsCrud: DealsCrud;
+    projectsCrud: ProjectsCrud;
-    deal: DealSchema;
+    project: ProjectSchema;
     onClose: () => void;
 };
 
-const GeneralTab: FC<Props> = ({ deal, dealsCrud, onClose }) => {
+const GeneralTab: FC<Props> = ({ project, projectsCrud, onClose }) => {
-    const [initialValues, setInitialValues] = useState(deal);
+    const [initialValues, setInitialValues] = useState(project);
-    const form = useForm<DealSchema>({
+    const form = useForm<ProjectSchema>({
         initialValues,
         validate: {
             name: value => !value && "Введите название",
         },
     });
 
-    const onSubmit = (values: DealSchema) => {
+    const onSubmit = (values: ProjectSchema) => {
-        dealsCrud.onUpdate(deal.id, values);
+        projectsCrud.onUpdate(project.id, values);
         setInitialValues(values);
     };
 
     const onDelete = () => {
-        dealsCrud.onDelete(deal, onClose);
+        projectsCrud.onDelete(project, onClose);
     };
 
     return (
@@ -37,7 +37,6 @@ const GeneralTab: FC<Props> = ({ deal, dealsCrud, onClose }) => {
                     label={"Название"}
                     {...form.getInputProps("name")}
                 />
-                <Text>Создано: {utcDateTimeToLocalString(deal.createdAt)}</Text>
                 <Group
                     justify={"space-between"}
                     wrap={"nowrap"}>

src/app/deals/drawers/SelectedProjectEditorDrawer/components/ProjectEditorBody.tsx

@@ -1,10 +1,10 @@
 import { FC } from "react";
 import { IconEdit } from "@tabler/icons-react";
 import { Tabs } from "@mantine/core";
-import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/components/GeneralTab";
+import GeneralTab from "@/app/deals/drawers/SelectedProjectEditorDrawer/components/GeneralTab";
 import { ProjectsCrud } from "@/hooks/cruds/useProjectsCrud";
 import { ProjectSchema } from "@/lib/client";
-import styles from "../DealEditorDrawer.module.css";
+import styles from "../SelectedProjectEditorDrawer.module.css";
 
 type Props = {
     projectsCrud: ProjectsCrud;

src/app/deals/hooks/useDealsFilters.ts

@@ -0,0 +1,53 @@
+import { Dispatch, SetStateAction, useState } from "react";
+import { useDebouncedValue } from "@mantine/hooks";
+import { BoardSchema, SortDir, StatusSchema } from "@/lib/client";
+
+export type DealsFilters = {
+    id?: number;
+    debouncedId?: number;
+    setId: Dispatch<SetStateAction<number | undefined>>;
+    name?: string;
+    debouncedName?: string;
+    setName: Dispatch<SetStateAction<string | undefined>>;
+    board: BoardSchema | null;
+    setBoard: Dispatch<SetStateAction<BoardSchema | null>>;
+    status: StatusSchema | null;
+    setStatus: Dispatch<SetStateAction<StatusSchema | null>>;
+    sortingField: string;
+    setSortingField: Dispatch<SetStateAction<string>>;
+    sortingDirection: SortDir;
+    setSortingDirection: Dispatch<SetStateAction<SortDir>>;
+};
+
+const useDealsFilters = (): DealsFilters => {
+    const [id, setId] = useState<number>();
+    const [debouncedId] = useDebouncedValue(id, 300);
+
+    const [name, setName] = useState<string>();
+    const [debouncedName] = useDebouncedValue(name, 300);
+
+    const [board, setBoard] = useState<BoardSchema | null>(null);
+    const [status, setStatus] = useState<StatusSchema | null>(null);
+
+    const [sortingField, setSortingField] = useState("createdAt");
+    const [sortingDirection, setSortingDirection] = useState<SortDir>("asc");
+
+    return {
+        id,
+        setId,
+        debouncedId,
+        name,
+        setName,
+        debouncedName,
+        board,
+        setBoard,
+        status,
+        setStatus,
+        sortingField,
+        setSortingField,
+        sortingDirection,
+        setSortingDirection,
+    };
+};
+
+export default useDealsFilters;

src/app/deals/modals/DealsTableFiltersModal/DealsTableFiltersModal.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { ReactNode } from "react";
+import { Flex, Modal, NumberInput, rem, TextInput } from "@mantine/core";
+import { useDisclosure } from "@mantine/hooks";
+import { DealsFilters } from "@/app/deals/hooks/useDealsFilters";
+import BoardSelect from "@/components/selects/BoardSelect/BoardSelect";
+import StatusSelect from "@/components/selects/StatusSelect/StatusSelect";
+import { ProjectSchema } from "@/lib/client";
+
+type Props = {
+    filters: DealsFilters;
+    selectedProject: ProjectSchema | null;
+    boardAndStatusEnabled: boolean;
+    getOpener: (open: () => void) => ReactNode;
+};
+
+const DealsTableFiltersModal = ({
+    filters,
+    selectedProject,
+    boardAndStatusEnabled,
+    getOpener,
+}: Props) => {
+    const [opened, { open, close }] = useDisclosure();
+
+    return (
+        <>
+            {getOpener(open)}
+            <Modal
+                title={"Фильтры"}
+                opened={opened}
+                onClose={close}>
+                <Flex
+                    gap={rem(10)}
+                    direction={"column"}>
+                    <NumberInput
+                        label={"ID"}
+                        placeholder={"Введите ID"}
+                        value={filters.id}
+                        onChange={value =>
+                            typeof value === "number"
+                                ? filters.setId(Number(value))
+                                : filters.setId(undefined)
+                        }
+                        min={1}
+                    />
+                    <TextInput
+                        label={"Название"}
+                        placeholder={"Введите название"}
+                        defaultValue={filters.name}
+                        onChange={event => filters.setName(event.target.value)}
+                    />
+                    {boardAndStatusEnabled && (
+                        <>
+                            <BoardSelect
+                                label={"Доска"}
+                                value={filters.board}
+                                onChange={filters.setBoard}
+                                projectId={selectedProject?.id}
+                                clearable
+                            />
+                            <StatusSelect
+                                label={"Статус"}
+                                value={filters.status}
+                                onChange={filters.setStatus}
+                                boardId={filters.board?.id}
+                                clearable
+                            />
+                        </>
+                    )}
+                </Flex>
+            </Modal>
+        </>
+    );
+};
+
+export default DealsTableFiltersModal;

src/app/deals/page.tsx

@@ -1,31 +1,22 @@
+import { Suspense } from "react";
 import {
     dehydrate,
     HydrationBoundary,
     QueryClient,
 } from "@tanstack/react-query";
-import { Suspense } from "react";
+import { Center, Loader } from "@mantine/core";
-import { Loader, Center } from "@mantine/core";
+import PageBody from "@/app/deals/components/shared/PageBody/PageBody";
-import dynamic from "next/dynamic";
+import { BoardsContextProvider } from "@/app/deals/contexts/BoardsContext";
+import { ProjectsContextProvider } from "@/app/deals/contexts/ProjectsContext";
+import { StatusesContextProvider } from "@/app/deals/contexts/StatusesContext";
+import { ViewContextProvider } from "@/app/deals/contexts/ViewContext";
+import PageContainer from "@/components/layout/PageContainer/PageContainer";
 import {
     getBoardsOptions,
     getProjectsOptions,
 } from "@/lib/client/@tanstack/react-query.gen";
 import { combineProviders } from "@/utils/combineProviders";
 
-// Dynamic imports for better code splitting
-const PageBody = dynamic(() => import("@/app/deals/components/shared/PageBody/PageBody"), {
-    loading: () => <Center h={400}><Loader /></Center>
-});
-const BoardsContextProvider = dynamic(() => import("@/app/deals/contexts/BoardsContext").then(mod => ({ default: mod.BoardsContextProvider })));
-const ProjectsContextProvider = dynamic(() => import("@/app/deals/contexts/ProjectsContext").then(mod => ({ default: mod.ProjectsContextProvider })));
-const StatusesContextProvider = dynamic(() => import("@/app/deals/contexts/StatusesContext").then(mod => ({ default: mod.StatusesContextProvider })));
-const ViewContextProvider = dynamic(() => import("@/app/deals/contexts/ViewContext").then(mod => ({ default: mod.ViewContextProvider })));
-const PageBlock = dynamic(() => import("@/components/layout/PageBlock/PageBlock"));
-const PageContainer = dynamic(() => import("@/components/layout/PageContainer/PageContainer"));
-const TopToolPanel = dynamic(() => import("./components/desktop/TopToolPanel/TopToolPanel"), {
-    loading: () => <div style={{ height: 60 }} />
-});
-
 async function prefetchData() {
     const queryClient = new QueryClient();
     const projectsData = await queryClient.fetchQuery(getProjectsOptions());
@@ -53,16 +44,14 @@ export default async function DealsPage() {
 
     return (
         <Providers>
-            <Suspense fallback={
+            <Suspense
+                fallback={
                     <Center h="50vh">
                         <Loader size="lg" />
                     </Center>
                 }>
                 <PageContainer>
-                    <TopToolPanel />
-                    <PageBlock>
                     <PageBody />
-                    </PageBlock>
                 </PageContainer>
             </Suspense>
         </Providers>

src/app/layout.tsx

@@ -1,7 +1,7 @@
 import "@mantine/core/styles.css";
+import "mantine-datatable/styles.layer.css";
 import "@mantine/notifications/styles.css";
 import "@mantine/dates/styles.css";
-import "mantine-react-table/styles.css";
 import "swiper/css";
 import "swiper/css/pagination";
 import "swiper/css/scrollbar";

src/app/loading.tsx

@@ -1,9 +0,0 @@
-import { Center, Loader } from "@mantine/core";
-
-export default function Loading() {
-    return (
-        <Center h="100vh">
-            <Loader size="lg" />
-        </Center>
-    );
-}

src/components/selects/BoardSelect/BoardSelect.tsx

@@ -0,0 +1,33 @@
+"use client";
+
+import { FC } from "react";
+import ObjectSelect, {
+    ObjectSelectProps,
+} from "@/components/selects/ObjectSelect/ObjectSelect";
+import useBoardsList from "@/hooks/lists/useBoardsList";
+import { BoardSchema } from "@/lib/client";
+
+type Props = Omit<
+    ObjectSelectProps<BoardSchema | null>,
+    "data" | "getLabelFn" | "getValueFn"
+> & {
+    projectId?: number;
+};
+
+const BoardSelect: FC<Props> = ({ projectId, ...props }) => {
+    const onClear = () => props.onChange(null);
+
+    const { boards } = useBoardsList({ projectId });
+
+    return (
+        <ObjectSelect
+            data={boards}
+            searchable
+            placeholder={"Выберите доску"}
+            onClear={onClear}
+            {...props}
+        />
+    );
+};
+
+export default BoardSelect;

src/components/selects/StatusSelect/StatusSelect.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { FC, useEffect } from "react";
+import ObjectSelect, {
+    ObjectSelectProps,
+} from "@/components/selects/ObjectSelect/ObjectSelect";
+import useStatusesList from "@/hooks/lists/useStatusesList";
+import { BoardSchema } from "@/lib/client";
+
+type Props = Omit<
+    ObjectSelectProps<BoardSchema | null>,
+    "data" | "getLabelFn" | "getValueFn"
+> & {
+    boardId?: number;
+};
+
+const StatusSelect: FC<Props> = ({ boardId, ...props }) => {
+    const onClear = () => props.onChange(null);
+
+    const { statuses } = useStatusesList({ boardId });
+
+    useEffect(() => {
+        if (!boardId) props.onChange(null);
+    }, [boardId]);
+
+    return (
+        <ObjectSelect
+            data={statuses}
+            disabled={!boardId}
+            searchable
+            placeholder={"Выберите статус"}
+            onClear={onClear}
+            {...props}
+        />
+    );
+};
+
+export default StatusSelect;

src/components/ui/BaseTable/BaseTable.tsx

@@ -1,59 +1,18 @@
-import React, { useEffect, useImperativeHandle } from "react";
+import React from "react";
-import {
+import { DataTable, DataTableProps } from "mantine-datatable";
-    MantineReactTable,
-    MRT_ColumnDef,
-    MRT_RowData,
-    MRT_TableInstance,
-    MRT_TableOptions,
-    useMantineReactTable,
-} from "mantine-react-table";
-import { MRT_Localization_RU } from "mantine-react-table/locales/ru";
 
-type Props<T extends MRT_RowData> = {
+function BaseTable<T>(props: DataTableProps<T>) {
-    data: T[];
+    return (
-    onSelectionChange?: (selectedRows: T[]) => void;
+        <DataTable
-    columns: MRT_ColumnDef<T>[];
+            withTableBorder={false}
-    restProps?: MRT_TableOptions<T>;
+            withRowBorders
-    striped?: boolean | "odd" | "even";
+            striped={false}
-};
+            verticalAlign={"center"}
-
+            borderRadius={"lg"}
-export type BaseTableRef<T extends MRT_RowData> = {
+            backgroundColor={"transparent"}
-    getTable: () => MRT_TableInstance<T>;
+            {...props}
-};
+        />
-
-function BaseTableInner<T extends MRT_RowData>(
-    { data, columns, restProps, onSelectionChange, striped = false }: Props<T>,
-    ref: React.Ref<BaseTableRef<T>>
-) {
-    const table = useMantineReactTable<T>({
-        localization: MRT_Localization_RU,
-        enablePagination: false,
-        data,
-        columns,
-        mantineTableProps: {
-            striped,
-            highlightOnHover: false,
-        },
-        enableTopToolbar: false,
-        enableBottomToolbar: false,
-        enableRowSelection: onSelectionChange !== undefined,
-        ...restProps,
-    });
-
-    useEffect(() => {
-        if (!onSelectionChange) return;
-        onSelectionChange(
-            table.getSelectedRowModel().rows.map(r => r.original)
     );
-    }, [onSelectionChange, table.getState().rowSelection]);
-
-    useImperativeHandle(ref, () => ({ getTable: () => table }));
-
-    return <MantineReactTable table={table} />;
 }
 
-const BaseTable = React.forwardRef(BaseTableInner) as <T extends MRT_RowData>(
-    props: Props<T> & { ref?: React.Ref<BaseTableRef<T>> }
-) => React.ReactElement | null;
-
 export default BaseTable;

src/hooks/lists/useDealsList.ts

@@ -1,6 +1,9 @@
-import { useState } from "react";
+import { Dispatch, SetStateAction, useState } from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { DealSchema } from "@/lib/client";
+import useDealsFilters, {
+    DealsFilters,
+} from "@/app/deals/hooks/useDealsFilters";
+import { DealSchema, GetDealsData, PaginationInfoSchema } from "@/lib/client";
 import {
     getDealsOptions,
     getDealsQueryKey,
@@ -12,26 +15,45 @@ type Props = {
     withPagination: boolean;
 };
 
+type ReturnType = {
+    deals: DealSchema[];
+    setDeals: (deals: DealSchema[]) => void;
+    dealsFilters: DealsFilters;
+    refetchDeals: () => void;
+    page: number;
+    setPage: Dispatch<SetStateAction<number>>;
+    paginationInfo?: PaginationInfoSchema;
+    queryKey: any[];
+};
+
 const useDealsList = ({
     withPagination,
     projectId = null,
     boardId = null,
-}: Props) => {
+}: Props): ReturnType => {
     const queryClient = useQueryClient();
     const [page, setPage] = useState(1);
     const itemsPerPage = 10;
+    const dealsFilters = useDealsFilters();
 
-    const options = {
+    const options: Omit<GetDealsData, "url"> = {
         query: {
-            boardId: boardId ?? null,
-            projectId: projectId ?? null,
             page: withPagination ? page : null,
             itemsPerPage: withPagination ? itemsPerPage : null,
+            sortingField: withPagination ? dealsFilters.sortingField : null,
+            sortingDirection: withPagination
+                ? dealsFilters.sortingDirection
+                : null,
+            projectId: withPagination ? projectId : null,
+            boardId: withPagination ? dealsFilters.board?.id : boardId,
+            statusId: withPagination ? dealsFilters.status?.id : null,
+            name: dealsFilters.debouncedName,
+            id: dealsFilters.debouncedId,
         },
     };
+
     const { data, refetch } = useQuery({
         ...getDealsOptions(options),
-        enabled: !!boardId || !!projectId,
     });
 
     const queryKey = getDealsQueryKey(options);
@@ -46,6 +68,7 @@ const useDealsList = ({
     return {
         deals: data?.items ?? [],
         setDeals,
+        dealsFilters,
         refetchDeals: refetch,
         page,
         setPage,

src/lib/client/types.gen.ts

@@ -178,6 +178,10 @@ export type DealSchema = {
      * Statusid
      */
     statusId: number;
+    /**
+     * Boardid
+     */
+    boardId: number;
     /**
      * Createdat
      */
@@ -303,6 +307,8 @@ export type ProjectSchema = {
     name: string;
 };
 
+export type SortDir = "asc" | "desc";
+
 /**
  * StatusSchema
  */
@@ -585,14 +591,26 @@ export type GetDealsData = {
     body?: never;
     path?: never;
     query?: {
+        /**
+         * Projectid
+         */
+        projectId?: number | null;
         /**
          * Boardid
          */
         boardId?: number | null;
         /**
-         * Projectid
+         * Statusid
          */
-        projectId?: number | null;
+        statusId?: number | null;
+        /**
+         * Id
+         */
+        id?: number | null;
+        /**
+         * Name
+         */
+        name?: string | null;
         /**
          * Page
          */
@@ -601,6 +619,14 @@ export type GetDealsData = {
          * Itemsperpage
          */
         itemsPerPage?: number | null;
+        /**
+         * Sortingfield
+         */
+        sortingField?: string | null;
+        /**
+         * Sortingdirection
+         */
+        sortingDirection?: SortDir | null;
     };
     url: "/deal/";
 };

src/lib/client/zod.gen.ts

@@ -60,6 +60,7 @@ export const zDealSchema = z.object({
     name: z.string(),
     lexorank: z.string(),
     statusId: z.int(),
+    boardId: z.int(),
     createdAt: z.iso.datetime({
         offset: true,
     }),
@@ -217,6 +218,8 @@ export const zHttpValidationError = z.object({
     detail: z.optional(z.array(zValidationError)),
 });
 
+export const zSortDir = z.enum(["asc", "desc"]);
+
 /**
  * UpdateBoardSchema
  */
@@ -360,10 +363,15 @@ export const zGetDealsData = z.object({
     path: z.optional(z.never()),
     query: z.optional(
         z.object({
-            boardId: z.optional(z.union([z.int(), z.null()])),
             projectId: z.optional(z.union([z.int(), z.null()])),
+            boardId: z.optional(z.union([z.int(), z.null()])),
+            statusId: z.optional(z.union([z.int(), z.null()])),
+            id: z.optional(z.union([z.int(), z.null()])),
+            name: z.optional(z.union([z.string(), z.null()])),
             page: z.optional(z.union([z.int(), z.null()])),
             itemsPerPage: z.optional(z.union([z.int(), z.null()])),
+            sortingField: z.optional(z.union([z.string(), z.null()])),
+            sortingDirection: z.optional(z.union([zSortDir, z.null()])),
         })
     ),
 });

yarn.lock

@@ -3701,15 +3701,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/match-sorter-utils@npm:8.19.4":
-  version: 8.19.4
-  resolution: "@tanstack/match-sorter-utils@npm:8.19.4"
-  dependencies:
-    remove-accents: "npm:0.5.0"
-  checksum: 10c0/935022e3d639f19472131d289f3e1202253ff34301717c337e9bac0eeae6a0bd56450ed8ae2f7eb7ac9dfefa7ceaa7d126d8c5441021968b4a9eabc3ac4f8ba1
-  languageName: node
-  linkType: hard
-
 "@tanstack/query-core@npm:5.83.0":
   version: 5.83.0
   resolution: "@tanstack/query-core@npm:5.83.0"
@@ -3728,44 +3719,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@tanstack/react-table@npm:8.20.5":
-  version: 8.20.5
-  resolution: "@tanstack/react-table@npm:8.20.5"
-  dependencies:
-    "@tanstack/table-core": "npm:8.20.5"
-  peerDependencies:
-    react: ">=16.8"
-    react-dom: ">=16.8"
-  checksum: 10c0/574fa62fc6868a3b1113dbd043323f8b73aeb60555609caa164d5137a14636d4502784a961191afde2ec46f33f8c2bbfc4561d27a701c3d084e899a632dda3c8
-  languageName: node
-  linkType: hard
-
-"@tanstack/react-virtual@npm:3.11.2":
-  version: 3.11.2
-  resolution: "@tanstack/react-virtual@npm:3.11.2"
-  dependencies:
-    "@tanstack/virtual-core": "npm:3.11.2"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
-  checksum: 10c0/de446ce517d0855b3d58e79b6a75a37be40b4529baf0a5c3ffa2662dea80aba03409e06545aea27aa9e3a36fc2a2e3005ecbfce16a4659991d66930ea3bd62d4
-  languageName: node
-  linkType: hard
-
-"@tanstack/table-core@npm:8.20.5":
-  version: 8.20.5
-  resolution: "@tanstack/table-core@npm:8.20.5"
-  checksum: 10c0/3c27b5debd61b6bd9bfbb40bfc7c5d5af90873ae1a566b20e3bf2d2f4f2e9a78061c081aacc5259a00e256f8df506ec250eb5472f5c01ff04baf9918b554982b
-  languageName: node
-  linkType: hard
-
-"@tanstack/virtual-core@npm:3.11.2":
-  version: 3.11.2
-  resolution: "@tanstack/virtual-core@npm:3.11.2"
-  checksum: 10c0/38f1047127c6b1d07fe95becb7a12e66fb7c59d37ec0359e4ab339f837c6b906e1adff026ebd12849ba851d3f118d491014205c6b3c6ed8568cc232a798aeaaf
-  languageName: node
-  linkType: hard
-
 "@testing-library/dom@npm:10.4.0, @testing-library/dom@npm:^10.4.0":
   version: 10.4.0
   resolution: "@testing-library/dom@npm:10.4.0"
@@ -6183,6 +6136,7 @@ __metadata:
     axios: "npm:^1.11.0"
     babel-loader: "npm:^10.0.0"
     classnames: "npm:^2.5.1"
+    clsx: "npm:^2.1.1"
     date-fns: "npm:^4.1.0"
     date-fns-tz: "npm:^3.2.0"
     dayjs: "npm:^1.11.15"
@@ -6197,7 +6151,7 @@ __metadata:
     jest-environment-jsdom: "npm:^30.0.0"
     lexorank: "npm:^1.0.5"
     libphonenumber-js: "npm:^1.12.10"
-    mantine-react-table: "npm:^2.0.0-beta.9"
+    mantine-datatable: "npm:^8.2.0"
     next: "npm:15.4.7"
     postcss: "npm:^8.5.6"
     postcss-preset-mantine: "npm:1.17.0"
@@ -10161,23 +10115,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mantine-react-table@npm:^2.0.0-beta.9":
+"mantine-datatable@npm:^8.2.0":
-  version: 2.0.0-beta.9
+  version: 8.2.0
-  resolution: "mantine-react-table@npm:2.0.0-beta.9"
+  resolution: "mantine-datatable@npm:8.2.0"
-  dependencies:
-    "@tanstack/match-sorter-utils": "npm:8.19.4"
-    "@tanstack/react-table": "npm:8.20.5"
-    "@tanstack/react-virtual": "npm:3.11.2"
   peerDependencies:
-    "@mantine/core": ^7.9
+    "@mantine/core": ">=8.1"
-    "@mantine/dates": ^7.9
+    "@mantine/hooks": ">=8.1"
-    "@mantine/hooks": ^7.9
-    "@tabler/icons-react": ">=2.23.0"
     clsx: ">=2"
-    dayjs: ">=1.11"
+    react: ">=19"
-    react: ">=18.0"
+    react-dom: ">=19"
-    react-dom: ">=18.0"
+  checksum: 10c0/0e307f8d73fdfc01563227d92f54a182be1cb5eed947d0d37b80bbb5260b864c5dd5942396ea408ccbc6f98df67870205e4c61913b893edb4367112248b38ffa
-  checksum: 10c0/8a560096d4a6ecc3f0eb16ea171c3d2589125f53152e0ed8ac1853977b6fa35994cf7b4f553b92b9b0333010805f8c0e42f002330408925cbc8050b03528df0b
   languageName: node
   linkType: hard
 
@@ -12083,13 +12030,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remove-accents@npm:0.5.0":
-  version: 0.5.0
-  resolution: "remove-accents@npm:0.5.0"
-  checksum: 10c0/a75321aa1b53d9abe82637115a492770bfe42bb38ed258be748bf6795871202bc8b4badff22013494a7029f5a241057ad8d3f72adf67884dbe15a9e37e87adc4
-  languageName: node
-  linkType: hard
-
 "renderkid@npm:^3.0.0":
   version: 3.0.0
   resolution: "renderkid@npm:3.0.0"