feat: deals filters

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>
-                <ProjectAction onClick={onCreateClick}>
+                </ToolPanelAction>
+                <ToolPanelAction onClick={onCreateClick}>
                     <IconPlus />
-                </ProjectAction>
+                </ToolPanelAction>
                 <ProjectSelect
                     data={projects}
                     value={selectedProject}