feat: price by category

src/components/Dnd/CreateDealForm/CreateDealFrom.tsx

@@ -1,99 +1,108 @@
-import {Button, rem, Textarea, TextInput} from "@mantine/core";
-import {QuickDeal} from "../../../types/QuickDeal.ts";
-import {FC} from "react";
-import {useForm} from "@mantine/form";
-import styles from './CreateDealForm.module.css';
+import { Button, rem, Textarea, TextInput } from "@mantine/core";
+import { QuickDeal } from "../../../types/QuickDeal.ts";
+import { FC } from "react";
+import { useForm } from "@mantine/form";
+import styles from "./CreateDealForm.module.css";
 import ClientAutocomplete from "../../Selects/ClientAutocomplete/ClientAutocomplete.tsx";
-import {DateTimePicker} from "@mantine/dates";
+import { DateTimePicker } from "@mantine/dates";
 import ShippingWarehouseAutocomplete
     from "../../Selects/ShippingWarehouseAutocomplete/ShippingWarehouseAutocomplete.tsx";
 import BaseMarketplaceSelect from "../../Selects/BaseMarketplaceSelect/BaseMarketplaceSelect.tsx";
+import ServicePriceCategorySelect from "../../Selects/ServicePriceCategorySelect/ServicePriceCategorySelect.tsx";
 
 type Props = {
     onSubmit: (quickDeal: QuickDeal) => void
     onCancel: () => void;
 }
-const CreateDealFrom: FC<Props> = ({onSubmit, onCancel}) => {
+const CreateDealFrom: FC<Props> = ({ onSubmit, onCancel }) => {
     const form = useForm<QuickDeal>({
         initialValues: {
-            name: '',
-            clientName: '',
-            clientAddress: '',
-            comment: '',
+            name: "",
+            clientName: "",
+            clientAddress: "",
+            comment: "",
             acceptanceDate: new Date(),
-            shippingWarehouse: '',
+            shippingWarehouse: "",
             baseMarketplace: {
                 key: "",
                 iconUrl: "",
-                name: ""
-            }
-        }
+                name: "",
+            },
+        },
     });
     return (
         <form
-            style={{width: '100%'}}
+            style={{ width: "100%" }}
             onSubmit={form.onSubmit((values) => onSubmit(values))}
         >
             <div style={{
-                display: 'flex',
-                flexDirection: 'column',
-                width: '100%',
+                display: "flex",
+                flexDirection: "column",
+                width: "100%",
                 gap: rem(10),
-                padding: rem(10)
+                padding: rem(10),
             }}>
-                <div className={styles['inputs']}>
+                <div className={styles["inputs"]}>
                     <TextInput
-                        placeholder={'Название сделки'}
-                        {...form.getInputProps('name')}
+                        placeholder={"Название сделки"}
+                        {...form.getInputProps("name")}
                     />
                 </div>
-                <div className={styles['inputs']}>
+                <div className={styles["inputs"]}>
                     <ClientAutocomplete
-                        nameRestProps={form.getInputProps('clientName')}
+                        nameRestProps={form.getInputProps("clientName")}
                     />
                 </div>
-                <div className={styles['inputs']}>
+                <div className={styles["inputs"]}>
                     <BaseMarketplaceSelect
                         rightSection={<></>}
                         placeholder={"Базовый маркетплейс"}
                         {...form.getInputProps("baseMarketplace")}
                     />
                     <ShippingWarehouseAutocomplete
-                        {...form.getInputProps('shippingWarehouse')}
-                        placeholder={'Склад отгрузки'}
+                        {...form.getInputProps("shippingWarehouse")}
+                        placeholder={"Склад отгрузки"}
+                    />
+
+                </div>
+                <div className={styles["inputs"]}>
+                    <ServicePriceCategorySelect
+                        rightSection={<></>}
+                        placeholder={"Выберите категорию"}
+                        {...form.getInputProps("category")}
                     />
                 </div>
 
-                <div className={styles['inputs']}>
+                <div className={styles["inputs"]}>
                     <Textarea
                         autosize
-                        placeholder={'Комментарий'}
+                        placeholder={"Комментарий"}
                         minRows={2}
                         maxRows={4}
-                        {...form.getInputProps('comment')}
+                        {...form.getInputProps("comment")}
                     />
                 </div>
-                <div className={styles['inputs']}>
+                <div className={styles["inputs"]}>
                     <DateTimePicker
-                        placeholder={'Дата приемки'}
-                        {...form.getInputProps('acceptanceDate')}
+                        placeholder={"Дата приемки"}
+                        {...form.getInputProps("acceptanceDate")}
                     />
                 </div>
 
 
-                <div className={styles['buttons']}>
+                <div className={styles["buttons"]}>
                     <Button
-                        type={'submit'}
+                        type={"submit"}
                     >Добавить</Button>
                     <Button
-                        variant={'outline'}
+                        variant={"outline"}
                         onClick={() => onCancel()}
                     >Отменить</Button>
                 </div>
             </div>
         </form>
 
-    )
-}
+    );
+};
 
 export default CreateDealFrom;