feat: products and services on same page

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>
-                    <Tabs.Tab value={"products"} leftSection={<IconBarcode/>}>
-                        Товары
+                    <Tabs.Tab value={"servicesAndProducts"} leftSection={<IconBox/>}>
+                        Товары и услуги
                     </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>
     );
 }