k

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

@@ -12,6 +12,7 @@ import DealStatusChangeTable from "../../components/DealStatusChangeTable/DealSt
 import DealEditDrawerGeneralTab from "./tabs/DealEditDrawerGeneralTab.tsx";
 import {useQueryClient} from "@tanstack/react-query";
 import ProductAndServiceTab from "../../tabs/ProductAndServiceTab/ProductAndServiceTab.tsx";
+import {motion} from "framer-motion";
 // import styles from './DealEditDrawer.module.css';
 
 const useDealServicesTableState = () => {
@@ -317,7 +318,7 @@ const DealEditDrawer: FC = () => {
     }, [isVisible]);
     return (
         <Drawer
-            size={"95%"}
+            size={"calc(100vw - 150px)"}
             position={"right"}
             onClose={onClose}
             removeScrollProps={{allowPinchZoom: true}}
@@ -329,7 +330,10 @@ const DealEditDrawer: FC = () => {
                 defaultValue={"general"}
                 h={'100%'}
                 variant={"outline"}
-                orientation={"vertical"}>
+                orientation={"vertical"}
+                keepMounted={false}
+
+            >
                 <Tabs.List
                 >
                     <Tabs.Tab value={"general"} leftSection={<IconSettings/>}>
@@ -343,19 +347,43 @@ const DealEditDrawer: FC = () => {
                     </Tabs.Tab>
                 </Tabs.List>
                 <Tabs.Panel value={"general"}>
-                    <Box h={"100%"} w={"100%"} p={rem(10)}>
-                        <DealEditDrawerGeneralTab/>
-                    </Box>
+                    <motion.div
+
+                        initial={{opacity: 0}}
+                        animate={{opacity: 1}}
+                        transition={{duration: 0.2}}
+                    >
+
+                        <Box h={"100%"} w={"100%"} p={rem(10)}>
+                            <DealEditDrawerGeneralTab/>
+
+                        </Box>
+                    </motion.div>
+
                 </Tabs.Panel>
                 <Tabs.Panel value={"history"}>
-                    <Box p={rem(10)}>
-                        <DealEditDrawerStatusChangeTable/>
-                    </Box>
+                    <motion.div
+
+                        initial={{opacity: 0}}
+                        animate={{opacity: 1}}
+                        transition={{duration: 0.2}}
+                    >
+                        <Box p={rem(10)}>
+                            <DealEditDrawerStatusChangeTable/>
+                        </Box>
+                    </motion.div>
                 </Tabs.Panel>
                 <Tabs.Panel value={"servicesAndProducts"}>
-                    <Box p={rem(10)}>
-                        <ProductAndServiceTab/>
-                    </Box>
+                    <motion.div
+
+                        initial={{opacity: 0}}
+                        animate={{opacity: 1}}
+                        transition={{duration: 0.2}}
+                    >
+                        <Box p={rem(10)}>
+                            <ProductAndServiceTab/>
+                        </Box>
+                    </motion.div>
                 </Tabs.Panel>
                 <Tabs.Panel value={"services"}>
                     <Box p={rem(10)}>