feat: deal create, update, delete

src/app/deals/components/shared/CreateDealButton/CreateDealButton.module.css

@@ -0,0 +1,10 @@
+.create-button {
+    cursor: pointer;
+
+    @mixin light {
+        background-color: var(--color-light-white-blue);
+    }
+    @mixin dark {
+        background-color: var(--mantine-color-dark-7);
+    }
+}

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

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import { IconPlus } from "@tabler/icons-react";
+import { Card, Center, Group, Text, Transition } from "@mantine/core";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
+import CreateCardForm, { CreateDealForm } from "./components/CreateCardForm";
+import styles from "./CreateDealButton.module.css";
+
+const CreateCardButton = () => {
+    const [isCreating, setIsCreating] = useState(false);
+    const [isTransitionEnded, setIsTransitionEnded] = useState(true);
+    const { dealsCrud } = useDealsContext();
+
+    const onSubmit = (values: CreateDealForm) => {
+        dealsCrud.onCreate(values.name);
+        setIsCreating(prevState => !prevState);
+        setIsTransitionEnded(false);
+    };
+
+    return (
+        <Card
+            className={styles["create-button"]}
+            onClick={() => {
+                if (isCreating) return;
+                setIsCreating(prevState => !prevState);
+                setIsTransitionEnded(false);
+            }}>
+            {!isCreating && isTransitionEnded && (
+                <Center>
+                    <Group gap={"xs"}>
+                        <IconPlus />
+                        <Text>Добавить</Text>
+                    </Group>
+                </Center>
+            )}
+            <Transition
+                mounted={isCreating}
+                transition={"scale-y"}
+                onExited={() => setIsTransitionEnded(true)}>
+                {styles => (
+                    <div style={styles}>
+                        <CreateCardForm
+                            onCancel={() => setIsCreating(false)}
+                            onSubmit={onSubmit}
+                        />
+                    </div>
+                )}
+            </Transition>
+        </Card>
+    );
+};
+export default CreateCardButton;

src/app/deals/components/shared/CreateDealButton/components/CreateCardForm.tsx

@@ -0,0 +1,54 @@
+import { FC } from "react";
+import { IconCheck, IconX } from "@tabler/icons-react";
+import { Button, Group, Stack, TextInput } from "@mantine/core";
+import { useForm } from "@mantine/form";
+
+export type CreateDealForm = {
+    name: string;
+};
+
+type Props = {
+    onSubmit: (values: CreateDealForm) => void;
+    onCancel: () => void;
+};
+
+const CreateCardForm: FC<Props> = ({ onSubmit, onCancel }) => {
+    const form = useForm<CreateDealForm>({
+        initialValues: {
+            name: "",
+        },
+        validate: {
+            name: value => !value && "Введите название",
+        },
+    });
+
+    return (
+        <form onSubmit={form.onSubmit(values => {
+            onSubmit(values);
+            form.reset();
+        })}>
+            <Stack>
+                <TextInput
+                    placeholder={"Название"}
+                    {...form.getInputProps("name")}
+                />
+                <Group wrap={"nowrap"}>
+                    <Button
+                        variant={"default"}
+                        w={"100%"}
+                        onClick={onCancel}>
+                        <IconX />
+                    </Button>
+                    <Button
+                        variant={"default"}
+                        w={"100%"}
+                        type={"submit"}>
+                        <IconCheck />
+                    </Button>
+                </Group>
+            </Stack>
+        </form>
+    );
+};
+
+export default CreateCardForm;

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

@@ -1,4 +1,6 @@
 import { Card, Group, Pill, Stack, Text } from "@mantine/core";
+import { useDealsContext } from "@/app/deals/contexts/DealsContext";
+import { useDrawersContext } from "@/drawers/DrawersContext";
 import { DealSchema } from "@/lib/client";
 import styles from "./DealCard.module.css";
 
@@ -7,8 +9,17 @@ type Props = {
 };
 
 const DealCard = ({ deal }: Props) => {
+    const { dealsCrud } = useDealsContext();
+    const { openDrawer } = useDrawersContext();
+
+    const onClick = () => {
+        openDrawer({ key: "dealEditorDrawer", props: { deal, dealsCrud } });
+    };
+
     return (
-        <Card className={styles.container}>
+        <Card
+            onClick={onClick}
+            className={styles.container}>
             <Text c={"dodgerblue"}>{deal.name}</Text>
             <Stack gap={0}>
                 <Text>Wb электросталь</Text>

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

@@ -45,11 +45,13 @@ const Funnel: FC = () => {
             renderContainer={(
                 status: StatusSchema,
                 funnelColumnComponent: ReactNode,
-                renderDraggable
+                renderDraggable,
+                index
             ) => (
                 <StatusColumnWrapper
                     status={status}
-                    renderHeader={renderDraggable}>
+                    renderHeader={renderDraggable}
+                    createFormEnabled={index === 0}>
                     {funnelColumnComponent}
                 </StatusColumnWrapper>
             )}

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

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import { Box, ScrollArea, Stack } from "@mantine/core";
+import CreateCardButton from "@/app/deals/components/shared/CreateDealButton/CreateDealButton";
 import { StatusSchema } from "@/lib/client";
 import styles from "./StatusColumnWrapper.module.css";
 
@@ -7,9 +8,14 @@ type Props = {
     status: StatusSchema;
     renderHeader: () => ReactNode;
     children: ReactNode;
+    createFormEnabled?: boolean;
 };
 
-const StatusColumnWrapper = ({ renderHeader, children }: Props) => {
+const StatusColumnWrapper = ({
+    renderHeader,
+    children,
+    createFormEnabled = false,
+}: Props) => {
     return (
         <Box className={styles.container}>
             <Stack
@@ -22,7 +28,12 @@ const StatusColumnWrapper = ({ renderHeader, children }: Props) => {
                     scrollbarSize={10}
                     type={"always"}
                     scrollbars={"y"}>
-                    <Stack mah={"calc(100vh - 220px)"}>{children}</Stack>
+                    <Stack
+                        gap={"xs"}
+                        mah={"calc(100vh - 220px)"}>
+                        {createFormEnabled && <CreateCardButton />}
+                        {children}
+                    </Stack>
                 </ScrollArea>
             </Stack>
         </Box>