feat: project creating

src/app/deals/components/desktop/CreateProjectButton/CreateProjectButton.module.css

@@ -0,0 +1,6 @@
+.container {
+    width: min-content;
+    cursor: pointer;
+    padding: 6px;
+    height: 100%;
+}

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

@@ -0,0 +1,36 @@
+import { IconPlus } from "@tabler/icons-react";
+import { ActionIcon, Box } from "@mantine/core";
+import { modals } from "@mantine/modals";
+import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
+import style from "./CreateProjectButton.module.css";
+
+const CreateProjectButton = () => {
+    const { projectsCrud } = useProjectsContext();
+
+    const onCreateClick = () => {
+        modals.openContextModal({
+            modal: "enterNameModal",
+            title: "Создание проекта",
+            withCloseButton: true,
+            innerProps: {
+                onComplete: (name: string) => {
+                    projectsCrud.onCreate(name);
+                },
+            },
+        });
+    };
+
+    return (
+        <Box>
+            <ActionIcon
+                variant={"default"}
+                onClick={onCreateClick}
+                radius="lg"
+                className={style.container}>
+                <IconPlus />
+            </ActionIcon>
+        </Box>
+    );
+};
+
+export default CreateProjectButton;

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

@@ -1,6 +1,7 @@
 "use client";
 
-import { Group } from "@mantine/core";
+import { Flex, Group } from "@mantine/core";
+import CreateProjectButton from "@/app/deals/components/desktop/CreateProjectButton/CreateProjectButton";
 import ViewSelector from "@/app/deals/components/desktop/ViewSelector/ViewSelector";
 import { useProjectsContext } from "@/app/deals/contexts/ProjectsContext";
 import ProjectSelect from "@/components/selects/ProjectSelect/ProjectSelect";
@@ -16,12 +17,18 @@ const TopToolPanel = () => {
     return (
         <Group justify={"space-between"}>
             <ViewSelector />
-            <ProjectSelect
+            <Flex
-                data={projects}
+                wrap={"nowrap"}
-                value={selectedProject}
+                align={"center"}
-                onChange={value => value && setSelectedProjectId(value.id)}
+                gap={"sm"}>
-                style={{ width: 250 }}
+                <CreateProjectButton />
-            />
+                <ProjectSelect
+                    data={projects}
+                    value={selectedProject}
+                    onChange={value => value && setSelectedProjectId(value.id)}
+                    style={{ width: 250 }}
+                />
+            </Flex>
         </Group>
     );
 };

src/hooks/cruds/baseCrud/useCrudOperations.tsx

@@ -81,9 +81,8 @@ const useCrudOperations = <
 
     const onSettled = () => {
         queryClient.invalidateQueries({
-            predicate: (query: { queryKey: any }) => {
+            predicate: (query: { queryKey: any }) =>
-                return query.queryKey[0]?._id === key;
+                query.queryKey[0]?._id === key,
-            },
         });
     };