feat: products and services on same page

src/modals/modals.ts

@@ -9,6 +9,7 @@ import PrintBarcodeModal from "./PrintBarcodeModal/PrintBarcodeModal.tsx";
 import AddBarcodeModal from "./AddBarcodeModal/AddBarcodeModal.tsx";
 import BarcodeTemplateFormModal
     from "../pages/BarcodePage/modals/BarcodeTemplateFormModal/BarcodeTemplateFormModal.tsx";
+import ProductServiceFormModal from "../pages/LeadsPage/modals/ProductServiceFormModal.tsx";
 
 export const modals = {
     enterDeadline: EnterDeadlineModal,
@@ -18,6 +19,7 @@ export const modals = {
     productFormModal: ProductFormModal,
     addDealService: AddDealServiceModal,
     addDealProduct: AddDealProductModal,
+    productServiceForm: ProductServiceFormModal,
     printBarcode: PrintBarcodeModal,
     addBarcode: AddBarcodeModal,
     barcodeTemplateFormModal: BarcodeTemplateFormModal

src/pages/LeadsPage/drawers/DealEditDrawer/DealEditDrawer.tsx

@@ -7,10 +7,11 @@ import {notifications} from "../../../../shared/lib/notifications.ts";
 import {modals} from "@mantine/modals";
 import {BaseTableRef} from "../../../../components/BaseTable/BaseTable.tsx";
 import DealProductsTable from "../../components/DealProductsTable/DealProductsTable.tsx";
-import {IconBarcode, IconBox, IconCalendarUser, IconSettings} from "@tabler/icons-react";
+import {IconBox, IconCalendarUser, IconSettings} from "@tabler/icons-react";
 import DealStatusChangeTable from "../../components/DealStatusChangeTable/DealStatusChangeTable.tsx";
 import DealEditDrawerGeneralTab from "./tabs/DealEditDrawerGeneralTab.tsx";
 import {useQueryClient} from "@tanstack/react-query";
+import ProductAndServiceTab from "../../tabs/ProductAndServiceTab/ProductAndServiceTab.tsx";
 // import styles from './DealEditDrawer.module.css';
 
 const useDealServicesTableState = () => {
@@ -338,12 +339,15 @@ const DealEditDrawer: FC = () => {
                     <Tabs.Tab value={"history"} leftSection={<IconCalendarUser/>}>
                         История
                     </Tabs.Tab>
-                    <Tabs.Tab value={"services"} leftSection={<IconBox/>}>
+                    <Tabs.Tab value={"servicesAndProducts"} leftSection={<IconBox/>}>
-                        Услуги
+                        Товары и услуги
-                    </Tabs.Tab>
-                    <Tabs.Tab value={"products"} leftSection={<IconBarcode/>}>
-                        Товары
                     </Tabs.Tab>
+                    {/*<Tabs.Tab value={"services"} leftSection={<IconBox/>}>*/}
+                    {/*    Услуги*/}
+                    {/*</Tabs.Tab>*/}
+                    {/*<Tabs.Tab value={"products"} leftSection={<IconBarcode/>}>*/}
+                    {/*    Товары*/}
+                    {/*</Tabs.Tab>*/}
                 </Tabs.List>
                 <Tabs.Panel value={"general"}>
                     <Box h={"100%"} w={"100%"} p={rem(10)}>
@@ -355,6 +359,11 @@ const DealEditDrawer: FC = () => {
                         <DealEditDrawerStatusChangeTable/>
                     </Box>
                 </Tabs.Panel>
+                <Tabs.Panel value={"servicesAndProducts"}>
+                    <Box p={rem(10)}>
+                        <ProductAndServiceTab/>
+                    </Box>
+                </Tabs.Panel>
                 <Tabs.Panel value={"services"}>
                     <Box p={rem(10)}>
                         <DealEditDrawerServicesTable/>
@@ -362,18 +371,10 @@ const DealEditDrawer: FC = () => {
                 </Tabs.Panel>
                 <Tabs.Panel value={"products"}>
                     <Box p={rem(10)}>
-
                         <DealEditDrawerProductsTable/>
                     </Box>
                 </Tabs.Panel>
             </Tabs>
-            {/*<Flex*/}
-            {/*    h={"10%"}*/}
-            {/*    align={'flex-end'}*/}
-            {/*    justify={"flex-end"}*/}
-            {/*>*/}
-
-            {/*</Flex>*/}
         </Drawer>
     );
 }

src/pages/LeadsPage/modals/AddDealProductModal.tsx

@@ -9,7 +9,8 @@ import {omit} from "lodash";
 import {BaseFormInputProps} from "../../../types/utils.ts";
 
 type RestProps = {
-    clientId: number
+    clientId: number;
+    productIds?: number[];
 }
 
 type Props = CreateEditFormProps<DealProductSchema> & RestProps;
@@ -56,6 +57,7 @@ const AddDealProductModal = ({
                         label={"Товар"}
                         clientId={innerProps.clientId}
                         disabled={isEditing}
+                        filterBy={(item) => !(innerProps.productIds || []).includes(item.id)}
                         {...form.getInputProps('product')}
                     />
                     <NumberInput

src/pages/LeadsPage/modals/AddDealServiceModal.tsx

@@ -40,7 +40,6 @@ const AddDealServiceModal = ({
             }
         })
     };
-
     return (
         <BaseFormModal
             {...innerProps}

src/pages/LeadsPage/modals/ProductServiceFormModal.tsx

@@ -0,0 +1,80 @@
+import BaseFormModal, {CreateEditFormProps} from "../../ClientsPage/modals/BaseFormModal/BaseFormModal.tsx";
+import {DealProductServiceSchema, ServiceSchema} from "../../../client";
+import {ContextModalProps} from "@mantine/modals";
+import {useForm, UseFormReturnType} from "@mantine/form";
+import {isNil, isNumber} from "lodash";
+import ServiceWithPriceInput from "../../../components/ServiceWithPriceInput/ServiceWithPriceInput.tsx";
+import {Flex} from "@mantine/core";
+import {ServiceType} from "../../../shared/enums/ServiceType.ts";
+
+type RestProps = {
+    quantity: number;
+    serviceIds: number[];
+}
+type Props = CreateEditFormProps<DealProductServiceSchema> & RestProps;
+
+const ProductServiceFormModal = ({
+                                     context,
+                                     id, innerProps
+                                 }: ContextModalProps<Props>) => {
+    const isEditing = 'onChange' in innerProps;
+    const initialValues: Partial<DealProductServiceSchema> = isEditing ? innerProps.element : {
+        service: undefined,
+        price: undefined
+    }
+    const form = useForm<Partial<DealProductServiceSchema>>({
+        initialValues,
+        validate: {
+            service: (service?: ServiceSchema) => isNil(service) || service.id < 0 ? 'Укажите услугу' : null,
+            price: (price?: number) => !isNumber(price) || price < 0 ? 'Укажите цену' : null
+        }
+    })
+    const onClose = () => {
+        context.closeContextModal(id);
+    }
+    console.log(innerProps)
+    return (
+        <BaseFormModal
+            {...innerProps}
+            form={form as UseFormReturnType<DealProductServiceSchema>}
+            onClose={onClose}
+            closeOnSubmit
+        >
+            <BaseFormModal.Body>
+                <>
+                    <Flex w={"100%"}>
+
+                        <ServiceWithPriceInput
+                            serviceProps={{
+                                ...form.getInputProps('service'),
+                                label: "Услуга",
+                                placeholder: "Выберите услугу",
+                                disabled: isEditing,
+                                filterBy: (item) => !innerProps.serviceIds.includes(item.id) || isEditing,
+                                style: {width: "100%"}
+                            }}
+                            priceProps={{
+                                ...form.getInputProps('price'),
+                                label: "Цена",
+                                placeholder: "Введите цену",
+                                style: {width: "100%"}
+
+                            }}
+                            filterType={ServiceType.PRODUCT_SERVICE}
+                            containerProps={{
+                                direction: "column",
+                                style: {width: "100%"}
+
+                            }}
+                            lockOnEdit={isEditing}
+                            quantity={innerProps.quantity}
+                        />
+                    </Flex>
+
+                </>
+            </BaseFormModal.Body>
+        </BaseFormModal>
+
+    )
+}
+export default ProductServiceFormModal;

src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.module.css

@@ -0,0 +1,35 @@
+.container {
+    display: flex;
+    //flex-direction: column;
+    gap: rem(10);
+    max-height: 95vh;
+}
+
+.products-list {
+    width: 60%;
+    display: flex;
+    flex-direction: column;
+    gap: rem(10);
+}
+
+.deal-container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    gap: rem(10);
+}
+
+.deal-container-wrapper {
+    border: dashed var(--item-border-size) var(--mantine-color-default-border);
+    border-radius: var(--item-border-radius);
+    padding: rem(10);
+
+}
+
+.deal-container-buttons {
+    gap: rem(10);
+    display: flex;
+    flex-direction: column;
+    margin-top: auto;
+    width: 100%;
+}

src/pages/LeadsPage/tabs/ProductAndServiceTab/ProductAndServiceTab.tsx

@@ -0,0 +1,69 @@
+import {FC} from "react";
+import styles from './ProductAndServiceTab.module.css';
+import ProductView from "./components/ProductView/ProductView.tsx";
+import {Button, Flex, ScrollArea, Title} from "@mantine/core";
+import DealServicesTable from "./components/DealServicesTable/DealServicesTable.tsx";
+import useDealProductAndServiceTabState from "./hooks/useProductAndServiceTabState.tsx";
+import {modals} from "@mantine/modals";
+
+const ProductAndServiceTab: FC = () => {
+    const {dealState, dealServicesState, dealProductsState} = useDealProductAndServiceTabState();
+
+    const onCreateProductClick = () => {
+        if (!dealProductsState.onCreate || !dealState.deal) return;
+        const productIds = dealState.deal.products.map(product => product.product.id);
+        modals.openContextModal({
+            modal: "addDealProduct",
+            innerProps: {
+                onCreate: dealProductsState.onCreate,
+                clientId: dealState.deal.clientId,
+                productIds: productIds
+            },
+            withCloseButton: false
+        })
+    }
+    const getTotalPrice = () => {
+        if (!dealState.deal) return 0
+        const productServicesPrice = dealState.deal.products.reduce((acc, row) => acc + row.services.reduce((acc2, row2) => acc2 + row2.price * row.quantity, 0), 0);
+        const dealServicesPrice = dealState.deal.services.reduce((acc, row) => acc + row.price * row.quantity, 0);
+        return dealServicesPrice + productServicesPrice;
+    }
+    return (
+        <div className={styles['container']}>
+
+            <div className={styles['products-list']}>
+                <ScrollArea offsetScrollbars>
+
+                    {dealState.deal?.products.map(product => (
+                        <ProductView
+                            key={product.product.id}
+                            product={product}
+                            onChange={dealProductsState.onChange}
+                            onDelete={dealProductsState.onDelete}
+                        />
+                    ))}
+                </ScrollArea>
+
+            </div>
+            <div className={styles['deal-container']}>
+                <Flex direction={"column"} className={styles['deal-container-wrapper']}>
+                    <DealServicesTable
+                        {...dealServicesState}
+                    />
+                    <div className={styles['deal-container-buttons']}>
+                        <Button
+                            onClick={onCreateProductClick}
+                            variant={"default"}
+                            fullWidth>Добавить товар</Button>
+                    </div>
+                </Flex>
+                <Flex direction={"column"} className={styles['deal-container-wrapper']}>
+                    <Title order={3}>Общая стоимость всех услуг: {getTotalPrice()}</Title>
+                </Flex>
+            </div>
+
+        </div>
+    )
+}
+
+export default ProductAndServiceTab;

src/pages/LeadsPage/tabs/ProductAndServiceTab/components/DealServicesTable/DealServicesTable.tsx

@@ -0,0 +1,110 @@
+import {CRUDTableProps} from "../../../../../../types/CRUDTable.tsx";
+import {DealServiceSchema} from "../../../../../../client";
+import {FC} from "react";
+import {ActionIcon, Button, Flex, NumberInput, rem, Text, Title, Tooltip} from "@mantine/core";
+import {IconTrash} from "@tabler/icons-react";
+import {modals} from "@mantine/modals";
+import {isNumber} from "lodash";
+
+type Props = CRUDTableProps<DealServiceSchema>;
+const DealServicesTable: FC<Props> = ({items, onDelete, onCreate, onChange}) => {
+    const onDeleteClick = (item: DealServiceSchema) => {
+        if (!onDelete) return;
+        onDelete(item);
+    }
+    const onCreateClick = () => {
+        if (!onCreate) return;
+        const serviceIds = items.map(service => service.service.id);
+        modals.openContextModal({
+            modal: "addDealService",
+            innerProps: {
+                onCreate: onCreate,
+                serviceIds
+            },
+            withCloseButton: false
+        })
+    }
+    const onQuantityChange = (item: DealServiceSchema, quantity: number) => {
+        if (!onChange) return;
+        onChange({
+            ...item,
+            quantity
+        })
+    }
+    const onPriceChange = (item: DealServiceSchema, price: number) => {
+        if (!onChange) return;
+        onChange({
+            ...item,
+            price
+        })
+    }
+    return (
+        <Flex
+            direction={"column"}
+            gap={rem(10)}
+            h={"100%"}
+
+        >
+            <Flex
+                h={"100%"}
+                direction={"column"}>
+                <Title
+                    order={3}
+                    w={"100%"}
+                    style={{textAlign: "center"}}
+                    mb={rem(10)}
+                >Общие услуги</Title>
+                <Flex
+                    direction={"column"}
+                    gap={rem(10)}
+                >
+
+                    {items.map(service => (
+                        <Flex
+                            key={service.service.id}
+                            w={"100%"}
+                            gap={rem(10)}
+                            align={"center"}
+                        >
+                            <Tooltip
+                                onClick={() => onDeleteClick(service)}
+                                label="Удалить услугу">
+                                <ActionIcon
+                                    variant={"default"}>
+                                    <IconTrash/>
+                                </ActionIcon>
+                            </Tooltip>
+                            <Text
+                                flex={1}
+                            >{service.service.name}</Text>
+                            <NumberInput
+                                suffix={" шт."}
+                                onChange={event => isNumber(event) && onQuantityChange(service, event)}
+                                value={service.quantity}
+                            />
+                            <NumberInput
+                                onChange={event => isNumber(event) && onPriceChange(service, event)}
+                                suffix={"₽"}
+                                value={service.price}
+                            />
+                        </Flex>
+                    ))}
+                </Flex>
+
+                <Title
+                    style={{textAlign: "end"}}
+                    mt={rem(10)}
+                    order={3}
+                >Итог: {items.reduce((acc, item) => acc + (item.price * item.quantity), 0)}₽</Title>
+            </Flex>
+            <Flex pb={rem(10)} mt={"auto"}>
+                <Button
+                    onClick={onCreateClick}
+                    fullWidth
+                    variant={"default"}
+                >Добавить услугу</Button>
+            </Flex>
+        </Flex>
+    )
+}
+export default DealServicesTable;

src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductServicesTable/ProductServicesTable.tsx

@@ -0,0 +1,97 @@
+import {CRUDTableProps} from "../../../../../../types/CRUDTable.tsx";
+import {DealProductServiceSchema} from "../../../../../../client";
+import {FC} from "react";
+import useProductServicesTableColumns from "./columns.tsx";
+import {BaseTable} from "../../../../../../components/BaseTable/BaseTable.tsx";
+import {MRT_TableOptions} from "mantine-react-table";
+import {ActionIcon, Button, Flex, rem, Tooltip} from "@mantine/core";
+import {IconEdit, IconTrash} from "@tabler/icons-react";
+import {modals} from "@mantine/modals";
+
+type RestProps = {
+    quantity: number;
+}
+type Props = CRUDTableProps<DealProductServiceSchema> & RestProps;
+const ProductServicesTable: FC<Props> = ({items, quantity, onCreate, onDelete, onChange}) => {
+    const columns = useProductServicesTableColumns({data: items, quantity});
+    const serviceIds = items.map(service => service.service.id);
+
+    const onCreateClick = () => {
+        if (!onCreate) return;
+        modals.openContextModal({
+            modal: "productServiceForm",
+            innerProps: {
+                onCreate: onCreate,
+                serviceIds,
+                quantity
+            },
+            withCloseButton: false
+        })
+    }
+
+    const onChangeClick = (item: DealProductServiceSchema) => {
+        console.log('change click')
+
+        if (!onChange) return;
+        console.log('change click1')
+        modals.openContextModal({
+            modal: "productServiceForm",
+            innerProps: {
+                element: item,
+                onChange,
+                serviceIds,
+                quantity
+            },
+            withCloseButton: false
+        })
+    }
+
+    return (
+        <Flex
+            direction={"column"}
+            gap={rem(10)}
+        >
+            <BaseTable
+                data={items}
+                columns={columns}
+                restProps={{
+                    enableColumnActions: false,
+                    enableSorting: false,
+                    enableRowActions: true,
+                    enableBottomToolbar: true,
+                    renderBottomToolbar: (
+                        <Flex justify={"flex-end"} gap={rem(10)} p={rem(10)}>
+
+                            <Button onClick={onCreateClick} variant={"default"}>
+                                Добавить услугу
+                            </Button>
+
+                        </Flex>
+                    ),
+                    renderRowActions: ({row}) => (
+                        <Flex gap="md">
+                            <Tooltip label="Редактировать">
+                                <ActionIcon
+                                    onClick={() => onChangeClick(row.original)}
+                                    variant={"default"}>
+                                    <IconEdit/>
+                                </ActionIcon>
+                            </Tooltip>
+                            <Tooltip label="Удалить">
+                                <ActionIcon onClick={() => {
+                                    if (onDelete) onDelete(row.original);
+                                    // console.log(row);
+                                }} variant={"default"}>
+                                    <IconTrash/>
+                                </ActionIcon>
+                            </Tooltip>
+                        </Flex>
+                    )
+                } as MRT_TableOptions<DealProductServiceSchema>}
+            />
+            {/*<Button variant={"default"}>Добавить услугу</Button>*/}
+        </Flex>
+
+    )
+}
+export default ProductServicesTable;

src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductServicesTable/columns.tsx

@@ -0,0 +1,25 @@
+import {useMemo} from "react";
+import {MRT_ColumnDef} from "mantine-react-table";
+import {DealProductServiceSchema} from "../../../../../../client";
+
+type Props = {
+    data: DealProductServiceSchema[];
+    quantity: number;
+}
+const useProductServicesTableColumns = (props: Props) => {
+    const {data, quantity} = props;
+    const totalPrice = useMemo(() => data.reduce((acc, row) => acc + (row.price * quantity), 0), [data, quantity]);
+    return useMemo<MRT_ColumnDef<DealProductServiceSchema>[]>(() => [
+        {
+            accessorKey: "service.name",
+            header: "Услуга",
+        },
+        {
+            accessorKey: "price",
+            header: "Цена",
+            Footer: () => <>Итог: {totalPrice}₽</>,
+        }
+    ], [totalPrice]);
+}
+
+export default useProductServicesTableColumns;

src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.module.css

@@ -0,0 +1,33 @@
+.container {
+    display: flex;
+    border: dashed var(--item-border-size) var(--mantine-color-default-border);
+    border-radius: var(--item-border-radius);
+    gap: rem(20);
+    padding: rem(10);
+    margin-bottom: rem(10);
+}
+
+.image-container {
+    display: flex;
+    max-height: rem(250);
+    max-width: rem(250);
+}
+
+.services-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: rem(10);
+    flex: 1
+}
+
+.data-container {
+    max-width: rem(250);
+    display: flex;
+    flex-direction: column;
+    gap: rem(10);
+}
+
+.attributes-container {
+    overflow-wrap: break-word;
+}

src/pages/LeadsPage/tabs/ProductAndServiceTab/components/ProductView/ProductView.tsx

@@ -0,0 +1,140 @@
+import {FC} from "react";
+import {DealProductSchema, DealProductServiceSchema, ProductSchema} from "../../../../../../client";
+import styles from './ProductView.module.css';
+import {ActionIcon, Flex, Image, NumberInput, rem, Spoiler, Text, Title, Tooltip} from '@mantine/core';
+import ProductServicesTable from "../ProductServicesTable/ProductServicesTable.tsx";
+import {isNil, isNumber} from "lodash";
+import {IconBarcode, IconTrash} from "@tabler/icons-react";
+import {modals} from "@mantine/modals";
+
+type Props = {
+    product: DealProductSchema;
+    onChange?: (item: DealProductSchema) => void;
+    onDelete?: (item: DealProductSchema) => void
+}
+type ProductFieldNames = {
+    [K in keyof ProductSchema]: string
+}
+const ProductFieldNames: Partial<ProductFieldNames> = {
+    color: "Цвет",
+    article: "Артикул",
+    size: "Размер",
+    brand: "Бренд",
+    composition: "Состав",
+    additionalInfo: "Доп. информация",
+}
+const ProductView: FC<Props> = ({product, onDelete, onChange}) => {
+    const onDeleteClick = () => {
+        if (!onDelete) return;
+        onDelete(product);
+    }
+
+    const onServiceDelete = (item: DealProductServiceSchema) => {
+        if (!onChange) return;
+        onChange({
+            ...product,
+            services: product.services.filter(service => service.service.id !== item.service.id)
+        });
+
+    }
+    const onServiceCreate = (item: DealProductServiceSchema) => {
+        if (!onChange) return;
+        onChange({
+            ...product,
+            services: [...product.services, item]
+        })
+    }
+
+    const onServiceChange = (item: DealProductServiceSchema) => {
+        if (!onChange) return;
+        onChange({
+            ...product,
+            services: product.services.map(service => service.service.id === item.service.id ? item : service)
+        })
+    }
+
+    const onQuantityChange = (quantity: number) => {
+        if (!onChange) return;
+        onChange({
+            ...product,
+            quantity
+        })
+    }
+    const onPrintBarcodeClick = () => {
+        modals.openContextModal({
+            modal: "printBarcode",
+            innerProps: {
+                productId: product.product.id,
+                defaultQuantity: product.quantity
+            },
+            title: 'Печать штрихкода',
+
+        })
+    }
+
+
+    return (
+        <div className={styles['container']}>
+            <div className={styles['data-container']}>
+                <div className={styles['image-container']}>
+                    <Image
+                        radius={rem(10)}
+                        fit={"cover"}
+                        src={product.product.imageUrl}
+                    />
+                </div>
+                <div className={styles['attributes-container']}>
+                    <Title>{product.product.name}</Title>
+                    <Spoiler maxHeight={0} showLabel={"Показать характеристики"} hideLabel={"Скрыть"}>
+
+                        {Object.entries(product.product).map(([key, value]) => {
+                            const fieldName = ProductFieldNames[key as keyof ProductSchema];
+                            if (!fieldName || isNil(value) || value === '') return;
+                            return (<Text>{fieldName}: {value.toString()} </Text>)
+                        })}
+                        <Text>Штрихкоды: {product.product.barcodes.join(', ')}</Text>
+                    </Spoiler>
+
+                </div>
+                <NumberInput
+                    suffix={" шт."}
+                    value={product.quantity}
+                    onChange={event => isNumber(event) && onQuantityChange(event)}
+                    placeholder={"Введите количество товара"}
+                />
+            </div>
+
+            <div className={styles['services-container']}>
+                <ProductServicesTable
+                    items={product.services}
+                    quantity={product.quantity}
+                    onCreate={onServiceCreate}
+                    onDelete={onServiceDelete}
+                    onChange={onServiceChange}
+                />
+                <Flex
+                    mt={"auto"}
+                    ml={"auto"}
+                    gap={rem(10)}
+                >
+                    <Tooltip
+                        onClick={onPrintBarcodeClick}
+                        label="Печать штрихкода">
+                        <ActionIcon
+                            variant={"default"}>
+                            <IconBarcode/>
+                        </ActionIcon>
+                    </Tooltip>
+                    <Tooltip onClick={onDeleteClick} label="Удалить товар">
+                        <ActionIcon
+                            variant={"default"}>
+                            <IconTrash/>
+                        </ActionIcon>
+                    </Tooltip>
+                </Flex>
+            </div>
+        </div>
+    )
+}
+
+export default ProductView;

src/pages/LeadsPage/tabs/ProductAndServiceTab/hooks/useProductAndServiceTabState.tsx

@@ -0,0 +1,125 @@
+import {CRUDTableProps} from "../../../../../types/CRUDTable.tsx";
+import {DealProductSchema, DealService, DealServiceSchema} from "../../../../../client";
+import {useDealPageContext} from "../../../contexts/DealPageContext.tsx";
+import {notifications} from "../../../../../shared/lib/notifications.ts";
+
+const useDealState = () => {
+    const {selectedDeal, setSelectedDeal} = useDealPageContext();
+    const refetch = async () => {
+        if (!selectedDeal) return
+        return DealService.getDealById({dealId: selectedDeal.id}).then((deal) => {
+            setSelectedDeal(deal);
+        })
+    }
+    return {
+        deal: selectedDeal,
+        refetch
+    }
+}
+
+const useDealServicesState = (): CRUDTableProps<DealServiceSchema> => {
+    const {deal, refetch} = useDealState();
+    const onCreate = (item: DealServiceSchema) => {
+        if (!deal) return;
+        DealService.addDealService({
+            requestBody: {
+                dealId: deal.id,
+                serviceId: item.service.id,
+                quantity: item.quantity,
+                price: item.price
+            }
+        }).then(async ({ok, message}) => {
+            if (!ok) notifications.guess(ok, {message});
+            if (ok) await refetch();
+        })
+    }
+    const onDelete = (item: DealServiceSchema) => {
+        if (!deal) return;
+        DealService.deleteDealService({
+            requestBody:
+                {
+                    dealId: deal.id,
+                    serviceId: item.service.id
+                }
+        }).then(async ({ok, message}) => {
+            if (!ok) notifications.guess(ok, {message});
+            if (ok) await refetch();
+        })
+    }
+    const onChange = (item: DealServiceSchema) => {
+        if (!deal) return;
+        DealService.updateDealService({
+            requestBody:
+                {
+                    dealId: deal.id,
+                    service: item
+                }
+        }).then(async ({ok, message}) => {
+            if (!ok) notifications.guess(ok, {message});
+            if (ok) await refetch();
+        })
+    }
+    return {
+        items: deal?.services || [],
+        onCreate,
+        onDelete,
+        onChange
+    }
+}
+
+const useDealProductsState = (): CRUDTableProps<DealProductSchema> => {
+    const {deal, refetch} = useDealState();
+    const onCreate = (item: DealProductSchema) => {
+        if (!deal) return;
+        DealService.addDealProduct({
+            requestBody: {
+                dealId: deal.id,
+                product: item
+            }
+        }).then(async ({ok, message}) => {
+            if (!ok) notifications.guess(ok, {message});
+            if (ok) await refetch();
+        })
+    };
+    const onDelete = (item: DealProductSchema) => {
+        if (!deal) return;
+        DealService.deleteDealProduct({
+            requestBody: {
+                dealId: deal.id,
+                productId: item.product.id
+            }
+        }).then(async ({ok, message}) => {
+            if (!ok) notifications.guess(ok, {message});
+            if (ok) await refetch();
+        })
+    };
+    const onChange = (item: DealProductSchema) => {
+        if (!deal) return;
+        DealService.updateDealProduct({
+            requestBody: {
+                dealId: deal.id,
+                product: item
+            }
+        }).then(async ({ok, message}) => {
+            if (!ok) notifications.guess(ok, {message});
+            if (ok) await refetch();
+        })
+    };
+    return {
+        items: deal?.products || [],
+        onCreate,
+        onDelete,
+        onChange
+    }
+}
+const useDealProductAndServiceTabState = () => {
+    const dealState = useDealState();
+    const dealProductsState = useDealProductsState();
+    const dealServicesState = useDealServicesState();
+    return {
+        dealState,
+        dealProductsState,
+        dealServicesState
+    }
+}
+export default useDealProductAndServiceTabState;

src/shared/lib/utils.ts

@@ -1,3 +1,5 @@
+import {isNil} from "lodash";
+
 export const dateWithoutTimezone = (date: Date) => {
     const tzoffset = date.getTimezoneOffset() * 60000; //offset in milliseconds
     const withoutTimezone = new Date(date.valueOf() - tzoffset)
@@ -45,3 +47,7 @@ export const IMAGE_MIME_TYPES = [
     "image/svg+xml",
     "image/heic"
 ];
+
+export const isNilOrEmptyString = (value: unknown): value is null | undefined | '' => {
+    return isNil(value) || (typeof value === 'string' && value.trim() === '');
+}